Skip to main content

App Editor

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:

  1. Toolbar
  2. Canvas
  3. Outputs
  4. Runnables panel
  5. Component Library and Settings
  6. App Styling

App Editor

Toolbar

The topbar helps you in your app editing.

App Menu

Learn more

Canvas

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.

Learn more

Outputs

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.

App Outputs

You can perform the following actions with the outputs:

Learn more

Runnables panel

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.

App Runnables panel

Learn more

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.

App Components Library

App Components Configuration

Learn more

Styling

Styling on the app editor can be managed at the component and app-level, with pre-set configurations or using CSS & Tailwind.

Learn more

Other app features