# saketdesign/loader-builder architecture

> Architecture diagram of the GitHub repository saketdesign/loader-builder, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-07-31). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/saketdesign/loader-builder
- Repository: https://github.com/saketdesign/loader-builder

## Overview

#### Purpose and runtime
Loader Builder is a client-side React/TypeScript visual editor for configurable animated grid loaders. It runs as a Vite single-page application in the browser, with Node.js 18+ used for development/build tooling. Browser APIs support canvas interaction and WebM export; no backend, database, or external API is indicated.

Entry bootstrap: `src/main.tsx` mounts the application, and `src/App.tsx` composes the editor.

#### Application shell and composition
`src/App.tsx` is the top-level feature coordinator. `src/components/MainLayout.tsx` establishes the editor’s primary regions: controls/settings alongside the visual workspace. Shared application styling is rooted in `src/index.css` and `src/App.css`.

The UI is organized around a single editing session rather than routes or server-driven pages.

#### Central state and domain model
`src/store.ts` is the central state boundary for loader configuration and editor interaction state. `src/types.ts` defines the domain contracts shared among controls, renderer, and exporters.

Defaults and reusable animation/pattern definitions are isolated from UI:
- `src/utils/defaults.ts`
- `src/utils/patterns.ts`

Changes initiated by UI controls update the store; rendering and export consume the same configuration, keeping preview and generated artifacts aligned.

#### Editor controls and settings flow
`src/components/TopControls.tsx` provides top-level actions, likely including export-oriented commands and workspace controls. `src/components/SettingsPanel.tsx` exposes loader parameters such as colors, density, shape, and animation style.

These components are input boundaries: they translate user interaction into configuration updates rather than directly rendering grid cells:
- `src/components/TopControls.tsx`
- `src/components/SettingsPanel.tsx`
- `src/store.ts`

#### Canvas workspace and loader rendering
`src/components/CanvasWorkspace.tsx` owns the interactive visual surface, including drag/pan/zoom behavior described by the product. It hosts or coordinates `src/components/GridRenderer.tsx`, which materializes the configured grid and animation state into the preview.

`src/components/LoaderCard.tsx` is a reusable loader presentation unit, separating individual loader visual composition from workspace layout. This rendering layer consumes state/types and pattern definitions, making it the critical preview boundary.

#### Export pipelines
Exports are client-side transformations of the current loader configuration:
- `src/utils/exportCode.ts` generates a ready-to-use React functional component.
- `src/utils/exportVideo.ts` records the rendered loader into a WebM video.

The export boundary should remain deterministic relative to `src/store.ts` and `src/types.ts`: user-visible preview settings must map directly to generated code or recorded frames. Video export depends on browser media/canvas recording capabilities.

#### Motion and visual primitives
Reusable animated interaction/presentation primitives live under `src/components/motion-primitives/`, notably dialog, accordion, transition, text, cursor, and scroll-lock behavior. They support polished UI behavior but are separate from loader-domain animation:
- `src/components/motion-primitives/dialog.tsx`
- `src/components/motion-primitives/transition-panel.tsx`
- `src/components/motion-primitives/usePreventScroll.tsx`

Tailwind/PostCSS configuration exists, while component-specific CSS remains in the application stylesheets.

