schematic Svelte Themes

Schematic

LLM-first TDD Authoring App — Tauri v2 + Svelte 5

Download

Schematic

A desktop app for authoring Technical Design Documents through guided conversation with Claude. Built with Tauri v2 (Rust) and Svelte 5.

Schematic uses a split-pane UI: you chat with Claude on the left, and a live document preview updates on the right as Claude incrementally builds your TDD. It invokes the Claude CLI (claude -p) so you use your existing Claude Code subscription -- no API key configuration needed.

Prerequisites

  • Rust (1.77.2+)
  • Node.js (18+)
  • pnpm (10+)
  • Claude Code CLI installed and authenticated (claude available in PATH)
  • macOS (primary target), Linux and Windows should work but are untested

Getting Started

# Install dependencies
pnpm install

# Run in development mode (starts both Vite dev server and Tauri)
pnpm tauri dev

# Build for production
pnpm tauri build

The production build outputs to src-tauri/target/release/bundle/ -- a .app bundle and .dmg installer on macOS.

How It Works

  1. Start a new document -- pick a template (Standard TDD, API Design, Lightweight RFC) or start blank
  2. Chat with Claude -- describe what you're designing. Claude responds conversationally and simultaneously builds/updates the document
  3. Live preview -- the right pane renders your TDD as formatted markdown in real time
  4. Link repositories -- attach local repos so Claude sees the directory structure as context
  5. Save -- documents are saved as plain .md files wherever you choose

Claude CLI Integration

Schematic spawns claude -p --output-format json for each message, piping the full prompt (system instructions, conversation history, document state, template hints, repo context) via stdin. Claude is instructed to respond with structured JSON containing both a conversational reply and an optional document update. This means:

  • No API key management -- uses your existing Claude Code subscription
  • No streaming (batch request/response per message)
  • Prompts can be arbitrarily large (piped via stdin, not CLI args)
  • 5-minute timeout per request with progressive loading feedback

Architecture

schematic/
├── src/                          # Svelte 5 frontend (SvelteKit + adapter-static)
│   ├── lib/
│   │   ├── components/
│   │   │   ├── chat/             # ChatPanel, MessageList, MessageBubble, ChatInput
│   │   │   ├── document/         # DocumentPreview, SectionNav
│   │   │   ├── common/           # SplitPane, MarkdownRenderer
│   │   │   ├── templates/        # TemplateSelector
│   │   │   ├── repos/            # RepoLinker, RepoList
│   │   │   ├── Layout.svelte     # Three-panel layout shell
│   │   │   └── Sidebar.svelte    # Document list, repo links
│   │   ├── stores/               # Svelte 5 class-based stores ($state/$derived)
│   │   │   ├── conversation.svelte.ts
│   │   │   ├── document.svelte.ts
│   │   │   ├── templates.svelte.ts
│   │   │   ├── repos.svelte.ts
│   │   │   └── ui.svelte.ts
│   │   ├── services/             # Tauri command wrappers
│   │   ├── types/                # TypeScript interfaces
│   │   └── utils/                # Markdown rendering
│   └── routes/                   # SvelteKit pages (single page app)
├── src-tauri/                    # Rust backend
│   ├── src/
│   │   ├─�� claude/               # CLI process spawning, prompt builder
│   │   ├── commands/             # Tauri commands (claude, documents, templates, repos)
│   │   ├── models/               # Data structures (document, conversation, template)
│   │   └── state/                # App state management
│   ├── templates/                # Built-in TDD templates (JSON)
│   ├── Cargo.toml
│   └── tauri.conf.json
├── package.json
└── svelte.config.js

Key Design Decisions

Decision Choice Rationale
CLI invocation tokio::process::Command with stdin Handles arbitrary prompt sizes, more control than plugin-shell
Response format Structured JSON from Claude Reliably separates chat replies from document updates
State management Svelte 5 class-based stores with $state Idiomatic fine-grained reactivity
Document format Plain .md files Portable, works with any editor
Session storage JSON in app data dir Keeps markdown files clean, enables conversation resume
Template storage JSON files in app data dir Easy to edit and share
Repo context Directory tree string in prompt Simple, fast, no tool-use overhead

Data Storage

  • Documents: Plain markdown files saved to a user-chosen location (default: ~/Documents/Schematic/)
  • Sessions: Conversation history stored as JSON in ~/Library/Application Support/com.schematic.Schematic/sessions/
  • Templates: Built-in templates copied to ~/Library/Application Support/com.schematic.Schematic/templates/ on first launch
  • Config: Global settings (linked repos) in ~/Library/Application Support/com.schematic.Schematic/config.json

Keyboard Shortcuts

Shortcut Action
Cmd+Enter Send message
Cmd+S Save document
Cmd+N New document
Cmd+B Toggle sidebar

Templates

Three built-in templates:

  • Standard TDD -- Overview, Background, Goals & Non-Goals, Technical Design, API Design, Data Model, Testing Strategy, Rollout Plan, Open Questions
  • API Design -- Overview, Endpoints, Authentication, Request/Response Schemas, Error Handling, Rate Limiting, Versioning, Examples
  • Lightweight RFC -- Summary, Motivation, Detailed Design, Alternatives Considered, Unresolved Questions

Custom templates can be added by placing JSON files in the templates directory. See the built-in templates in src-tauri/templates/ for the schema.

Development

# Type-check the frontend
pnpm check

# Check Rust compilation
cd src-tauri && cargo check

# Build frontend only
pnpm build

# Build Tauri debug bundle
pnpm tauri build --debug

License

Unlicensed -- private project.

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes