DESIGN.md Editor — Design System Manager
Create, edit, preview, validate, and share DESIGN.md design system files — the standalone editor Google's format deserves
SAby SpecZip Admin
Free seed library
v1.1.1
24 downloads0 views
File Integrity
sha256:7307305e…· 73.1 KBRecommended Stack
| Component | Role | Version | Notes |
|---|---|---|---|
| Next.js 14 | Frontend Framework & API Server | >=14.2.0 | App Router for the SPA and API routes for backend endpoints. SSR for public preview pages. File-based routing for clean URLs (/editor/[id], /preview/[uuid]). |
| TypeScript | Language | >=5.4.0 | Strict typing for complex state management (editor state, token parsing, validation results). Prevents bugs in YAML serialization, color parsing, and API route handlers. |
| better-sqlite3 | Database Engine | >=11.0.0 | Synchronous SQLite driver for Node.js. Zero-config, embedded database perfect for single-user/local-first apps. WAL mode for concurrent read/write. No separate database server needed. |
| Drizzle ORM | ORM / Query Builder | >=0.33.0 | Type-safe SQLite ORM with migrations. Lightweight compared to Prisma. Supports SQLite fully with drizzle-orm/sqlite. Schema-driven development with drizzle-kit for migrations. |
| Tailwind CSS | Styling | >=4.0.0 | Utility-first CSS for rapid UI development. Dark mode via class strategy. DESIGN.md exports to Tailwind tokens, so the editor eating its own dog food is elegant. |
| shadcn/ui | UI Component Library | latest | Accessible React components built on Radix primitives. Used for Dialog, DropdownMenu, Popover, Toast, Tabs, Command (Cmd+K), Tooltip, Select, Switch. |
| gray-matter | YAML Frontmatter Parser | >=4.0.0 | Standard library for parsing YAML frontmatter from markdown files. Handles the --- fence, returns structured tokens object + body string. Required for all DESIGN.md parsing. |
| js-yaml | YAML Serializer | >=4.1.0 | For serializing structured form data back into YAML frontmatter. Also used for validating YAML structure client-side before server validation. |
| @google/design.md | DESIGN.md Linter & Validator | >=0.1.0 | Google's official DESIGN.md CLI and linter. Provides lint, diff, export commands. The programmatic API (import { lint } from '@google/design.md/linter') is used server-side for validation with WCAG contrast checking, broken reference detection, and section order validation. |
| react-colorful | Color Picker | >=5.6.0 | Lightweight (3KB gzipped) color picker with Hex, HSL, RGB input. Accessible (WAI-ARIA). Customizable appearance. Multiple variants: HueSlider, SaturationPicker, HexInput. |
| CodeMirror 6 | Code / Markdown Editor | >=6.0.0 | Lightweight code editor for the raw DESIGN.md textarea. YAML and Markdown syntax highlighting via @codemirror/lang-yaml and @codemirror/lang-markdown. Much lighter than Monaco (good for a focused editor). |
| unified / remark | Markdown Rendering | >=11.0.0 / >=15.0.0 | AST-based markdown processing for the preview pane and pop-out preview. remark-parse + remark-html for rendering the DESIGN.md body section as HTML. |
| Zustand | Client State Management | >=4.5.0 | Lightweight React state management for editor state (active tab, split ratio), preview state (mode, theme), and UI state (modals, toasts, sidebar). |
| TanStack React Query | Server State Management | >=5.0.0 | Data fetching and caching for API routes (library list, single design system, validation). Automatic cache invalidation on mutations. |
| Lucide React | Icon Library | >=0.400.0 | Consistent open-source icon set for toolbar actions, navigation, file types, and UI controls. |
| uuid | ID Generation | >=9.0.0 | UUID v4 generation for shareable permalink IDs and database record IDs. |
| qrcode.react | QR Code Generation | >=4.0.0 | React component for rendering QR codes on share pages. Allows mobile users to quickly open the share link. |
Requirements
External Services
- PostgreSQLself-hostable
- MySQLself-hostable
- SQLiteself-hostable
A standalone web-based SPA for creating, editing, previewing, validating, and sharing DESIGN.md design system files — the open standard from Google for describing visual identity to coding agents.
External Dependencies
- 🔴node.jsinfrastructureRequired
Node.js 18+ runtime for the Next.js application.
- 🟡dockerinfrastructureOptional
Optional — Docker can be used for containerized deployment of the app.
Tags
No tags
Details
- Category
- developer-tools
- Difficulty
- high
- Version
- 1.1.1
- Published
- 6/13/2026
Related Blueprints
Coming soon...