The HTML Editor is a powerful feature that allows demo builders to take full control over their demos by directly editing HTML and CSS. This tool enables you to:
- Edit HTML and CSS directly within your demo.
- Add not-yet-released elements to showcase future product features.
- Refine the look and feel of your app, enhancing its presentation for different use cases.
Why the HTML Editor is Important
The HTML Editor gives you complete control over the structure and appearance of your demo, ensuring it represents your product in the best light possible. Whether you're customizing navigation, adding new features, or refining the design, this tool is essential for tailoring your demo.
How to Use the HTML Editor
The HTML Editor provides direct access to the underlying code of your demo. You can search, edit, move, or delete any element within the HTML structure. Follow the steps below to start editing:
1. Access the Navigator Panel
On the left-hand menu of the HTML Editor, find the Navigator tab. This panel displays the HTML structure of your demo.
2. Select an Element
Choose an element either by clicking directly on it within the demo or by selecting it from the navigation tree. The selected element will be highlighted in both the demo and the Navigator panel. You can drag out the Navigator panel to easily find nested structures.
3. Edit, Duplicate, Copy or Delete an Element
Click the three dots next to the selected element in the Navigator to reveal options:
- Edit HTML: Open the HTML editor to make modifications to the element’s HTML and CSS.
- Duplicate: Clone the element at the same level, perfect for replicating menus or list items.
- Copy: Copy the element and all nested nodes to the clipboard for easy replication. Make sure to enable clipboard access.
-
Delete: Remove the element from the demo.
4. Edit HTML and CSS
When you select Edit HTML, a pop-up editor will appear where you can modify HTML or CSS. You might, for example, change the style of a header, adjust font sizes, or tweak margins. When you select a node, you'll see the full HTML tree to make edits.
5. Add New HTML
To add new HTML elements, select the Add HTML option from the menu. This is ideal for introducing not-yet-released features, additional navigation items, or experimental design elements.
6. Unpin the Editor for Easy Navigation
Click the unpin button in the top left corner of the editor to move the panel around as you make changes, allowing for easier workflow and navigation.
Use Case: Duplicating Elements
You can duplicate any element in the HTML tree, and it will be inserted at the same level as the original. For example, duplicating a navigation or table element can allow you to “fake” additional menu items or dropdown options. Once duplicated, you can modify the content to suit your needs.