Skip to main content

Launch Week Day 4 - Custom React Components & Apps

· 2 min read
Ruben Fiszel

React Components Thumbnail

Day 4 of our Launch Week is focused on the App Editor. The app editor is a low-code builder to create custom User Interfaces with a mix of drag-and-drop and code.

Windmill already provides over sixty components for its users. They should cover a vast majority of needs.

However, for components that are more specific you can now go even further and import your own components and apps written in React.

Once imported to Windmill, custom React components will be able to interact with the rest of the app.

There are 3 main benefits of using your own components:

  1. Reusing react components you've already written in other codebases.
  2. Controlling fully the component including theming, inputs and outputs allowing for more complex components and interactions.
  3. Embeding very complex components such as a code editor.

If that's not sufficient you can even build your own app in React.

How to import react components to the App Editor​


  1. Clone the template project.
  2. Install the dependencies:
npm install
  1. Start the development server:
npm run dev

  1. Open your browser to see the live result.

  2. Start editing the src/Component.tsx file to start building your component.

  3. Edit COMPONENT_NAME in vite.config.ts to match your component name. It will be useful later.

  4. Build the iife using:

npm run build
  1. Upload the dist/cc.iife.js to Windmill and name the component as it has been named in vite.config.ts.

Custom component example

How to import whole React apps​

See our documentation:

React App Import
Import your own React app in Windmill App Editor.

Learn more​

To learn more about the launch week, you can visit our dedicated page or subscribe via our newsletter sign up form.

For more details on React Components, see:

Import Custom React Components
Define components in React or Vanilla JS that interact with the rest of your app.
Windmill Logo
Windmill is an open-source and self-hostable serverless runtime and platform combining the power of code with the velocity of low-code. We turn your scripts into internal apps and composable steps of flows that automate repetitive workflows.

You can self-host Windmill using a docker compose up, or go with the cloud app.
Blog archive