Windmill React App Whitelabelling

Demo can be found here.

The example uses app.windmill.dev as a backend to create an account there and use your credentials to login.

This project demonstrates how Windmill can be whitelabelled in a React app using webpack.

Whitelabelling requires a special license and the package @windmill-labs/windmill-react-sdk is not public. Please contact us at [email protected] to get started.

Getting Started

Have a windmill instance available at localhost:8000 (or change package.json/proxy) that accepts [email protected] / changeme

npm install
npm run dev

Workers

Monaco workers need to be available at the /assets/ path. This is done by calling ./copy_workers.sh which will pull them from node_modules. It is already done on this repo.

Regenerating API Docs

To update the API reference below after an SDK upgrade:

bash generate-api-docs.sh

Then paste the output into this README, replacing the API Reference section.

API Reference

Auto-generated by generate-api-docs.sh from SDK type definitions.

Components

<FlowBuilder />

Prop	Type	Required
mode	{ type: "create"; path: string } | { type: "edit"; path: string } | { type: "fork"; path: string; forkPath: string }	Yes
onDeploy	(path: string) => void	Yes
onDetails	(path: string) => void	Yes
onSaveDraft	(path: string, status: "new" | "pathChange" | undefined) => void	Yes
onDraftSaved	(path: string) => void	No
onDraftError	(error: Error) => void	No
onDeployError	(error: Error) => void	No
customUi	FlowBuilderWhitelabelCustomUi	No
disableAi	boolean	No
disableFlowInputs	boolean	No
setDraftCb	(cb: () => void) => void	No

<ScriptBuilder />

Prop	Type	Required
mode	{ type: "create"; path: string; lang: ScriptLang; summary?: string; description?: string; timeout?: number } | { type: "edit"; path: string } | { type: "fork"; path: string; forkPath: string }	Yes
onDeploy	(path: string) => void	Yes
onDetails	(path: string) => void	Yes
onSaveInitial	(path: string) => void	Yes
onSaveDraft	(path: string) => void	No
onDraftError	(error: Error) => void	No
onDeployError	(error: Error) => void	No
customUi	ScriptBuilderWhitelabelCustomUi	No
neverShowMeta	boolean	No

<ScriptEditor />

Prop	Type	Required
path	string	Yes
code	string	Yes
lang	ScriptLang	Yes
tag	string	No
onChange	(code: string, schema: string) => void	No

<SchemaEditor />

Prop	Type	Required
schema	object	Yes
onChange	(schema: object) => void	No
customUi	{ noAddPopover?: boolean }	No

<ResourceEditor />

Prop	Type	Required
newResource	boolean	Yes
resource_type	string	Yes
path	string	No
hidePath	boolean	No
onChange	(e: { path: string, args: any, description: string }) => void	Yes

<FlowViewer />

Prop	Type	Required
flow	{ summary: string; description?: string; value: FlowValue; schema?: any }	Yes

<FlowStatusViewer />

Prop	Type	Required
jobId	string	Yes
workspaceId	string	No
hideFlowResult	boolean	No
hideDownloadInGraph	boolean	No
hideNodeDefinition	boolean	No
hideTimeline	boolean	No
hideJobId	boolean	No
hideDownloadLogs	boolean	No

<FlowHistory />

Prop	Type	Required
path	string	Yes
onHistoryRestore	() => void	No

Utilities

Export	Description
switchWorkspace(workspace: string)	Switch the active workspace context
OpenAPI	OpenAPI configuration object (set OpenAPI.BASE to your Windmill API URL)
INITIAL_CODE	Default code templates per language
customIcon	Custom icon URLs ({ normal: string, white: string })

ScriptLang

type ScriptLang =
  | 'python3' | 'deno' | 'go' | 'bash' | 'powershell'
  | 'postgresql' | 'mysql' | 'bigquery' | 'snowflake' | 'mssql'
  | 'oracledb' | 'graphql' | 'nativets' | 'bun' | 'php'
  | 'rust' | 'ansible' | 'csharp' | 'nu' | 'java' | 'ruby'
  | 'duckdb' | 'bunnative';

customUi Types

These types control which UI elements are shown. All boolean fields default to true (visible). Set a field to false to hide the corresponding UI element.

