How fanqin314/brutalist-web-design works
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: render.js Render Dispatcher · app.js Application Runtime · page.js Full Page Mode · interact.js Generated Interactions
Components 20
Editor Workspace
- Editor Interface
index.html - Workspace Styling
css/base.css - Application Runtime
js/app.js
Configuration
- Presets And Palette
js/data.js - Shared Registry
js/core.js
Generation
- Render Dispatcher
js/render.js - Button And Card
js/components/button.js - Card Renderer
js/components/card.js - Input Renderer
js/components/input.js - Switch Renderer
js/components/switch.js - Select Renderer
js/components/select.js - Other Component Modes
js/components - Full Page Mode
js/components/page.js
Preview And Export
- Generated Interactions
js/interact.js - Live Component Preview
index.html - Generated Code Panel
index.html - Full Page Preview
js/app.js - Standalone HTML Output
js/app.js - Share Link And JSON
js/app.js
Other components
- Configurator User
Connections 21
- 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