# Source: https://dev.writer.com/framework/builder-basics.md

# Builder basics

Writer Framework Builder’s interface is an overlay on top of the running app, which allows you to edit your app while it’s running. This approach gives you an accurate representation of how the app will look and behave without the need to constantly preview it.

## Writer Framework Builder’s modes

Writer Framework Builder has two modes:

1. **UI mode:** This is the default mode, which provides an overlay of tools for building and editing the user interface. The app still runs in UI mode, allowing to you test its functionality while you’re building it. You can also edit the app’s code and view its log.

<img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.ui-mode.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=8a94e3f7fd39ec70fae21dc2e1b03b90" alt="Writer Framework Builder in UI mode" data-og-width="3000" width="3000" data-og-height="2000" height="2000" data-path="framework/images/builder-basics.ui-mode.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.ui-mode.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=a122cbdd79fcf8e5de3214ab5939e96a 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.ui-mode.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=924c9d885b21f4e38f064143c1852312 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.ui-mode.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=4b8f0fa7546bff5e2ce8dadcb10f0a42 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.ui-mode.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=2f42816db826e23735cf3ecfe7fc7595 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.ui-mode.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=6945b75b8b38301ed39541a8c5b54a24 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.ui-mode.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=0a72a58bc3ab71c3bc1afc857f1479fe 2500w" />

2. **Preview mode:** This mode lets you preview the application, experiencing it almost as your end users would. The tool overlay is hidden, but you can still edit the app’s code and view its log in this mode.

<img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.preview-mode.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=74614f25146ef300768f159cd2c1bed8" alt="Writer Framework Builder in Preview mode" data-og-width="3000" width="3000" data-og-height="2000" height="2000" data-path="framework/images/builder-basics.preview-mode.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.preview-mode.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=75e90f0b03220df8d96febe0fc837e2f 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.preview-mode.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=c18b51599220cea2f04d685c6dbecf1d 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.preview-mode.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=dba895d8ffcd080a202b5c1cd8173de3 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.preview-mode.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=b3985be85f6dface197f401dbcaa45c9 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.preview-mode.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=f2e2f0d942454bd91aef4231f30e37eb 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.preview-mode.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=616d445e5211f973d9bf33af41d71fdd 2500w" />

