The app editor is a low-code builder to create apps with components, create interactions with runnables, and configure the app settings.
The app editor is composed of 6 main sections:
The topbar helps you in your app editing.
The canvas at the center of the editor is where you design and see the overall UI. Insert new components, move them around, resize them, or nest them in containers.
On the left panel of the editor, you can see the list of outputs of the app. These outputs represent the states & results of the app and are categorized into four types:
- Context: The context holds information such as the user email, username, workspace, query parameters, and more.
- State: The state holds the app's current state, which can be manipulated by the frontend scripts.
- Component Outputs: These outputs correspond to the outputs of the individual components.
- Background Runnables: These outputs represent the outputs of the background runnables.
You can perform the following actions with the outputs:
- Search for an output.
- Edit the output's ID.
- Select a component to view its outputs.
- Connect an input to an output.
On the bottom panel of the editor, you can see the list of runnables of the app. The runnables are the scripts or flows that are linked to components, or ran in the background. They are used to perform actions when a component is clicked, to fetch data, etc. They make all the interactions of the app.
Component Library and Settings
Finally, on the right panel of the editor, you can insert a new component, configure a component or edit the component styles.
Styling on the app editor can be managed at the component and app-level, with pre-set configurations or using CSS & Tailwind.