# Low-code app editor (legacy)

> How do I build apps with the legacy low-code app editor in Windmill? Drag-and-drop components, custom CSS and React components. For new apps, use full-code apps.

:::info Legacy

The low-code app editor is legacy. For new apps, we recommend [full-code apps](/docs/full_code_apps), which let you build custom frontends with React or Svelte connected to Windmill backend runnables and data tables. The low-code app editor remains available and supported, but new development is focused on full-code apps.

:::

The low-code app editor is a drag-and-drop builder to create custom User Interfaces with a mix of visual components and code. For building apps with React or Svelte, see [Full-code apps](/docs/full_code_apps).

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](../0_app_editor/index.mdx#toolbar)
2. [Canvas](#canvas)

_Connecting components_: 3. [Outputs](#outputs) 4. [Runnables panel](#runnables-panel)

5. [Component library and settings](#component-library-and-settings)
6. [App Styling](#styling)

![App editor](../../assets/apps/0_app_editor/app-sections.png 'App editor')

## Toolbar

The topbar helps you in your app editing.

![App Menu](../../assets/apps/1_app_toolbar/app-toolbar.png)

#### 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

## 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 are run in the background on app refresh or when an input changes
- frontend scripts can be used to manipulate the client app state

In Windmill's app editor:

- the [runnable editor](#runnables-panel) catalogs and configures all the scripts present in the application
- the [output panel](#outputs) 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](../../assets/apps/0_app_editor/app-runnables-panel.png)

#### 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](../../assets/apps/0_app_editor/app-outputs.png.webp)

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](../2_connecting_components/index.mdx).

#### 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](../../assets/apps/0_app_editor/app_components_add.png 'App Components Library')

![App Components Configuration](../../assets/apps/0_app_editor/app_components_configuration.png '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](https://tailwindcss.com/).

#### Learn more

## Other App features