# fanqin314/brutalist-web-design architecture

> Architecture diagram of the GitHub repository fanqin314/brutalist-web-design, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/fanqin314/brutalist-web-design
- Repository: https://github.com/fanqin314/brutalist-web-design

## Overview

BRUTALIST GEN is a browser-based visual configurator for generating and exporting customizable brutalist UI components. The principal workflow is user adjustments and mode selection → shared configuration and presets → component HTML/CSS generation → live preview and copyable code, with export/import and share-link actions handled by the application runtime. The README documents all 15 component modes, five-state previews, full-page preview, and workspace controls. Some subsystem wiring is documented rather than shown in the sampled excerpts, so uncertain links are omitted.

Main entry points: [`js/render.js`](https://github.com/fanqin314/brutalist-web-design/blob/main/js/render.js) (Render Dispatcher), [`js/app.js`](https://github.com/fanqin314/brutalist-web-design/blob/main/js/app.js) (Application Runtime), [`js/components/page.js`](https://github.com/fanqin314/brutalist-web-design/blob/main/js/components/page.js) (Full Page Mode), [`js/interact.js`](https://github.com/fanqin314/brutalist-web-design/blob/main/js/interact.js) (Generated Interactions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workspace["Editor Workspace"]
  node_page["Editor Interface<br/>[index.html]"]
  node_workbench["Workspace Styling<br/>[base.css]"]
  node_runtime["Application Runtime<br/>[app.js]"]
end

subgraph group_config["Configuration"]
  node_presets["Presets And Palette<br/>[data.js]"]
  node_shared["Shared Registry<br/>[core.js]"]
end

subgraph group_generation["Generation"]
  node_renderer["Render Dispatcher<br/>[render.js]"]
  node_buttons["Button And Card<br/>[button.js]"]
  node_card["Card Renderer<br/>[card.js]"]
  node_input["Input Renderer<br/>[input.js]"]
  node_switch["Switch Renderer<br/>[switch.js]"]
  node_select["Select Renderer<br/>[select.js]"]
  node_other_components["Other Component Modes"]
  node_page_mode["Full Page Mode<br/>[page.js]"]
end

subgraph group_delivery["Preview And Export"]
  node_interactions["Generated Interactions<br/>[interact.js]"]
  node_live_preview["Live Component Preview<br/>[index.html]"]
  node_code_panel["Generated Code Panel<br/>[index.html]"]
  node_full_preview["Full Page Preview<br/>[app.js]"]
  node_exported["Standalone HTML Output<br/>[app.js]"]
  node_share["Share Link And JSON<br/>[app.js]"]
end

node_user(("Configurator User"))

node_user -->|"edits settings"| node_page
node_page -->|"dispatches events"| node_runtime
node_runtime -->|"uses presets"| node_presets
node_runtime -->|"requests rendering"| node_renderer
node_renderer -->|"derives configuration"| node_shared
node_renderer -->|"dispatches mode"| node_buttons
node_renderer -->|"dispatches mode"| node_card
node_renderer -->|"dispatches mode"| node_input
node_renderer -->|"dispatches mode"| node_switch
node_renderer -->|"dispatches mode"| node_select
node_renderer -->|"dispatches mode"| node_other_components
node_renderer -->|"dispatches mode"| node_page_mode
node_page_mode -->|"builds page with"| node_buttons
node_page_mode -->|"builds page with"| node_card
node_runtime -->|"updates preview"| node_live_preview
node_runtime -->|"updates code"| node_code_panel
node_runtime -->|"opens preview"| node_full_preview
node_runtime -->|"exports HTML"| node_exported
node_runtime -->|"imports and shares"| node_share
node_interactions -->|"handles controls"| node_live_preview
node_interactions -->|"is embedded in"| node_exported

click node_page "https://github.com/fanqin314/brutalist-web-design/blob/main/index.html"
click node_workbench "https://github.com/fanqin314/brutalist-web-design/blob/main/css/base.css"
click node_runtime "https://github.com/fanqin314/brutalist-web-design/blob/main/js/app.js"
click node_presets "https://github.com/fanqin314/brutalist-web-design/blob/main/js/data.js"
click node_shared "https://github.com/fanqin314/brutalist-web-design/blob/main/js/core.js"
click node_renderer "https://github.com/fanqin314/brutalist-web-design/blob/main/js/render.js"
click node_buttons "https://github.com/fanqin314/brutalist-web-design/blob/main/js/components/button.js"
click node_card "https://github.com/fanqin314/brutalist-web-design/blob/main/js/components/card.js"
click node_input "https://github.com/fanqin314/brutalist-web-design/blob/main/js/components/input.js"
click node_switch "https://github.com/fanqin314/brutalist-web-design/blob/main/js/components/switch.js"
click node_select "https://github.com/fanqin314/brutalist-web-design/blob/main/js/components/select.js"
click node_other_components "https://github.com/fanqin314/brutalist-web-design/tree/main/js/components"
click node_page_mode "https://github.com/fanqin314/brutalist-web-design/blob/main/js/components/page.js"
click node_interactions "https://github.com/fanqin314/brutalist-web-design/blob/main/js/interact.js"
click node_live_preview "https://github.com/fanqin314/brutalist-web-design/blob/main/index.html"
click node_code_panel "https://github.com/fanqin314/brutalist-web-design/blob/main/index.html"
click node_full_preview "https://github.com/fanqin314/brutalist-web-design/blob/main/js/app.js"
click node_exported "https://github.com/fanqin314/brutalist-web-design/blob/main/js/app.js"
click node_share "https://github.com/fanqin314/brutalist-web-design/blob/main/js/app.js"

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_page,node_workbench,node_runtime,node_user toneBlue
class node_presets,node_shared toneAmber
class node_renderer,node_buttons,node_card,node_input,node_switch,node_select,node_other_components,node_page_mode toneMint
class node_interactions,node_live_preview,node_code_panel,node_full_preview,node_exported,node_share toneRose
```

## Components

### Editor Workspace

- [Editor Interface](https://github.com/fanqin314/brutalist-web-design/blob/main/index.html): `index.html`
- [Workspace Styling](https://github.com/fanqin314/brutalist-web-design/blob/main/css/base.css): `css/base.css`
- [Application Runtime](https://github.com/fanqin314/brutalist-web-design/blob/main/js/app.js): `js/app.js`

### Configuration

- [Presets And Palette](https://github.com/fanqin314/brutalist-web-design/blob/main/js/data.js): `js/data.js`
- [Shared Registry](https://github.com/fanqin314/brutalist-web-design/blob/main/js/core.js): `js/core.js`

### Generation

- [Render Dispatcher](https://github.com/fanqin314/brutalist-web-design/blob/main/js/render.js): `js/render.js`
- [Button And Card](https://github.com/fanqin314/brutalist-web-design/blob/main/js/components/button.js): `js/components/button.js`
- [Card Renderer](https://github.com/fanqin314/brutalist-web-design/blob/main/js/components/card.js): `js/components/card.js`
- [Input Renderer](https://github.com/fanqin314/brutalist-web-design/blob/main/js/components/input.js): `js/components/input.js`
- [Switch Renderer](https://github.com/fanqin314/brutalist-web-design/blob/main/js/components/switch.js): `js/components/switch.js`
- [Select Renderer](https://github.com/fanqin314/brutalist-web-design/blob/main/js/components/select.js): `js/components/select.js`
- [Other Component Modes](https://github.com/fanqin314/brutalist-web-design/tree/main/js/components): `js/components`
- [Full Page Mode](https://github.com/fanqin314/brutalist-web-design/blob/main/js/components/page.js): `js/components/page.js`

### Preview And Export

- [Generated Interactions](https://github.com/fanqin314/brutalist-web-design/blob/main/js/interact.js): `js/interact.js`
- [Live Component Preview](https://github.com/fanqin314/brutalist-web-design/blob/main/index.html): `index.html`
- [Generated Code Panel](https://github.com/fanqin314/brutalist-web-design/blob/main/index.html): `index.html`
- [Full Page Preview](https://github.com/fanqin314/brutalist-web-design/blob/main/js/app.js): `js/app.js`
- [Standalone HTML Output](https://github.com/fanqin314/brutalist-web-design/blob/main/js/app.js): `js/app.js`
- [Share Link And JSON](https://github.com/fanqin314/brutalist-web-design/blob/main/js/app.js): `js/app.js`

### Other components

- **Configurator User**

## Connections

- Configurator User → Editor Interface: edits settings
- Editor Interface → Application Runtime: dispatches events
- Application Runtime → Presets And Palette: uses presets
- Application Runtime → Render Dispatcher: requests rendering
- Render Dispatcher → Shared Registry: derives configuration
- Render Dispatcher → Button And Card: dispatches mode
- Render Dispatcher → Card Renderer: dispatches mode
- Render Dispatcher → Input Renderer: dispatches mode
- Render Dispatcher → Switch Renderer: dispatches mode
- Render Dispatcher → Select Renderer: dispatches mode
- Render Dispatcher → Other Component Modes: dispatches mode
- Render Dispatcher → Full Page Mode: dispatches mode
- Full Page Mode → Button And Card: builds page with
- Full Page Mode → Card Renderer: builds page with
- Application Runtime → Live Component Preview: updates preview
- Application Runtime → Generated Code Panel: updates code
- Application Runtime → Full Page Preview: opens preview
- Application Runtime → Standalone HTML Output: exports HTML
- Application Runtime → Share Link And JSON: imports and shares
- Generated Interactions → Live Component Preview: handles controls
- Generated Interactions → Standalone HTML Output: is embedded in