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.

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