Main entry points: [`src/store.ts`](https://github.com/saketdesign/loader-builder/blob/master/src/store.ts) (Editor Store), [`src/components/MainLayout.tsx`](https://github.com/saketdesign/loader-builder/blob/master/src/components/MainLayout.tsx) (Main Layout), [`src/components/TopControls.tsx`](https://github.com/saketdesign/loader-builder/blob/master/src/components/TopControls.tsx) (Top Controls), [`src/components/GridRenderer.tsx`](https://github.com/saketdesign/loader-builder/blob/master/src/components/GridRenderer.tsx) (Grid Renderer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application Shell"]
  node_main(("Browser Bootstrap<br/>Vite entry<br/>[main.tsx]"))
  node_app["App Coordinator<br/>React root<br/>[App.tsx]"]
  node_layout["Main Layout<br/>editor shell<br/>[MainLayout.tsx]"]
  node_motion_primitives["Motion Primitives<br/>shared UI motion<br/>[dialog.tsx]"]
end

subgraph group_editor["Editor"]
  node_top_controls["Top Controls<br/>action controls<br/>[TopControls.tsx]"]
  node_settings["Settings Panel<br/>configuration controls<br/>[SettingsPanel.tsx]"]
  node_workspace["Canvas Workspace<br/>interactive canvas"]
  node_grid_renderer["Grid Renderer<br/>preview renderer<br/>[GridRenderer.tsx]"]
  node_loader_card["Loader Card<br/>loader visual<br/>[LoaderCard.tsx]"]
end

subgraph group_domain["State &amp; Domain"]
  node_store[("Editor Store<br/>central state<br/>[store.ts]")]
  node_types["Domain Contracts<br/>TypeScript types<br/>[types.ts]"]
  node_defaults_patterns["Defaults &amp; Patterns<br/>domain definitions<br/>[defaults.ts]"]
end

subgraph group_export["Exports"]
  node_code_export["React Code Export<br/>code generator<br/>[exportCode.ts]"]
  node_video_export["WebM Video Export<br/>browser recorder<br/>[exportVideo.ts]"]
end

node_main -->|"mounts"| node_app
node_app -->|"composes"| node_layout
node_layout -->|"hosts"| node_top_controls
node_layout -->|"hosts"| node_settings
node_layout -->|"hosts"| node_workspace
node_top_controls -->|"dispatches actions"| node_store
node_settings -->|"updates configuration"| node_store
node_workspace -->|"reads interaction state"| node_store
node_workspace -->|"coordinates"| node_grid_renderer
node_grid_renderer -->|"renders"| node_loader_card
node_grid_renderer -->|"reads configuration"| node_store
node_loader_card -->|"uses contracts"| node_types
node_loader_card -->|"uses patterns"| node_defaults_patterns
node_store -->|"implements"| node_types
node_store -->|"initializes from"| node_defaults_patterns
node_top_controls -->|"triggers"| node_code_export
node_top_controls -->|"triggers"| node_video_export
node_code_export -->|"reads current configuration"| node_store
node_video_export -->|"records current configuration"| node_store
node_code_export -->|"uses contracts"| node_types
node_video_export -->|"captures rendered frames"| node_grid_renderer
node_layout -.->|"uses polished UI behavior"| node_motion_primitives

click node_main "https://github.com/saketdesign/loader-builder/blob/master/src/main.tsx"
click node_app "https://github.com/saketdesign/loader-builder/blob/master/src/App.tsx"
click node_layout "https://github.com/saketdesign/loader-builder/blob/master/src/components/MainLayout.tsx"
click node_top_controls "https://github.com/saketdesign/loader-builder/blob/master/src/components/TopControls.tsx"
click node_settings "https://github.com/saketdesign/loader-builder/blob/master/src/components/SettingsPanel.tsx"
click node_workspace "https://github.com/saketdesign/loader-builder/blob/master/src/components/CanvasWorkspace.tsx"
click node_grid_renderer "https://github.com/saketdesign/loader-builder/blob/master/src/components/GridRenderer.tsx"
click node_loader_card "https://github.com/saketdesign/loader-builder/blob/master/src/components/LoaderCard.tsx"
click node_store "https://github.com/saketdesign/loader-builder/blob/master/src/store.ts"
click node_types "https://github.com/saketdesign/loader-builder/blob/master/src/types.ts"
click node_defaults_patterns "https://github.com/saketdesign/loader-builder/blob/master/src/utils/defaults.ts"
click node_code_export "https://github.com/saketdesign/loader-builder/blob/master/src/utils/exportCode.ts"
click node_video_export "https://github.com/saketdesign/loader-builder/blob/master/src/utils/exportVideo.ts"
click node_motion_primitives "https://github.com/saketdesign/loader-builder/blob/master/src/components/motion-primitives/dialog.tsx"

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_main,node_app,node_layout,node_motion_primitives toneBlue
class node_top_controls,node_settings,node_workspace,node_grid_renderer,node_loader_card toneAmber
class node_store,node_types,node_defaults_patterns toneMint
class node_code_export,node_video_export toneRose
```

## Components

### Application Shell

- [Browser Bootstrap](https://github.com/saketdesign/loader-builder/blob/master/src/main.tsx): Vite entry · Mounts the React single-page application. · `src/main.tsx`
- [App Coordinator](https://github.com/saketdesign/loader-builder/blob/master/src/App.tsx): React root · Composes the single editing session. · `src/App.tsx`
- [Main Layout](https://github.com/saketdesign/loader-builder/blob/master/src/components/MainLayout.tsx): editor shell · Places controls beside the visual workspace. · `src/components/MainLayout.tsx`
- [Motion Primitives](https://github.com/saketdesign/loader-builder/blob/master/src/components/motion-primitives/dialog.tsx): shared UI motion · Dialogs, transitions, and scroll-lock behavior. · `src/components/motion-primitives/dialog.tsx`

### Editor

- [Top Controls](https://github.com/saketdesign/loader-builder/blob/master/src/components/TopControls.tsx): action controls · Provides workspace and export actions. · `src/components/TopControls.tsx`
- [Settings Panel](https://github.com/saketdesign/loader-builder/blob/master/src/components/SettingsPanel.tsx): configuration controls · Edits loader parameters. · `src/components/SettingsPanel.tsx`
- [Canvas Workspace](https://github.com/saketdesign/loader-builder/blob/master/src/components/CanvasWorkspace.tsx): interactive canvas · Owns pan, zoom, and drag interaction. · `src/components/CanvasWorkspace.tsx`
- [Grid Renderer](https://github.com/saketdesign/loader-builder/blob/master/src/components/GridRenderer.tsx): preview renderer · Materializes the configured animated grid. · `src/components/GridRenderer.tsx`
- [Loader Card](https://github.com/saketdesign/loader-builder/blob/master/src/components/LoaderCard.tsx): loader visual · Reusable loader presentation unit. · `src/components/LoaderCard.tsx`

### State & Domain

- [Editor Store](https://github.com/saketdesign/loader-builder/blob/master/src/store.ts): central state · Holds loader configuration and interaction state. · `src/store.ts`
- [Domain Contracts](https://github.com/saketdesign/loader-builder/blob/master/src/types.ts): TypeScript types · Shared configuration contracts. · `src/types.ts`
- [Defaults & Patterns](https://github.com/saketdesign/loader-builder/blob/master/src/utils/defaults.ts): domain definitions · Provides initial configuration and reusable animation patterns. · `src/utils/defaults.ts`

### Exports

- [React Code Export](https://github.com/saketdesign/loader-builder/blob/master/src/utils/exportCode.ts): code generator · Generates a ready-to-use React component. · `src/utils/exportCode.ts`
- [WebM Video Export](https://github.com/saketdesign/loader-builder/blob/master/src/utils/exportVideo.ts): browser recorder · Records rendered loader frames through browser media APIs. · `src/utils/exportVideo.ts`

## Connections

- Browser Bootstrap → App Coordinator: mounts
- App Coordinator → Main Layout: composes
- Main Layout → Top Controls: hosts
- Main Layout → Settings Panel: hosts
- Main Layout → Canvas Workspace: hosts
- Top Controls → Editor Store: dispatches actions
- Settings Panel → Editor Store: updates configuration
- Canvas Workspace → Editor Store: reads interaction state
- Canvas Workspace → Grid Renderer: coordinates
- Grid Renderer → Loader Card: renders
- Grid Renderer → Editor Store: reads configuration
- Loader Card → Domain Contracts: uses contracts
- Loader Card → Defaults & Patterns: uses patterns
- Editor Store → Domain Contracts: implements
- Editor Store → Defaults & Patterns: initializes from
- Top Controls → React Code Export: triggers
- Top Controls → WebM Video Export: triggers
- React Code Export → Editor Store: reads current configuration
- WebM Video Export → Editor Store: records current configuration
- React Code Export → Domain Contracts: uses contracts
- WebM Video Export → Grid Renderer: captures rendered frames
- Main Layout → Motion Primitives: uses polished UI behavior