You can switch between UI mode and Preview mode by using the **UI**/**Preview** selector near the upper left corner of the page.

<img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.ui-preview-selector.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=dde73bd2ff445c46b590423b99c6c476" alt="Writer Framework Builder’s UI/Preview selector" data-og-width="1200" width="1200" data-og-height="1200" height="1200" data-path="framework/images/builder-basics.ui-preview-selector.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.ui-preview-selector.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=5d494607847ea5ec3d07f30a4db14c09 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.ui-preview-selector.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=dae89a1aff96e1e2fddd1d6395cc825b 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.ui-preview-selector.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=0919e34504816284f28a233a1abf3db7 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.ui-preview-selector.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=2012a3591605296999700305a81ad2f5 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.ui-preview-selector.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=5d90d5e94b4a1fd9242b9e6e3e2aff32 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.ui-preview-selector.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=e51ce5cb6e2d4d3c2c8a834ca02dd65a 2500w" />

## Building your app in UI mode

### The different areas of UI mode

In UI mode, Writer Framework Builder’s page is divided into these areas:

<img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.ui-mode-with-labels.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=91038caeaa6ed955729dd980bf85bc73" alt="Writer Framework Builder in UI mode, with indivdual areas labeled" data-og-width="3000" width="3000" data-og-height="2000" height="2000" data-path="framework/images/builder-basics.ui-mode-with-labels.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.ui-mode-with-labels.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=00366a5c03ba9d2db1805264bc3ba48d 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.ui-mode-with-labels.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=4088bdbd8dee3c9698e0c53eb72a8992 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.ui-mode-with-labels.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=0bfd42762d3901069eb61eb084733b73 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.ui-mode-with-labels.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=1c189dccab89452149c9c56b7c8bb5fc 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.ui-mode-with-labels.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=5e86babda4b131b32a7d05c3280a99d1 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.ui-mode-with-labels.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=ec70a5c8ea1a26237c4ac5e8536de415 2500w" />

1. **Canvas:** This is where you lay out components to build your app’s user interface. It displays the UI as your users will see it.
2. **Core toolkit:** A “palette” of UI components that can be added to your app’s user interface. To add a component to your app’s UI, drag it onto the Canvas or into the Component tree.
3. **Component tree:** This provides an alternative way to view your app’s user interface: as a hierarchical tree structure. It’s useful for ensuring that UI components are located in the right place or in the correct container object, and is handy for selecting UI components in complex layouts.
4. **Component settings:** This panel lets you view and edit the settings for the currently selected UI component. You can hide the Component settings panel if you need more screen space to work on the Canvas.
5. **Top bar:** Contains the “high level” editing controls: switching between UI and Preview mode, undoing and redoing the most recent change to the UI, and viewing the application’s state.
6. **Bottom bar:** Contains the “low level” editing controls, which toggle the Code and Log panels.

### Defining your app’s user interface

Writer Framework Builder provides a selection of over 50 UI components that you can use to build your app’s user interface:

<img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.components.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=5e4532b6ad203b6e794f83861715c232" alt="Visual catalog of all the components in the Core toolkit" data-og-width="3000" width="3000" data-og-height="2000" height="2000" data-path="framework/images/builder-basics.components.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.components.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=4eee4551e1cf263cebf62eeb76a276c9 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.components.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=e15a72a9b8d47e3114fe0f875abc43a1 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.components.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=8c2e7fa4118a81bdb5939cc9bc1c968d 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.components.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=d69b40e683c90a7ae98f6fc77eb5263b 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.components.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=8c4ef147d770ae94b7762c28c3024da4 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.components.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=12c2bf28dca177374f77be4fc4431074 2500w" />

You define your app’s user interface by dragging components from the Core toolkit and dropping them either onto the Canvas or into the Component tree (remember, the Canvas and Component tree provide different ways to look at your app’s user interface). If you simply drag and drop a UI component onto an empty spot on the Canvas, it will be placed at the “end,” below all other UI components in the user interface. To place a UI component at a specific location, drag them over the desired location or parent component until you see the insertion lines.

<img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.drag-drop-components.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=4b5ba0fe00764a2a716124378509aadc" alt="Writer Framework Builder with diagram showing how to drag and drop components from Core toolkit" data-og-width="3000" width="3000" data-og-height="2000" height="2000" data-path="framework/images/builder-basics.drag-drop-components.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.drag-drop-components.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=700c56e747cd57b700eb9ebedaf0fafa 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.drag-drop-components.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=024ec60e0ab651fd54364a7b538bfca8 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.drag-drop-components.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=e6f24c4a64d579736bae29dce8161776 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.drag-drop-components.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=e7da83a6579f6cb7ae2ebcf1f885df84 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.drag-drop-components.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=4ee11701dd5f847c57443a61a1295b6d 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.drag-drop-components.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=b0a931ab634277d3ba2acbe5ae7875e5 2500w" />

It can sometimes be difficult to find the component you’re looking for, so the Core toolkit has a search field. You can use it to find the narrow down the list of components or find a specific one.

<img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-search.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=10078ffb156187bdaa6af8fefc0ca6af" alt="Close-up of Core toolkit with instructions for using its Search text field" data-og-width="1200" width="1200" data-og-height="1200" height="1200" data-path="framework/images/builder-basics.component-search.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-search.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=7c0a9bfdacb4812e3396ede7c72f35bc 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-search.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=85dbbf444064838a9f4ea7b52aa224f5 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-search.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=f9cda247df4429913f6025f9e84fe7d5 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-search.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=d1ae6b33f9feb602c9ff575b74fcedef 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-search.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=028cbdaf8617f94da15b2c5cbdae38bf 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-search.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=67bcebcc10c298e900ba8bc17b4912c5 2500w" />

Some UI components, such as Section, can act as “parents,” which are UI components that can contain other UI components. Others, such as Text, cannot. Additionally, certain components have placement restrictions — for instance, a Column must be added to a Column Container, and a Sidebar can only be added to a Page.

<img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.parent-components.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=89df0ad6e44d0de0e72b77290c7130bd" alt="Writer Framework builder, showing parent-child relationship between a Section and the Text Input and Button components it contains" data-og-width="3000" width="3000" data-og-height="2000" height="2000" data-path="framework/images/builder-basics.parent-components.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.parent-components.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=a0ed79f5a1a9c0d0f3f925d32fb1f822 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.parent-components.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=7b46286499f3a682cd9f7579e0d34717 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.parent-components.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=c37e067eb7c179f14cd11c4ca357a095 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.parent-components.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=4741e4cdb95786f46bb2dfd7e19f8bb4 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.parent-components.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=7ed37871b32e56a1171d6111b89734df 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.parent-components.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=0f2968abbae3ee1482bfb57b69cbb7c1 2500w" />

The Component tree provides a hierarchical view of your app’s user interface. It shows the top-down layout of UI components in your app, as well as the parent-child relationships between components, making it easier to understand your app’s structure and ensure that components are correctly nested.

You will find the Component tree useful when trying to reorganize the order of components in the UI, especially those located inside a parent UI component. For more flexibility and finer control, you can use the Component tree as a source or a destination for your drag and drop actions.

### Discovering components

The Builder is designed to allow easy discoverability of components. Rather than scouring specifications every time you need to use a component, you can rely on the visual editor to guide you.

1. **Short description:** You can hover on the component type to get a tooltip with a short description.
2. **Available properties and events:** Looking at *Settings* will allow you to see which of its properties are configurable.
3. **Built-in docs:** Components have short docs built into them. You can expand it by clicking the help icon in Settings.
4. **Event handler stub code:** Different events need to be handled differently. The built-in stub handlers, which can be found next to each event, can help you get started when writing event handlers.

### Selecting and editing components

To move or edit a component in your UI, you need to select it first. You can do this by clicking on the component either in the Canvas or in the Component tree. The selected component will be highlighted in both the Canvas and Component tree.

<img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.select-components.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=0adc6378dc0fe65bba609ffb3629a9fe" alt="Writer Framework Builder, with instructions to select a component by clicking on it either on the Canvas or in the Component tree" data-og-width="1200" width="1200" data-og-height="1200" height="1200" data-path="framework/images/builder-basics.select-components.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.select-components.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=69f64acf5a353a50a058f536af212652 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.select-components.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=63c1c6140c69e480a8a9da808b49be74 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.select-components.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=3209a283557ae297f18e8c141e8d67e5 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.select-components.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=3de6579ec52dbb55ee98da20d943ce2b 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.select-components.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=ab7852c16413aae893b12a72e2badc65 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.select-components.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=c022d73d0122d98d3210045360cb0714 2500w" />

Selecting a UI component will allow you to view and edit its settings in the Component settings panel on the right side of the page.

<img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-settings.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=9e1be3f0482efb2ed2b04a1856696591" alt="Writer Framework Builder, with Component settings panel on display, and instructions to hide the panel" data-og-width="1200" width="1200" data-og-height="1200" height="1200" data-path="framework/images/builder-basics.component-settings.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-settings.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=b74b4a76ee88f3c930e090b27a0294be 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-settings.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=d557d9d1cccb37a2cf28e6c52a1ae828 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-settings.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=9a29e054e82ef1bf659e80e2d9dbe1a0 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-settings.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=54c245ebd8ad0bda71dca34c58d3561e 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-settings.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=25157efb1f3ed379daa6ba23fe288d66 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-settings.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=e0082161c74230c605ef7a8d3c1f3599 2500w" />

To hide the Component settings panel to get a better view of the Canvas, click on **»** in the button bar. To show the panel, click on **⚙** in the button bar.

<img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-settings-show.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=6b2dc8293ac3ac09f0d071892bf50e08" alt="Writer Framework Builder, with Component settings panel hidden, and instructions to show the panel" data-og-width="1200" width="1200" data-og-height="1200" height="1200" data-path="framework/images/builder-basics.component-settings-show.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-settings-show.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=8d8a124aa2aab43d8254cd7ea9f0de29 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-settings-show.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=1a242608ae61309561a805ff69b52acb 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-settings-show.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=0be44d449b10a90b351289d53eabf0f0 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-settings-show.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=38f78134e04db07a235a9d2af4e4c931 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-settings-show.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=99ed6afa55fd3d0cd3cae22d3ea8936f 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-settings-show.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=f871c6b4bdcbea854b60a0a6e96c49d1 2500w" />

The settings in the Component settings panel are divided into the following sections:

<AccordionGroup>
  <Accordion title="Basic settings">
        <img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.basic-settings.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=d1b63c133e4c8356247559bb423b1c37" alt="Component settings panel, with basic settings highlighted" data-og-width="1200" width="1200" data-og-height="1200" height="1200" data-path="framework/images/builder-basics.basic-settings.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.basic-settings.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=15afa761b7d167f1cc56e30502e55ce3 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.basic-settings.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=6f8984c0ebed6394ed3ef8e6f4ee07ab 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.basic-settings.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=bd8d36d379991212879a1e01590c21d4 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.basic-settings.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=ab2e9e4ba51ccb549536fe0467b45d2b 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.basic-settings.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=c42f85dfdb44df40232c243ae7912a04 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.basic-settings.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=1811e56ac9a7774a915dfa5284e86bbe 2500w" />

    These settings are divided into two categores:

    1. **General**, which specifies the component’s content
    2. **Style**, which defines the component’s appearance.

    Values for these settings can include:

    1. Literals, e.g. `monkey`
    2. References to application state using the template syntax `@{}`, e.g. `@{my_favourite_animal}`.
    3. A combination of both, e.g. `My favourite animal is @{my_favourite_animal}`.
    4. Nested states can be accessed with `.` (dot), e.g. `@{building.height}`.
    5. Nested elements can be dynamically accessed with `[]`, e.g. `@{building[dynamic_prop]}` will be equivalent to `@{building.height}` when `dynamic_prop` equals `height`.

    The values for these settings can be of different types, such as *Text*, *Color* and *Number*. The values are stored as text and are cast to the correct type when evaluated.
  </Accordion>

  <Accordion title="Binding">
        <img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.binding.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=f629f67f8ac7026aa8de68a24b97d8d2" alt="Component settings panel, with Binding settings highlighted" data-og-width="1200" width="1200" data-og-height="1200" height="1200" data-path="framework/images/builder-basics.binding.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.binding.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=9901dd7cf118fd8d83f064c60d06dfd3 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.binding.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=c0137d90b3a4539f89b587d528e9c7ad 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.binding.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=f45d7ad5281bd231e22d80dc5c243278 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.binding.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=d7099859773f2ead09bd3e5c7f7ce4e5 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.binding.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=c24348a2f08d33e46c1bcd9dda0bb4d9 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.binding.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=9dba2a6b80b879eca85ceb327fafbc1f 2500w" />

    Only input components have a **Binding** section, whose settings are used to bind the component to a variable in the application’s state. The binding is two-way; if the user changes the component’s value, the state variable will change to match, and any change the code makes to the bound state variable will also change the component’s value.

    For example, a *Slider Input* component can be bound to a state variable `my_var`. If the value of the slider changes, so does the value of `my_var`. Similarly, if the value of `my_var` changes, the slider is moved automatically to reflect the change.

    To bind an input component, specify the state element. For example, `my_var` or `building.height`. Note that this field should not contain the template syntax, e.g. `my_var` and not `@{my_var}`.
  </Accordion>

  <Accordion title="Events">
        <img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.events.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=070332bffa0c38b0bcce28f43d943364" alt="Component settings panel, with Events settings highlighted" data-og-width="1200" width="1200" data-og-height="1200" height="1200" data-path="framework/images/builder-basics.events.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.events.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=dc4caa1306f2ee5de264337d2226447a 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.events.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=43e402e9c9f37cd130fac59b407e279b 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.events.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=c10d1b2b37a04488f5112952075caad5 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.events.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=a207ea86726b94da41e1f184b7c400c2 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.events.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=02e3f495731b2acd5e87067978a93dc4 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.events.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=a89f5de7f3130df0620f0a3f7b41c086 2500w" />

    The **Events** section lists all the events generated by the selected component, with the option of setting event handlers for them. For example, one of the events that the Text Input component generates is the `wf-change` event, which occurs whenever the user changes the contents of the component.

    For more about event handlers, consult the [*Event handlers*](/framework/event-handlers) section of the Writer Framework documentation.
  </Accordion>

  <Accordion title="Visibility">
        <img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.visibility.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=9bb148a61970832ad270176472288b7f" alt="Component settings panel, with Visibility settings highlighted" data-og-width="1200" width="1200" data-og-height="1200" height="1200" data-path="framework/images/builder-basics.visibility.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.visibility.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=1febcda6054fd3fd691a56c9d83fa1dd 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.visibility.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=ca7905d1c2cff8b5254bd5c5894214c7 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.visibility.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=fd374b0f3beff762fd58649bc9842c57 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.visibility.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=2c9cf885be4b31ec703cef1a8feba351 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.visibility.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=f86e3be31f2dd01d824bc6fb4aaf6a4b 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.visibility.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=faab4806e46ae0d40e042b58e607bc86 2500w" />

    The **Visibility** settings control Whether the component should be displayed. There are three visibility options:

    1. **Yes**: The component is displayed.
    2. **No**: The component is *not* displayed. Note that hidden components are still part of the HTML code but aren't shown.
    3. **Custom**: The component’s visibility depends on the value of a given state or context element. For example, if set to `my_var`, visibility will depend on the value of the `my_var` state element. Note that this field, similarly to Binding, should only contain the state element, e.g. `my_var` and not `@{my_var}`.
  </Accordion>
</AccordionGroup>

### Component shortcuts

The Component shortcuts bar contains a set of options to perform various operations that are often performed on components.

<img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-shortcuts.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=787dc69289144b36d75082d070cb92c9" alt="Component settings panel, with Component shortcuts bar highlighted" data-og-width="1200" width="1200" data-og-height="1200" height="1200" data-path="framework/images/builder-basics.component-shortcuts.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-shortcuts.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=6a6ea33bd8ab8925ef4f05182ceb38da 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-shortcuts.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=0c23087d02bb0f73de441b03394abb5a 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-shortcuts.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=4ee7f99c09ff13504e70f675af0d3bb9 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-shortcuts.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=a1fec8e3894de4c3f4a7ee2c97005f11 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-shortcuts.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=18c13f28ddf2ddb53b47ff5ddba3c3a8 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-shortcuts.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=7f8130d1343cd2b54c1a333cf9d4e1cb 2500w" />

Options will be grayed out when they're not applicable to the relevant component. Most shortcuts can also be activated using the keyboard; hover the cursor over a shortcut to see its keyboard shortcut.

The shortcuts are:

<img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-shortcuts-guide.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=60d9ef66da680575e6aff41dc2a61afc" alt="The Component shortcuts bar, with labels" data-og-width="1200" width="1200" data-og-height="1200" height="1200" data-path="framework/images/builder-basics.component-shortcuts-guide.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-shortcuts-guide.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=be48bedc80c4abc32f88745b48949fd2 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-shortcuts-guide.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=2aa28ee4fa00bc2b9d8944f826b6c664 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-shortcuts-guide.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=4ba82ce7fa87e784d88b63742b34f0f0 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-shortcuts-guide.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=6054bcb8648e09fe63539f16c79ed630 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-shortcuts-guide.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=dc0687983f86cd50ea91bc2319948088 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.component-shortcuts-guide.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=22498724110d73186434da7f7c068fdc 2500w" />

* **Add**: Adds a child of a specified type to the selected component.
* **Move up**: Decrements the position index of the selected component, used to sort children within the parent container.
* **Move down**: Increments the position index of the selected component.
* **Cut**: Cuts the selected component and places it in the clipboard.
* **Copy**: Copies the selected component to the clipboard.
* **Paste**: Pastes the content of the internal clipboard using the selected component as a parent.
* **Go to parent**: Selects the parent of the selected component.
* **Delete**: Deletes the selected component.

### The Code editor and the Log

Writer Framework Builder provides a built-in Code editor for the `main.py` file, which defines the behavior of the app. You can toggle the Code panel by clicking the **Code** control near the lower left corner of the page:

<img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.code.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=469014b3b60a8ca53145e42f37ef1c88" alt="Writer Framework Builder, with the Code editor displayed" data-og-width="3000" width="3000" data-og-height="2000" height="2000" data-path="framework/images/builder-basics.code.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.code.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=9ab718d2ae4021b0b3382e76ed7ea604 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.code.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=2255475cd9494eb4673633c5f073d437 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.code.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=44126e2b8fa82cf451e46aa1bcffdce0 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.code.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=88af3d71cbd9982b87cdae57f4fb0cba 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.code.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=9ea6a68917993dea6f8e0e4fb9122364 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.code.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=dae07eba876aef4fb808d05fdc9c04b6 2500w" />

Any changes made to the code do not take effect until you click the **Save and run** button, located at the upper right corner of the code editor.

The log is a useful debugging tool that displays any messages sent to standard output via the `print()` function, as well as any error messages. You can toggle the Log panel by clicking the **Log** control near the lower right corner of the page:

<img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.log.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=0e276770d1f08c2b6010f6ab30f2399c" alt="Writer Framework Builder, with the Log editor displayed" data-og-width="3000" width="3000" data-og-height="2000" height="2000" data-path="framework/images/builder-basics.log.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.log.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=bf260d3a9ca3b4bac586f0a8c77b3fdd 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.log.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=f3ca3594e4b598830b484f5b757fe7ae 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.log.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=46dcc77e52dbc7830a1827ec10c4e222 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.log.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=21fd1f27d6e494f639b36065f3b66cc3 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.log.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=8f8952172d18ce06fb76c19a0ba6bc86 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.log.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=1d1c827e8fca393c2a358d87c0c080b8 2500w" />

Note that both the Code editor and Log panes can be displayed at the same time:

<img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.code-and-log.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=09b2359d8154446377d59b1daca3704d" alt="Writer Framework Builder, with the Code editor and Log displayed at the same time" data-og-width="3000" width="3000" data-og-height="2000" height="2000" data-path="framework/images/builder-basics.code-and-log.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.code-and-log.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=9143033ac688570b392e58dfbe9e08f5 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.code-and-log.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=48b6797fded21db21bd95902a1e5bf48 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.code-and-log.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=85b73dc8a86f594786510c6360de8a0b 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.code-and-log.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=c4f9cccb94a40218e3e43beca3941000 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.code-and-log.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=27d23b1b8c9de8ec63bb92305703a193 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.code-and-log.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=10f2421d5ad1652b68355c9509f269de 2500w" />

## Testing your app in Preview mode

In Preview mode, the overlays that let you build the user interface — the Core toolkit, Component tree, and Component settings — are invisible and unavailable. You see the app *almost* as your users would see it; the Top bar and Bottom bar, which your users would not see, are still available to you in Preview mode.

<img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.preview.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=0e5e0750b740b6a7208aa13058d5aaba" alt="Writer Framework Builder in preview mode" data-og-width="3000" width="3000" data-og-height="2000" height="2000" data-path="framework/images/builder-basics.preview.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.preview.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=4573d6bae98d603a750e604ce75a7148 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.preview.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=6e8c4b7536482434c41fae78501119f2 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.preview.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=ec9c75a2a73b64bb6b5203cf68273c2e 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.preview.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=b74fb925461d8c948b279d868e75d314 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.preview.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=2618a2e5fc32d8ff74d5dd4d1c3f858e 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.preview.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=6cbfa9ec48f88213c57f44a7bf1a3a02 2500w" />

You can still use the Code editor and Log in Preview mode:

<img src="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.preview-code-and-log.png?fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=30b357f89696828a0c990aa476d8cb7d" alt="Writer Framework Builder in Preview mode, with the Code editor and Log displayed at the same time" data-og-width="3000" width="3000" data-og-height="2000" height="2000" data-path="framework/images/builder-basics.preview-code-and-log.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.preview-code-and-log.png?w=280&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=ffda261078581d5e2349aa13a3504cb3 280w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.preview-code-and-log.png?w=560&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=4ef0236d556e891679c1b61a597a12a3 560w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.preview-code-and-log.png?w=840&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=932aa3a3d87410c76a1d6ffdbfb2c738 840w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.preview-code-and-log.png?w=1100&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=025e2e48a39e1759527c82d743e79b52 1100w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.preview-code-and-log.png?w=1650&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=7c06bb292ad08d902eb2c6a5aaf9d33e 1650w, https://mintcdn.com/writer/eBiCs3I5_-mSTcT-/framework/images/builder-basics.preview-code-and-log.png?w=2500&fit=max&auto=format&n=eBiCs3I5_-mSTcT-&q=85&s=05bc96aa6ab07b8fd223173b71399226 2500w" />