Import Custom React Components

Windmill already provides over sixty components for its users, accessible with a simple drag-and-drop. For more control and standardization with your existing stack, you might want to import your own components in React.

React & Windmill

If you're looking for a way to:

• Import whole react apps to Windmill, see React App Import.
• Integrate Windmill applications into React-based project, see Windmill React SDK.

Importing Custom React Components is a Cloud and Self-Hosted-Enterprise-Only feature

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. Embedding 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 App Editor

1. Clone the template project.
2. Install the dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser to see the live result.

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

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

7. Build the IIFE using:

npm run build

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