# windmill-labs/windmill-whitelabelling-react-webpack architecture

> Architecture diagram of the GitHub repository windmill-labs/windmill-whitelabelling-react-webpack, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/windmill-labs/windmill-whitelabelling-react-webpack
- Repository: https://github.com/windmill-labs/windmill-whitelabelling-react-webpack

## Overview

This repository is a React whitelabel demo for Windmill’s private React SDK, rather than the SDK implementation itself. A user logs in, selects a workspace and component, then works in a builder or editor; the host app loads paths and reflects component callbacks. The README also documents viewer, status, and history components not visible in the sampled app wiring, so they are represented as SDK capabilities without asserting internal call paths. Source evidence is limited to the supplied tree and excerpts.

Main entry points: [`src/App.js`](https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/blob/main/src/App.js) (Demo app), [`src/index.js`](https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/blob/main/src/index.js) (React entry), [`functions/[[path]].ts`](https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/blob/main/functions/%5B%5Bpath%5D%5D.ts) (API proxy worker), [`src/ScriptEditor.js`](https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/blob/main/src/ScriptEditor.js) (Script editor)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_host["Host app"]
  node_entry["React entry<br/>[index.js]"]
  node_app["Demo app<br/>[App.js]"]
end

subgraph group_authoring["Authoring components"]
  node_flow["Flow builder<br/>[App.js]"]
  node_script["Script builder<br/>[App.js]"]
  node_scripteditor["Script editor<br/>[ScriptEditor.js]"]
  node_schema["Schema editor<br/>[SchemaEditor.js]"]
  node_resource["Resource editor<br/>[ResourceEditor.js]"]
  node_appeditor["App editor"]
end

subgraph group_inspection["Viewing components"]
  node_flowviewer["Flow viewer"]
  node_flowstatus["Flow status"]
  node_history["Flow history"]
end

subgraph group_integration["Backend integration"]
  node_backend{{"Windmill service"}}
  node_apiworker["API proxy worker<br/>[&#91;&#91;path&#93;&#93;.ts]"]
end

node_user(("User"))

node_user -->|"uses"| node_app
node_entry -->|"renders"| node_app
node_app -->|"authenticates; lists paths"| node_backend
node_app -->|"mounts"| node_flow
node_app -->|"mounts"| node_script
node_app -->|"mounts"| node_scripteditor
node_app -->|"mounts"| node_schema
node_app -->|"mounts"| node_resource
node_app -.->|"offers selection"| node_appeditor
node_app -.->|"SDK capability"| node_flowviewer
node_app -.->|"SDK capability"| node_flowstatus
node_app -.->|"SDK capability"| node_history
node_app -.->|"SDK operations"| node_backend
node_apiworker -->|"proxies JSON"| node_backend

click node_entry "https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/blob/main/src/index.js"
click node_app "https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/blob/main/src/App.js"
click node_flow "https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/blob/main/src/App.js"
click node_script "https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/blob/main/src/App.js"
click node_scripteditor "https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/blob/main/src/ScriptEditor.js"
click node_schema "https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/blob/main/src/SchemaEditor.js"
click node_resource "https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/blob/main/src/ResourceEditor.js"
click node_appeditor "https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/tree/main/src"
click node_flowviewer "https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/tree/main/src"
click node_flowstatus "https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/tree/main/src"
click node_history "https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/tree/main/src"
click node_apiworker "https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/blob/main/functions/%5B%5Bpath%5D%5D.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_entry,node_app,node_user toneBlue
class node_flow,node_script,node_scripteditor,node_schema,node_resource,node_appeditor toneAmber
class node_flowviewer,node_flowstatus,node_history toneMint
class node_backend,node_apiworker toneRose
```

## Components

### Host app

- [React entry](https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/blob/main/src/index.js): `src/index.js`
- [Demo app](https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/blob/main/src/App.js): `src/App.js`

### Authoring components

- [Flow builder](https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/blob/main/src/App.js): `src/App.js`
- [Script builder](https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/blob/main/src/App.js): `src/App.js`
- [Script editor](https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/blob/main/src/ScriptEditor.js): `src/ScriptEditor.js`
- [Schema editor](https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/blob/main/src/SchemaEditor.js): `src/SchemaEditor.js`
- [Resource editor](https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/blob/main/src/ResourceEditor.js): `src/ResourceEditor.js`
- [App editor](https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/tree/main/src): `src`

### Viewing components

- [Flow viewer](https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/tree/main/src): `src`
- [Flow status](https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/tree/main/src): `src`
- [Flow history](https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/tree/main/src): `src`

### Backend integration

- **Windmill service**
- [API proxy worker](https://github.com/windmill-labs/windmill-whitelabelling-react-webpack/blob/main/functions/%5B%5Bpath%5D%5D.ts): `functions/[[path]].ts`

### Other components

- **User**

## Connections

- User → Demo app: uses
- React entry → Demo app: renders
- Demo app → Windmill service: authenticates; lists paths
- Demo app → Flow builder: mounts
- Demo app → Script builder: mounts
- Demo app → Script editor: mounts
- Demo app → Schema editor: mounts
- Demo app → Resource editor: mounts
- Demo app → App editor: offers selection
- Demo app → Flow viewer: SDK capability
- Demo app → Flow status: SDK capability
- Demo app → Flow history: SDK capability
- Demo app → Windmill service: SDK operations
- API proxy worker → Windmill service: proxies JSON