Canvas management
The Canvas Management in the Web Editor provides users with a powerful and flexible workspace to design, organize, and interact with web application layouts. The canvas serves as the central area where all visual design and editing take place, offering a range of tools to streamline the creative process and ensure precision.
There are 8 tools for canvas management that you can access from the top panel on the right side.
View Components:
The View Components tool enhances the visual editing experience by highlighting individual HTML components on the canvas with a dotted border. This makes it easier to identify, select, and manipulate components during the design process.
Preview:
The Preview tool allows you to see a real-time representation of your page, giving you an exact idea of how it will appear on your website.
Fullscreen:
The Fullscreen tool enables you to edit the canvas using the full screen of your device, removing distractions and providing a larger workspace for detailed designs.
View Code:
Use the View Code tool to inspect the HTML and CSS code generated from your visual edits, offering transparency and flexibility for advanced users.
Edit Code:
The Edit Code tool allows you to directly edit the HTML code for the entire page, providing flexibility and control for developers and advanced users.
Save Changes:
The Save Changes button ensures that all your edits and updates to the web page are stored and applied to your website. It acts as the final step in the design process, making your changes live.
Rulers:
The Rulers tool provides a visual guide for precise layout and design work, allowing users to measure and align components within the canvas. It enhances the design experience, by offering accurate reference points for better control over element placement and spacing.
Delete Canvas:
The Delete Canvas button allows you to clear the content of the selected page, effectively making it empty while preserving the page itself in the workspace. This feature is useful when you want to remove all elements and start fresh on a specific page, without affecting other pages in your project.