The component editorAI agents need

Edit design tokens visually. Your running app updates live through HMR. Claude Code modifies components through MCP.

Download for Mac View Source

The loop

Edit a token, watch your app update.

1
You edited a token
In the style inspector on the right
→
2
Saddle saved to disk
Updated the .tsx frontmatter
→
3
Your app updated
HMR refreshed the component
Meanwhile, in your running app
localhost:5173
HomeAboutContact
Welcome to MyApp
The best way to get things done.
The "Get Started" button uses your component — edit its tokens in Saddle and watch it change here.

Built for designers and frontend devs

Token-first design

All styles flow through semantic tokens. Edit Primary once and every component restyles — across designers, code, and AI.

See the token model →
Saddle · Tokens
Primary --primary-*
bg#2563eb
bg-hover#1d4ed8
border#bfdbfe
Destructive --destructive-*
bg#dc2626

Live element inspector

Cmd-click any element in your running app. See its computed styles, edit them inline, and watch the iframe restyle in the same frame.

Read about the bridge →
Saddle · Inspector
⌘ + click
padding-xvar(--space-md)
background--primary-bg
radius8px

Built for AI agents

Saddle exposes structured component data over MCP, plus a per-variant component.md and a project-wide design.md. Agents read your tokens, intent, and usage notes — then update them in place.

Set up Claude Code →
Claude Code · saddle MCP
Make Primary purple instead of blue.
  • Readdesign.md
  • ReadButton.Primary.md
  • Editedprimary.bg → #9333ea
  • Updated3 components restyled live
Done. Primary now reads #9333ea across all components.

Saddle Studio

Everything to manage your frontend infrastructure

Learn more

Tokens, components, variants, docs, and MCP — one canvas for your design system, with your real app running live alongside it.

Tokens

Visual token editor

Edit colors, spacing, radius, and shadows with a live preview. Changes sync to your real app via HMR.

Primary --primary-*
bg#e07c3e
bg-hover#c66a30
bg-subtle#fde9d6
MCP

An AI-readable design system

Saddle exposes structured component data, tokens, and per-variant docs over MCP. Claude Code edits in place — typed, reviewable, no blind file rewrites.

Make Primary purple instead of blue.
  • Readdesign.md
  • Editedprimary.bg → #9333ea
  • Updated3 components restyled live

Live element inspector

Cmd-click any element in your running app to edit computed styles inline.

Variants

Clone, rename, and edit component variants. Frontmatter ships back to your stories.

Hierarchy

Visualize your component dependency graph and explore composition patterns.

Component docs

Per-component .md files surface usage notes to AI tools and humans.

The framework

Where your design system
and your agents meet

Saddle sits between the two. Your design system stays in code; your agents stay in the loop. Tokens, props, and docs flow both ways.

Saddle · Button · Default
⌘ + click
variantprimary
sizemd
radius8px
bg--primary

Start in 5 minutes

Works with any React component library.

1

Load your project

Auto-detects components and parses design.md frontmatter.

2

Connect dev server

Auto-detects localhost. Your running app appears inside Saddle.

3

Edit with tokens

Figma-style inspector. Changes save to disk and HMR updates your app.

4

Connect Claude Code

One-click MCP. Claude reads schemas, updates tokens, creates variants.

Tauri 2.x
React 18
TypeScript
Rust
Monaco Editor
MCP Protocol
FAQ

Your questions answered.

Everything you need to know about Saddle. Still stuck? Open an issue on GitHub and we'll respond.

How is Saddle different from Storybook?

Storybook is for documenting components in isolation. Saddle is for editing them — visually, with tokens, while your real app keeps running through HMR. It also exposes structured component data over MCP so AI agents can read and edit your design system in place.

Does Saddle work with my framework?

Saddle expects a React project with Vite. It auto-detects your stories file (demo/stories.tsx, **/*.stories.tsx, or a hash-routed demo/App.tsx) and connects to your dev server. Bring-your-own-Vite mode also works if Saddle can't auto-spawn.

What does the MCP integration give me?

One-click install writes .mcp.json to your project root. From there, Claude Code can list components, read variants, edit tokens, and create new variants — all through a typed schema rather than blind file edits.

Will Saddle modify my source code?

Token edits and new variants are written back to disk so your app's HMR picks them up — that's the point. Saddle never touches files outside the components and config you've registered in saddle.manifest.json.

Is it free?

Yes. Apache-2.0, source on GitHub.

Get Saddle

Free and open source. Apache 2.0.

Download for macOS Quick Start Guide