# White labeling Windmill

> How do I embed Windmill editors and apps into my own product with white labeling?

Windmill provides a library to embed the entire Windmill app or specific components - such as the [Flow editor](../../flows/1_flow_editor.mdx) or the [low-code app editor](../../apps/0_app_editor/index.mdx) (legacy) - with a simplified UI into your own application or website. This enables you to provide Windmill's services to your clients while maintaining your brand's identity.

Windmill offers an SDK compatible with any framework, simplifying its integration across various platforms. It can be built in collaboration with us using React/Svelte and our full SDK.

In particular, for React, the [React SDK](#react-sdk) below contains all components from the Windmill frontend. The App Viewer and Flow Builder are already available, and we maintain a [webpack example repository](https://github.com/windmill-labs/windmill-whitelabelling-react-webpack) showing how to embed them.
Check our [demo](https://windmill-sdk-example.com/) of using the Windmill SDK backed by app.windmill.dev to white label Windmill's Flow Builder and App Viewer in a React app using the default create-react-app template.

Also, [Private Hub](../../core_concepts/32_private_hub/index.mdx) is available for white labeling. It allows you to have your own platform and approval process for scripts, flows, apps and resource types suggested within the app.

White labeling requires a special license and the package @windmill-labs/windmill-react-sdk is not public. Please contact us at sales@windmill.dev,
on [Discord](https://discord.com/invite/V7PM2YHsPB), or schedule a [meeting](https://www.windmill.dev/book-demo) with the founder to get started.

Example of Windmill's [flow editor](../../flows/1_flow_editor.mdx) being white labeled by [Premote](https://www.premote.nl/):

![Flow editor Premote](./premote_windmill.png.webp 'Flow editor Premote')

## 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. If you're looking to build a standalone React app connected to Windmill backend runnables, see [full-code apps](../../full_code_apps/index.mdx) instead.

### Installation

Add the following to your project:

```js
'windmill-react-sdk': 'file:windmill-react-sdk-X.XXX.X.tgz'
```

:::tip Downloading the SDK

The SDK is not available on NPM. The SDK will 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`:

```js

```

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

#### Using webpack 5 (Next.js)

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

```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

```js

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

```jsx

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

Replace YOUR_WORKSPACE and YOUR_APP_PATH with the corresponding values.