Explore the Interface

As you open AppMaster Web Designer, you will see an editor navigator, header and a work area where the currently selected tab content will be displayed.

Navigator

The Navigator provides fast-access links to the web editor tabs, helpful links, and a logo-button for returning to the list of web applications or other AppMaster Studio sections.

Back Button

Click the AppMaster logo to open the dropdown with the menu appears, allowing you to:

• Back to the web apps list.
• Navigate to the other AppMaster Studio sections.

Web Designer Menu

AppMaster Web Designer includes not only UI builder. It also provides a set of additional tools and services.

To fast navigate between it, use Web Designer Menu, which includes the following tabs:

• UI Designer
• Local DB
• Application Trigger
• Business Logic
• Global Variables
• Scheduler
• i18n (Localisation)
• Theme Builder
• Application Settings

Helpful Links

The dropdown includes actions such as:

• Chat with Us: enable or disable the chat on the bottom right web editor corner.
• Documentation: open a complete technical guide about AppMaster studio usage.
• Tutorials: open the AppMaster collection of tutorials and examples.
• Community: open AppMaster Community to connect with other AppMaster users.
• Reset onboarding: open onboarding again to study the interface of the web editor.
• Keyboard shortcuts: open the keyboard shortcuts list that helps speed up your design workflow. You can view these shortcuts by pressing Shift + /.
• What's New: if you miss any updates, you can explore the complete updates list by this link.
• Legal Summary: open all AppMaster legal documents.

Header

The editor header provides application information and an app toolbar.

App information

On the left header side displays base information about your app:

• App Icon: the app's favicon to fast visually identify your application.
• App Name: name of your application.
• Project Name: the project that the application belongs to.
• Default App Indicator: if the application is marked as default, you see a star icon near the app name.

Collaborators List

The collaborator list displays all project members currently working on the application. Each collaborator has a personal border color, this color will be used for their cursor.

If the number of collaborators exceeds 5, click on the counter to see hidden collaborators. Your avatar always displays in the first place.

Hover over an avatar to see the name of the collaborator name.

You can read more about Collaboration mode here.

Preview

To run the application preview, click the Preview button and select deployment plan to load its data or select Preview with mock data.

Preview will be run in a new tab and updated in real-time while you make changes in your application without saving needed.

You can read more about Realtime preview mode here.

Action Buttons

Push changes

All changes you make in the application are saved in a draft. You don’t need to save applications during your work process.

But if you publish your project without pushing, you don't see this change in the build version. To include changes to the project build, you should push them to the server before project publishing. After pushing, changes will be included in the subsequent project publishing.

Publish Application SOON

To update the built version of the project, you need to publish your application to one of your deployment plans.

You can run publishing directly from the editor. To publish, click the Rocket button and select the target deploy plan.

Work area

The work area is the central part of AppMaster Web Designer, where you create and set up your app.

Work area content will be changed depending on which tab is currently selected. Each of the available tabs will detail an overview in the following articles.

After opening the Web Apps Editor, the first section that will be opened is UI Designer.