# Main Window
When you start the Theme Builder application, it shows the main window displayed below. Initially it shows the [default ](https://docs.wisej.com/theme-builder/user-interface/preview)preview pane containing a sample of Wisej controls in two floating windows in a **Wisej.Web.Desktop** container.
The tree on the left side shows all the elements in the current theme and the property grid on the left-bottom side displays the properties or items of the selected tree node.
You can change any aspect of the theme through this window and see immediately what effect your changes have on any Wisej control or on your application while it's running.
%20\(1\).png?alt=media)
| Tool | Description | |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|  | Creates a new theme. | [Read more.](https://docs.wisej.com/theme-builder/getting-started/create-new-theme) |
|  | Loads an existing theme. | [Read more](https://docs.wisej.com/theme-builder/getting-started/edit-a-theme) |
| .png?alt=media) | Saves the theme being edited. | |
|  | Saves the theme being edited to a different file. | |
| %20\(1\).png?alt=media) | Dropdown list with the preloaded themes. You can switch the theme being edited using this list. | |
|  | Reloads the current theme. It may be useful if the preview window gets messed up after a while. | |
| %20\(1\).png?alt=media) | Enables or disables the live-update mode. When live update is ON, the preview window shows any change to the theme immediately. Turn it OFF to apply several changes in a sequence and save the time it takes to refresh the preview. | |
| .png?alt=media) | Enables or disables right-to-left alignment and layout. When Right To Left is ON, the preview scripts create the widgets setting the rtl and rtlLayout property to true, which adds the "RightToLeft" state to the widgets that support RTL mode. | |
|  | Adds a new element or a new value to the theme.
A new element can be a Color, an Image, a Font, an Appearance, a State or a Component.
A new value can be a Style or a Property. The type of element or value that is added depends on the selected node in the components.
| Colors
Images
Fonts
Appearances
Components
States
Styles
Properties
|
| .png?alt=media) | Deletes the selected element. | |
|  | Renames the selected element. | |
|  | Demotes the selected components. This button is enabled only when the selected element is a child component. Since components are hierarchical, this action lets you change the parent of a component. | |
|  | Promotes the selected components. This button is enabled only when the selected element is a child component. Since components are hierarchical, this action lets you change the parent of a component. | |
|  | Moves the selected element down. This button is enabled only when the selected element is a state a component or an appearance.
Moving a state up or down changes the order in which the styles and properties associated with the state are applied to the widget.
The Default state is always the first state in the list.
| |
|  | Moves the selected element up. This button is enabled only when the selected element is a state a component or an appearance.
Moving a state up or down changes the order in which the styles and properties associated with the state are applied to the widget.
The Default state is always the first state in the list.
| |
| Last Clicked | Shows the full appearance path of the last clicked widget in the preview window. The appearance key may not be present in the theme definition tree for several reasons: a) it could be a custom key defined in your application or an extension; b) it's a child component that is not themed (doesn't need to be); c) it's a new widget that wasn't themed.
The Last Clicked information allows you to add the specific appearance key when needed.
| |
---
# 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/main-window.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.