Developer Guide
This guide provides an overview of modernGraphTool's architecture for developers who want to contribute or build upon the project.
Tech Stack
- Language: TypeScript
- Framework: SvelteKit 2 + Svelte 5 (Runes)
- Styling: Tailwind CSS 4 + bits-ui (headless accessible components)
- Graph Rendering: D3.js (SVG-based)
- i18n: Paraglide JS (compile-time internationalization)
- Testing: Vitest (unit) + Playwright (E2E)
- Build Output: Static SPA via
adapter-static→dist/
Project Structure
src/
├── routes/ # SvelteKit page routes (single-page SPA)
├── lib/
│ ├── components/ # UI components
│ │ ├── atoms/ # Base UI primitives (Button, Input, Accordion)
│ │ ├── controls/ # Interactive controls (selectors, toolbar buttons)
│ │ ├── equalizer/ # Equalizer sub-components (filters, AutoEQ, player)
│ │ ├── features/ # Feature modules (DevicePEQ, Tutorial, etc.)
│ │ ├── graph/ # Graph container (Svelte bridge to D3 engine)
│ │ ├── layout/ # App shell, navigation, panels
│ │ └── panels/ # Major UI sections (Device, Graph, EQ, Misc)
│ ├── stores/ # Reactive state management (.svelte.ts)
│ ├── services/ # Data provider, command history, analytics
│ ├── graph/ # D3.js graph engine and overlays
│ ├── device-peq/ # Hardware EQ device connectors and handlers
│ ├── utils/ # Parsing, normalization, smoothing, URL encoding
│ ├── types/ # TypeScript type definitions
│ └── paraglide/ # Generated i18n functions (do not edit manually)
├── app.html # HTML template (loads config.js and theme.css)
└── app.css # Tailwind CSS entry point
defaults/ # Default config, theme, and sample data
├── config.js # User-editable configuration
├── theme.css # Graph theme variables
└── data/ # Sample measurement data and targets
cdn/ # CDN deployment templates
├── cdn-index.html # Thin index.html for CDN-hosted mode
└── loader.js # CDN bootstrap loader
scripts/ # Build utilities
├── build-cdn.js # CDN build orchestrator
└── generate-boot-manifest.js
Build Commands
| Command | Description |
|---|---|
npm run dev | Start development server (http://localhost:5173) |
npm run build | Production build to dist/ |
npm run build:cdn | Build CDN-optimized distribution to dist-cdn/ |
npm run preview | Preview the built output |
npm run check | TypeScript + Svelte type checking |
npm run test | Run all Vitest tests |
npm run lint | ESLint + Prettier check |
npm run format | Auto-format code |
Contributing
Contributions are welcome! See CONTRIBUTING.md for code style, testing, and PR guidelines.