Skip to main content

App editor

The app editor is a low-code builder to create custom User Interfaces with a mix of drag-and-drop and code.

Apps quickstart
Learn how to build your first app in a matter of minutes.
React/Vue/Svelte apps
Users can import their own React/Vue/Svelte apps in addition to using Windmill's built-in App editor.

If you're more into videos, you can check out our tutorial on the App editor:


The app editor is composed of 6 main sections:

  1. Toolbar
  2. Canvas

Connecting components:
3. Outputs
4. Runnables panel

  1. Component library and Settings
  2. App Styling

App editor

Toolbar​

The topbar helps you in your app editing.

App Menu

Learn more​

Toolbar
Discover all the features of the toolbar.

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​

Canvas
Move, resize, and nest components.
Component library
Discover all the components available.

Connecting components​

The strength of Windmill's app editor is the ability to connect everything together:

  • components can be linked to each other
  • components can be directly linked to scripts and trigger them
  • background runnables can be that are run in the background on app refresh on when an input changes
  • frontend scripts can be used to manipulate the client app state
Connecting components
The strength of Windmill's app editor is the ability to connect everything together.

In Windmill's app editor:

  • the runnable editor catalogs and configures all the scripts present in the application
  • the output panel lists the outputs of all the components and scripts in your application

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​

Runnable editor
Learn how to create and configure Apps runnables.

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​

Outputs
The outputs represent the states & results of the app
State
Learn how to interact with the app's state using frontend scripts.

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​

Component library
Discover all the components available in the library, and their configurations.
Component configuration
Each component can be configured individually. This allows for adjusting its value, behavior (especially by linking a script to the component), and styling.

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​

Styling
Give styling to your app & components.

Other App Features​

Public apps
Apps can be accessed as a standalone app by anyone who has the secret URL.
Schedule app reports
Send a PDF or PNG preview of any app at a given schedule.
Group of components
Components can be grouped within containers.
Import custom React components
Define components in React or Vanilla JS that interact with the rest of your app.