Skip to main content

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

List

Divider X

Divider X

Divider Y

Divider Y

Drawer

Vertical Split Panes

Horizontal Split Panes

Stepper

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 component allows you to create a decision tree. The decision tree is controlled by a flow-like structure. Each node in the tree represents a decision point and can lead to one or more subsequent nodes based on specified conditions.

Decision Tree

Tabs

Tabs

Conditional Tabs

Sidebar Tabs

Invisible Tabs

Invisible Tabs

Buttons

Button

Button API

Submit

Form Modal Button Form Modal API

Download Button

Inputs

Form

Form

Text Input

Text Input API

Textarea

Textarea API

Rich Text Editor

Rich Text Editor API

Password

Password Input API

Email Input

Email Input API

Number

Number Input API

Currency

Currency Input API

Slider

Slider API

Range

Range API

Date

Date Input API

File Input

File Input API

Toggle

Toggle API

Select

Select API

Resource Select

Resource Select

MultiSelect

Multiselect API

Select Tab

Select Tab

Select Step

Select Step

Tables

Table

Table API

AgGrid Table


Display

Text

Text API

Icon

Icon

Image

HTML

Map

map

HTML

HTML

PDF

PDF API

Rich Result

Rich Result

Log

Log Display

Flow Status

Flow Status

Charts

Plotly

ChartJs

Vega Lite

Vega Lite API

Groups