FlowBuilderWhitelabelCustomUi

type FlowBuilderWhitelabelCustomUi = {
    topBar?: {
        path?: boolean;
        export?: boolean;
        history?: boolean;
        aiBuilder?: boolean;
        tutorials?: boolean;
        diff?: boolean;
        extraDeployOptions?: boolean;
        editableSummary?: boolean;
        settings?: boolean;
        draft?: boolean;
    };
    settingsPanel?: boolean;
    settingsTabs?: {
        schedule?: boolean;
        sharedDiretory?: boolean;
        earlyStop?: boolean;
        earlyReturn?: boolean;
        workerGroup?: boolean;
        concurrency?: boolean;
        debouncing?: boolean;
        cache?: boolean;
    };
    triggers?: boolean;
    flowNode?: boolean;
    hub?: boolean;
    hubCode?: boolean;
    graph?: {
        aiBuilder?: boolean;
        dataflow?: boolean;
    };
    stepInputs?: {
        ai?: boolean;
    };
    stepAdvancedSettings?: boolean;
    languages?: (SupportedLanguage | 'docker' | 'bunnative')[];
    scriptFork?: boolean;
    scriptEdit?: boolean;
    tagEdit?: boolean;
    editorBar?: EditorBarUi;
    downloadLogs?: boolean;
    tagSelectPlaceholder?: string;
    tagSelectNoLabel?: boolean;
    tagLabel?: string;
    aiAgent?: boolean;
    aiSandbox?: boolean;
};

DisplayResultUi

type DisplayResultUi = {
    disableAiFix?: boolean;
    disableDownload?: boolean;
};

PreviewPanelUi

type PreviewPanelUi = {
    disableHistory?: boolean;
    disableTracing?: boolean;
    disableTriggerCaptures?: boolean;
    disableTriggerButton?: boolean;
    displayResult?: DisplayResultUi;
    disableVariablePicker?: boolean;
    disableDownload?: boolean;
    tagLabel?: string;
};

EditorBarUi

type EditorBarUi = {
    contextVar?: boolean;
    variable?: boolean;
    resource?: boolean;
    reset?: boolean;
    type?: boolean;
    assistants?: boolean;
    multiplayer?: boolean;
    autoformatting?: boolean;
    editorSettings?: boolean;
    vimMode?: boolean;
    relativeLineNumbers?: boolean;
    aiGen?: boolean;
    aiCompletion?: boolean;
    library?: boolean;
    useVsCode?: boolean;
    diffMode?: boolean;
    s3object?: boolean;
    database?: boolean;
    ducklake?: boolean;
    dataTable?: boolean;
    debug?: boolean;
    history?: boolean;
    saveToWorkspace?: boolean;
};

EditableSchemaFormUi

type EditableSchemaFormUi = {
    jsonOnly?: boolean;
    disableVariablePicker?: boolean;
};

SettingsPanelMetadataUi

type SettingsPanelMetadataUi = {
    languages?: SupportedLanguage[];
    disableScriptKind?: boolean;
    editableSchemaForm?: EditableSchemaFormUi;
    disableMute?: boolean;
    disableAiFilling?: boolean;
};

SettingsPanelUi

type SettingsPanelUi = {
    metadata?: SettingsPanelMetadataUi;
    disableMetadata?: boolean;
    disableRuntime?: boolean;
    disableGeneratedUi?: boolean;
    disableTriggers?: boolean;
};

ScriptEditorWhitelabelCustomUi

type ScriptEditorWhitelabelCustomUi = {
    editorBar?: EditorBarUi;
    previewPanel?: PreviewPanelUi;
    disableTooltips?: boolean;
};

ScriptBuilderWhitelabelCustomUi

type ScriptBuilderWhitelabelCustomUi = {
    topBar?: {
        path?: boolean;
        editablePath?: boolean;
        settings?: boolean;
        extraDeployOptions?: boolean;
        editableSummary?: boolean;
        diff?: boolean;
        tagEdit?: boolean;
    };
    settingsPanel?: SettingsPanelUi;
    disableTooltips?: boolean;
    editorBar?: EditorBarUi;
    previewPanel?: PreviewPanelUi;
    tagSelectPlaceholder?: string;
};