# rayanfer32/svg-tracer-app architecture

> Architecture diagram of the GitHub repository rayanfer32/svg-tracer-app, 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/rayanfer32/svg-tracer-app
- Repository: https://github.com/rayanfer32/svg-tracer-app
- Video tour (about a minute): https://gitdiagram.com/rayanfer32/svg-tracer-app/video

## Overview

SVG Tracer & Animator is a browser-based image-to-vector and SVG animation editor. Users load a raster image for VTracer conversion or open an SVG, adjust tracing, animation, styling, and reference-overlay settings, preview playback, then export SVG or record WebM. The graph preserves these documented capabilities; source excerpts substantiate the app shell, shared state, animation rendering/recording, and some file loading. Tracing internals and several UI interactions are unsampled, so their exact call wiring is left unspecified.

Main entry points: [`src/pages/SvgAnimator.tsx`](https://github.com/rayanfer32/svg-tracer-app/blob/main/src/pages/SvgAnimator.tsx) (SVG animator), [`src/store/useTracerStore.ts`](https://github.com/rayanfer32/svg-tracer-app/blob/main/src/store/useTracerStore.ts) (Tracer state), [`src/pages/ImageTracer.tsx`](https://github.com/rayanfer32/svg-tracer-app/blob/main/src/pages/ImageTracer.tsx) (Image tracer page), [`src/components/AnimationControls.tsx`](https://github.com/rayanfer32/svg-tracer-app/blob/main/src/components/AnimationControls.tsx) (Animation controls)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App entry"]
  node_server["Bun web server<br/>[index.ts]"]
  node_app["React app shell<br/>[App.tsx]"]
end

subgraph group_tracing["Tracing workflow"]
  node_tracepage["Image tracer page<br/>[ImageTracer.tsx]"]
  node_traceui["Tracing controls<br/>[ImageTracer.tsx]"]
  node_engine["VTracer WASM"]
  node_wasmbootstrap["WASM bootstrap<br/>[bootstrap.js]"]
end

subgraph group_animation["Animation workspace"]
  node_animator["SVG animator<br/>[SvgAnimator.tsx]"]
  node_sidebar["Editor sidebar<br/>[Sidebar.tsx]"]
  node_controls["Animation controls"]
  node_playback["Playback controls"]
  node_animationopts["Animation settings"]
  node_overlays["Reference overlays<br/>[SvgAnimator.tsx]"]
  node_svgexport["SVG export"]
  node_webm["WebM recording<br/>[SvgAnimator.tsx]"]
end

subgraph group_shared["Shared state"]
  node_store["Tracer state<br/>[useTracerStore.ts]"]
  node_types["Configuration types<br/>[index.ts]"]
  node_constants["Animation defaults<br/>[constants.ts]"]
end

node_user(("Editor user"))
node_visitor(("Browser visitor"))

node_user -->|"opens app"| node_server
node_server -->|"serves interface"| node_app
node_app -->|"renders workspace"| node_animator
node_animator -->|"renders controls"| node_sidebar
node_sidebar -->|"renders settings"| node_controls
node_controls -->|"updates state"| node_store
node_animator -->|"reads playback state"| node_store
node_animator -->|"renders playback"| node_playback
node_animator -->|"reads config"| node_animationopts
node_animator -->|"renders overlay"| node_overlays
node_controls -->|"invokes export"| node_svgexport
node_animator -->|"records frames"| node_webm
node_webm -->|"downloads video"| node_user
node_svgexport -->|"downloads SVG"| node_user
node_visitor -->|"loads image"| node_tracepage
node_tracepage -->|"renders tracing UI"| node_traceui
node_tracepage -->|"updates trace state"| node_store
node_tracepage -.->|"loads engine"| node_wasmbootstrap
node_wasmbootstrap -.->|"initializes WASM"| node_engine
node_tracepage -->|"applies traced SVG"| node_store
node_store -->|"supplies SVG state"| node_animator
node_store -->|"uses config types"| node_types
node_store -->|"loads defaults"| node_constants

click node_server "https://github.com/rayanfer32/svg-tracer-app/blob/main/src/index.ts"
click node_app "https://github.com/rayanfer32/svg-tracer-app/blob/main/src/App.tsx"
click node_animator "https://github.com/rayanfer32/svg-tracer-app/blob/main/src/pages/SvgAnimator.tsx"
click node_sidebar "https://github.com/rayanfer32/svg-tracer-app/blob/main/src/components/Sidebar.tsx"
click node_controls "https://github.com/rayanfer32/svg-tracer-app/blob/main/src/components/AnimationControls.tsx"
click node_playback "https://github.com/rayanfer32/svg-tracer-app/blob/main/src/components/PlaybackControls.tsx"
click node_animationopts "https://github.com/rayanfer32/svg-tracer-app/blob/main/src/components/AnimationControls.tsx"
click node_overlays "https://github.com/rayanfer32/svg-tracer-app/blob/main/src/pages/SvgAnimator.tsx"
click node_svgexport "https://github.com/rayanfer32/svg-tracer-app/blob/main/src/components/AnimationControls.tsx"
click node_webm "https://github.com/rayanfer32/svg-tracer-app/blob/main/src/pages/SvgAnimator.tsx"
click node_tracepage "https://github.com/rayanfer32/svg-tracer-app/blob/main/src/pages/ImageTracer.tsx"
click node_traceui "https://github.com/rayanfer32/svg-tracer-app/blob/main/src/pages/ImageTracer.tsx"
click node_engine "https://github.com/rayanfer32/svg-tracer-app/blob/main/public/589cb57662b50620abca.module.wasm"
click node_wasmbootstrap "https://github.com/rayanfer32/svg-tracer-app/blob/main/src/vtracerlib/bootstrap.js"
click node_store "https://github.com/rayanfer32/svg-tracer-app/blob/main/src/store/useTracerStore.ts"
click node_types "https://github.com/rayanfer32/svg-tracer-app/blob/main/src/types/index.ts"
click node_constants "https://github.com/rayanfer32/svg-tracer-app/blob/main/src/utils/constants.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_server,node_app,node_user,node_visitor toneBlue
class node_tracepage,node_traceui,node_engine,node_wasmbootstrap toneAmber
class node_animator,node_sidebar,node_controls,node_playback,node_animationopts,node_overlays,node_svgexport,node_webm toneMint
class node_store,node_types,node_constants toneRose
```

## Components

### App entry

- [Bun web server](https://github.com/rayanfer32/svg-tracer-app/blob/main/src/index.ts): `src/index.ts`
- [React app shell](https://github.com/rayanfer32/svg-tracer-app/blob/main/src/App.tsx): `src/App.tsx`

### Tracing workflow

- [Image tracer page](https://github.com/rayanfer32/svg-tracer-app/blob/main/src/pages/ImageTracer.tsx): `src/pages/ImageTracer.tsx`
- [Tracing controls](https://github.com/rayanfer32/svg-tracer-app/blob/main/src/pages/ImageTracer.tsx): `src/pages/ImageTracer.tsx`
- [VTracer WASM](https://github.com/rayanfer32/svg-tracer-app/blob/main/public/589cb57662b50620abca.module.wasm): `public/589cb57662b50620abca.module.wasm`
- [WASM bootstrap](https://github.com/rayanfer32/svg-tracer-app/blob/main/src/vtracerlib/bootstrap.js): `src/vtracerlib/bootstrap.js`

### Animation workspace

- [SVG animator](https://github.com/rayanfer32/svg-tracer-app/blob/main/src/pages/SvgAnimator.tsx): `src/pages/SvgAnimator.tsx`
- [Editor sidebar](https://github.com/rayanfer32/svg-tracer-app/blob/main/src/components/Sidebar.tsx): `src/components/Sidebar.tsx`
- [Animation controls](https://github.com/rayanfer32/svg-tracer-app/blob/main/src/components/AnimationControls.tsx): `src/components/AnimationControls.tsx`
- [Playback controls](https://github.com/rayanfer32/svg-tracer-app/blob/main/src/components/PlaybackControls.tsx): `src/components/PlaybackControls.tsx`
- [Animation settings](https://github.com/rayanfer32/svg-tracer-app/blob/main/src/components/AnimationControls.tsx): `src/components/AnimationControls.tsx`
- [Reference overlays](https://github.com/rayanfer32/svg-tracer-app/blob/main/src/pages/SvgAnimator.tsx): `src/pages/SvgAnimator.tsx`
- [SVG export](https://github.com/rayanfer32/svg-tracer-app/blob/main/src/components/AnimationControls.tsx): `src/components/AnimationControls.tsx`
- [WebM recording](https://github.com/rayanfer32/svg-tracer-app/blob/main/src/pages/SvgAnimator.tsx): `src/pages/SvgAnimator.tsx`

### Shared state

- [Tracer state](https://github.com/rayanfer32/svg-tracer-app/blob/main/src/store/useTracerStore.ts): `src/store/useTracerStore.ts`
- [Configuration types](https://github.com/rayanfer32/svg-tracer-app/blob/main/src/types/index.ts): `src/types/index.ts`
- [Animation defaults](https://github.com/rayanfer32/svg-tracer-app/blob/main/src/utils/constants.ts): `src/utils/constants.ts`

### Other components

- **Editor user**
- **Browser visitor**

## Connections

- Editor user → Bun web server: opens app
- Bun web server → React app shell: serves interface
- React app shell → SVG animator: renders workspace
- SVG animator → Editor sidebar: renders controls
- Editor sidebar → Animation controls: renders settings
- Animation controls → Tracer state: updates state
- SVG animator → Tracer state: reads playback state
- SVG animator → Playback controls: renders playback
- SVG animator → Animation settings: reads config
- SVG animator → Reference overlays: renders overlay
- Animation controls → SVG export: invokes export
- SVG animator → WebM recording: records frames
- WebM recording → Editor user: downloads video
- SVG export → Editor user: downloads SVG
- Browser visitor → Image tracer page: loads image
- Image tracer page → Tracing controls: renders tracing UI
- Image tracer page → Tracer state: updates trace state
- Image tracer page → WASM bootstrap: loads engine
- WASM bootstrap → VTracer WASM: initializes WASM
- Image tracer page → Tracer state: applies traced SVG
- Tracer state → SVG animator: supplies SVG state
- Tracer state → Configuration types: uses config types
- Tracer state → Animation defaults: loads defaults