Component Library

Windmill provides a set of components that can be used to build apps.

The app components library is located on the right-hand side of the app editor. It displays the app components and allows you to configure them.

The list of components is constantly growing according to our users' expectations. If you feel like a new component would be useful, please reach out to us.

Even though the list of components is never as up to date as on Windmill Cloud, here is the list of the available components:

Components properties

Components can be configured in two ways:

Inputs: inputs can be connected to an output or computed using a runnable.
- e.g. Table component has an input that can be connected to an output or computed using a runnable, which is an array of objects.
Configuration: configure property such as the button label, the text input placeholder, etc.
- e.g. Table component has a configuration property that allows you to configure the search bar: Client-side search, Server-side search, or no search.

Component outputs

Runnable: some component can trigger a runnable when an event occurs, usually when a user interacts with the component. The result of the runnable is stored in the component output in the key result. It also stores the loading state of the component.
- e.g. Button component can trigger a runnable when clicked.
Own outputs: some component have outputs defined by the component.
- e.g. Table component has a selectedRow output

Inserting components

Click on a component in the component library to insert it in the app canvas. It will be automatically positioned to the first available spot starting from the top left corner.

Layout

The layout components are used to organize the components in the app canvas.

Container

Containers allow you to host other components in a box. Moving a container means moving all the components inside.

The List component enables duplication of cards or rows with consistent structure, allowing for containment of other components. By default, editing or moving a component will apply changes to all cards or rows, while still allowing customization and exceptions for unique values per component.

Divider X

Divider X is a horizontal line.

Divider X

Divider Y

Divider Y is a vertical line.

Divider Y

Drawer

The drawer is container called by a button. Once you click on the button, a side tab will appear on which you can display other components.

Vertical Split Panes

Split panes component is a container split in x number of panes vertically.

Horizontal Split Panes

Split panes component is a container split in x number of panes horizontally.

The modal is container called by a button. Once you click on the button, a modal will appear on which you can display other components.

Stepper

The stepper component helps you lay out multi-step apps, with an optional validation function to validate a step.

Carousel List

The Carousel List component enables duplication of cards or rows with consistent structure in a carousel, allowing for containment of other components. By default, editing or moving a component will apply changes to all cards or rows, while still allowing customization and exceptions for unique values per component.

Decision Tree

This app component allows you to create a decision tree controlled by a flow-like structure. Each node in the tree represents a decision point with a dedicated subgrid and can lead to one or more subsequent nodes based on specified conditions.

Decision Tree

The navbar component facilitates control over the browser's URL bar, enabling:

Changing the behavior of the app by manipulating the query arguments and hash of the URL.
Opening an external URL in a new tab.
Opening another Windmill app, which allows for creating embedded apps where the user navigates between several of your Windmill apps.

VIDEO

Tabs

Tabs components allow you to host other components in several tabs. Each tab is a container.

Conditional Tabs

Conditional tabs are tabs that are displayed only if a condition is met. The conditions are an array of conditions. Conditions are evaluated in order. The first condition that evaluates to true will render its subgrid. If no condition evaluates to true, the last subgrid will be rendered.

The Sidebar Tabs component is basically a Tabs component whose Tabs Kind is "Sidebar".

Sidebar Tabs

Invisible Tabs

The Invisible Tabs component is basically a Tabs component whose Tabs Kind is "Invisible", meaning the tabs labels are not visible by the user.

Invisible Tabs

Buttons

Button

The component triggers a runnable when clicked.

Button API

Submit

The submit form component allows you to create a submit form linked to a runnable. It has a submit button that triggers a runnable when clicked.

The modal form component allows you to create a form linked to a script or flow. It is a Submit form component but with a dedicated modal opened when triggered. It has a submit button that triggers a runnable when clicked. The form is displayed in a modal, which can be opened by clicking on a button.

Form Modal Button Form Modal API

Download Button

The download button component allows you to download a file.

Inputs

Form

The Form component allows you to create a form and get answers from the user.

Form

Text Input

The text input component allows you to get a string from the user.

Text Input API

Textarea

The textarea component allows you to get a string from the user, with an expandable text area.

Textarea API

Rich Text Editor

The Rich Text Editor component allows to have to user enter text with a layout, on top of files or videos.

Rich Text Editor API

Password

The password input component allows you to get a password from the user.

Password Input API

Email Input

The email input component allows you to get an email from the user.

Email Input API

Number

The number input component allows you to get a number from the user.

Number Input API

Currency

The currency input component allows you to get a written amount of money in a set currency from the user.

Currency Input API

Slider

The slider component allows you to get a number from the user.

Slider API

Range

The slider component allows you to get a range of numbers from the user.

Range API

Date

The date input component allows you to get a date from the user.

Date Input API

Time

The Time Input component allows the user to fill in a time.

Time Input

Date & Time

The Date & Time Input component allows the user to fill in a date and time.

Date & Time Input

File Input

The file input allows users to drop files into the app.

File Input API

Toggle

The toggle component allows you to get a boolean from the user.

Toggle API

Select

The select component allows you to get a string from the user.

Select API

Resource Select

The Resource Select component allows you to have users pick resources from your Windmill workspace to interact with integrations.

Resource Select

MultiSelect

The multiselect component allows you to get multiple strings from the user.

Multiselect API

Select Tab

The Select Tab is standalone tab component that behaves like a select component. It is meant to have the chosen tab to be chosen as input by components or runnables.

Select Tab

Select Step

The Select Step is standalone tab component that behaves like a select component. It is meant to have the chosen tab to be chosen as input by components or runnables.

Select Step

Tables

TanStack Table (Depreciated)

The table component allows you to display a table.

Depreciated

integrationsand will be removed in the future. Please use the AgGrid Table or Database Studio components instead.

Table API

AgGrid Table

The AgGrid table component allows you to display an Ag Grid table.

Database Studio

This component allows you to create a database studio. The database studio is a web-based database management tool. It allows you to display and edit the content of a database. It uses Ag Grid to display the table.

Database Studio