Skip to main content

Windmill React SDK

The Windmill React SDK provides a suite of tools and components to integrate Windmill applications (scripts editor, flows editor, app editor and its deployed apps) into React-based projects.

This feature is available only for White Label Edition.

Installation

Add the following to your project:

'windmill-react-sdk': 'file:windmill-react-sdk-X.XXX.X.tgz'
Downloading the SDK

The SDK is not available on NPM. The SDK with be provided as a .tgz file.

Configuration

As Windmill is built with Svelte, you will need to add the Svelte compiler to your project.

Using Vite

Add the following to your vite.config.js:

import react from '@vitejs/plugin-react';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
plugins: [svelte(), react()]
});

An example is provided directly in the windmill-react-sdk repository.s

Using Webpack 5 (Next.js)

You need to install svelte-loader and add the following to your next.config.js:

const nextConfig = {
webpack: (config) => {
config.module.rules.push({
test: /\.(svelte)$/,
use: [
{
loader: 'svelte-loader',
options: {
emitCss: true,
hotReload: true
}
}
]
});

return config;
}
};

module.exports = nextConfig;

Usage

Authentication

import { UserService } from 'windmill-client';

UserService.login({
requestBody: { email: YOUR_EMAIL, password: YOUR_PASSWORD }
})
.then(() => {
// Handle successful login
})
.catch((error) => {
// Handle login errors
});

Replace YOUR_EMAIL and YOUR_PASSWORD with the corresponding values.

App Preview

import { AppPreview } from 'windmill-react-sdk';

function MyApp() {
return <AppPreview workspace={YOUR_WORKSPACE} appPath={YOUR_APP_PATH} />;
}

Replace YOUR_WORKSPACE and YOUR_APP_PATH with the corresponding values.