# Preview The preview pane on the right side of the Theme Builder lets you see any change you apply to the theme in real time. There are three built-in previews, but you can edit or create your own preview script and you can preview your **running application** right in Theme Builder. Since Wisej.NET is an open system being able to integrate with countless JavaScript widgets out there, we may need to preview custom widgets and extensions in order to theme them using either a new theme or a theme mixin. For this purpose, the Theme Builder supports loading or editing [custom ](#custom)preview scripts. You may edit the existing built-in scripts, or use them as a reference to see how they have been built, or you can create new scripts. You can change the current preview view using the toolbar above the preview area: ![](/files/GDa4KHwC2V3Ppp74eTxW) | Tool | Description | | | --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------- | | ![](/files/rlzBEtEWcZrv2Ns3PUP9) | Selects the browser: IE or Edge/Chromium. | | | ![show Windows.Image](/files/R5gb0XMpfdKS8AR8oXFp) | Shows the main view. | | | ![show Controls.Image](/files/BpCADlueaNRFkpA0O8Sp) | Shows the controls view - contains a number of additional controls. | | | ![show Grid Preview.Image](/files/UlV6oPzILsicNwkQsRMw) | Shows the grid preview. | | | ![](/files/VlEEZ6h0LiJTrrNJ66Tt) | Changes the zoom level in the preview window. | | | ![edit Custom Script.Image](/files/Tr9UA9DSugSXoQhppec9) | Opens a JavaScript editor preloaded with the current preview script. You can modify the built-in script or write a new one. | [Custom Preview](#custom) | | ![show Custom.Image](/files/djmLCQBqkfZx7kXMfktR) | Loads a custom preview script (.js). | [Custom Preview](#custom) | | ![save Preview Script.Image](/files/wtZwL8BUkgrXiMvIhKgW) | Saves the current preview script to a JavaScript file. | | | ![reload.Image](/files/OM9tSL6sDBGfumBuCpAM) | Reloads the current preview script. | | ## Windows The first preview script loads a number of common controls into two floating windows inside a **Desktop** control. Use this preview to see the result of your changes to active and inactive windows, many common controls, and the Desktop control and Taskbar. You can modify this preview script by clicking the ![](/files/THg14pV9fUrZWrwB9h6x) "Edit custom preview script" button in the toolbar. It will load the **Windows** script into the [custom ](#custom)preview script editor. ![Default Windows Preview Script](/files/T6kRVjPhkK8SaZzK6Rpk) {% hint style="danger" %} When you edit a preview script, remember to save it to a file, otherwise when you switch back to another script view your changes will be lost. {% endhint %} ## Controls The second preview script shows all the controls that didn't fit in the floating windows in the **Windows** preview script, plus popup widgets (i.e. *Tooltip, MessageBox, AlertBox*, ...). You can modify this preview script by clicking the ![](/files/THg14pV9fUrZWrwB9h6x) "Edit custom preview script" button in the toolbar. It will load the **Windows** script into the [custom ](#custom)preview script editor. ![Default Controls Preview Script](/files/X1C81vrl7ngkwEXRSlEz) ### Grid The third preview script shows a grid with some sample data and a representation of the most used column types. You can sort, move and resize the columns to see how your changes affect a grid also during normal usage. You can modify this preview script by clicking the ![](/files/THg14pV9fUrZWrwB9h6x) "Edit custom preview script" button in the toolbar. It will load the **Windows** script into the [custom ](#custom)preview script editor. ![Default Grid Preview Script](/files/6VyypyiiUwAYcLHEEVnE) ## Custom You can edit the existing preview script, or create and load your own custom preview scripts. The language is JavaScript and runs directly inside the browser instance used in the preview pane. The code below: ```javascript var button = new wisej.web.Button().set({ label: "My First Preview Button", width: 200, height: 30 }); root.add(button); ``` Shows the preview below: ![Custom Preview Script](/files/BVwU9xOdBdcRGgTUBmD6) {% hint style="info" %} The root element in the preview panel is called **root**. To show any widget in the preview panel you have to add it to **root.** {% endhint %} The preview panels in Theme Builder load the built-in preview scripts (JavaScript) to show a predefined selection of controls and layouts. ![Default Preview Script in Code Editor](/files/vVa5cVyDEGqFFXi0TE5A) | Element | Description | | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![cut](/files/98xsLQTf3jQIkgE3DH5Q) | Deletes the selected text and copies it to the clipboard. | | ![copy](/files/9EUXqpHNb6Q0cWD5uD4p) | Copies the selected text to the clipboard. | | ![paste](/files/TgXY6r4JP83Zi9n7SPfH) | Pastes the text in the clipboard at the current location. | | ![format](/files/sWyoZTmJR8lKcCwQqar5) | Tries to format the selected text. | | ![undo](/files/km2KrzmKKkRg9ChRl1n2) | Reverses the last operation. | | ![redo](/files/zbz2cKHp3SzuHUmEQ3XR) | Reapplies the previous operation that was reverted using **Undo**. | | ![100percent](/files/dy6j2V2ciCmJF3L88Vd4) | Changes the size of the font in the editor. | | ![save Preview Script.Image](/files/wtZwL8BUkgrXiMvIhKgW) | Updates the preview panel with the preview script in the editor. It doesn't close the editor. You can keep changing the script and click save to see the result in the preview panel. | {% hint style="success" %} Use the ![](/files/OfbNgN5dAVLz6NJBSM4p) save button to update the preview while editing the custom preview script. {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.wisej.com/theme-builder/user-interface/preview.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.