Top Bar

The Top Bar in the Page Editor is a key component for efficiently managing your page and app. It provides quick access to various functionalities, including navigation, preview modes, and customization options. Below is a detailed explanation of each function available in the Top Bar:

1. Actions Button

The Actions button allows you to easily navigate between different pages within your project. It provides access to all the pages you've created, enabling you to switch to another page without having to leave the Page Editor. This makes managing multiple pages smooth and convenient as you work on your app.

2. Display View

The Display View option allows you to view your app in different screen modes, such as mobile, tablet, or desktop. This feature ensures that your design is responsive and provides an accurate representation of how the page will look across various devices. By selecting the appropriate display mode, you can quickly verify that your design adapts well to different screen sizes.

3. Run Mode

Click the Run button to view your page in Run Mode, which simulates how it will behave when live. This allows you to interact with the elements on your page, such as buttons and forms, to ensure everything functions as expected before finalizing your design. It's a quick and efficient way to preview real-time changes.

The Run button not only allows you to view your page in Run Mode, but also enables Debug Mode. In this mode, you can pause execution at specific breakpoints to inspect elements and capture data. This helps in identifying and resolving any issues with the page’s functionality, providing a seamless debugging experience as you test interactions and behavior in real-time.

4. Undo/Redo Options

The Undo and Redo buttons allow you to quickly revert or reapply recent changes. If you've made a mistake or want to experiment with different design choices, these options provide flexibility and efficiency in navigating through your editing process.

5. Save

Once you've made adjustments and are satisfied with your page design, click Save to store your changes. This ensures your work is saved and prevents any loss of progress as you move forward in the Page Editor. It’s a vital function for maintaining the integrity of your project.

6. Dark/Light Mode Selector

The Dark/Light Mode selector allows you to toggle between light and dark themes for the Page Editor interface. This is useful for personalizing the editing environment, especially during long work sessions. You can switch modes based on your preference or the lighting conditions around you to make the interface more comfortable for your eyes.

7. User Options

The User Options button provides access to user-specific settings and preferences. Here, you can manage your account, adjust platform settings, and access other personalized features. This option ensures that you have control over your user experience while working within the Workmaster platform.