NEW
Now with live multiplayer

Design with your agents.

Open-source design canvas.

Open in browser
Download
Free and open source

From canvas to commit.

One design, start to finish. Scroll to follow it.

Design on the canvas
You lay out a pricing section.
Kimo canvas: a pricing section with the Team card selected
Your agent edits it
You ask for a Pro tier. It appears.
Kimo's agent adds a Pro tier while its cursor works on the canvas
Code comes out
The same design, as React.
The pricing section exported to React and Tailwind next to the canvas
Git keeps the history
The file is plain JSON. Review it like code.
The .kimo file diff in git: the new Pro card and the renamed title

Watch it build.

One prompt. Every step on the canvas. Undo anything.

0.0s
Prompt sent
2.1s
Reads the page
5.8s
Adds a pricing section
9.4s
Styles the Pro card
12.0s
Done, ready to review
The Kimo editor in an agent session: Kimo adds a pricing section to the canvas while the agent panel lists its steps
720 × 260
Add a pricing section under the hero. Three tiers, highlight Team, and a Pro tier at $24 with SSO.
On it. I'll reuse your card styles and brand tokens, put the section under Hero, and keep Team as the dark card.
Read Home and 3 children
Inserted Pricing (frame, 3 cards)
Set Team card fill to $brand/ink
Styling Card · Pro…
11 changes · 1 frame
Review
+
Pricing (frame, 3 cards)
~
Card · Team.fill #FFFFFF → $brand/ink
+
Card · Pro (frame, 4 children)
Undo all
Keep
Kimo is adding Pricing…

Everyone on one canvas.

People and agents, side by side. Encrypted, on your own server.

The mobile artboard of the same page
Two people and two agents on the same artboard
Home · Mobile
Ana
Kimo
agent
Jun
Claude Code
MCP
A
J
K
C
4 here
End-to-end encrypted
relay.yourteam.dev
See who is working
Every person and agent has a cursor.
Private by design
Only people with the link can read it.
Your own server
Run it yourself, or work alone.

Your design file is just JSON.

It lives in your repo, next to your code.

Readable
plain JSON
Mergeable
kimo merge
Open
MIT spec
landing.kimo
plain JSON
1
{
2
 "$schema"
:
"https://getkimo.design/schema/kimo-1.0.json"
,
3
 "format"
:
"1.0.0"
,
4
 "nodes"
: {
5
 "h3Ro9xQk2a"
: {
"type"
:
"frame"
,
"parent"
:
null
,
"name"
:
"Hero"
,
6
 "layout"
: {
"dir"
:
"column"
,
"gap"
:
16
} },
7
 "t7Kp2mVw8c"
: {
"type"
:
"text"
,
"parent"
:
"h3Ro9xQk2a"
,
8
 "content"
:
"Plan less. Ship more together."
 }
9
 }
10
}
zsh · feature/hero
git driver
$
git merge design/pricing
Auto-merging landing.kimo
kimo merge: 214 nodes · 3 variables ·
0 conflicts
Merge made by the 'ort' strategy.
$
kimo validate landing.kimo
✓ landing.kimo valid (format 1.0.0)

Design in. Code out.

Clean code from every design.

React + Tailwind
TSX
HTML + CSS
static
Design tokens
CSS vars, JSON
SVG · PNG · PDF
assets
Kimo's code panel: the Hero frame as React and Tailwind
HERO.TSX → BROWSER
Plan less. Ship more together.
Loom turns messy roadmaps into plans your whole team can follow.
Start free

The future is open source.

Every part of Kimo is open. Read it, change it, ship it.

View on GitHub
Saudade-media / kimo
apps/ · packages/
Editor, desktop shell, CLI
MIT
docs/spec/
The .kimo format, versioned
MIT
core-schema/schema/
JSON Schema + TS types
MIT
packages/mcp-server/
Typed MCP tool schemas
MIT
docs/agents/
Guides your agent reads
MIT
docs/adr/
Every decision, with reasons
MIT

Start with one file.

Open Kimo and save your first design.
Open in browser
Download
macOS · Windows · Linux · web
NEW
Now with live multiplayer

Design with your agents.

Open-source design canvas.

Open in browser
Download for desktop

From canvas to commit.

A pricing section laid out on the Kimo canvasKimo's agent adds a Pro tier to the pricing sectionThe pricing section as React and TailwindThe .kimo file diff in git
Design on the canvas
Your agent edits it
Code comes out
Git keeps the history

Watch it build.

One prompt. Every step on the canvas.
Kimo is adding Pricing…
0.0s
Prompt sent
2.1s
Reads the page
5.8s
Adds a pricing section
9.4s
Styles the Pro card
12.0s
Done

Everyone on one canvas.

People and agents, side by side.
End-to-end encrypted

Your design file is just JSON.

site/landing.kimo
+18
−2
"pricing-title": {
-
"content": "Simple pricing",
+
"content": "Pricing that grows with you",
 },
+
"card-pro": {
+
"type": "frame", "parent": "cards",
+
"layout": "vertical", "gap": 5, "padding": 10,
+
"stroke": "$border", "cornerRadius": 8
+
 },
+
"card-pro-price": { "type": "text", "content": "$24" },
+
"card-pro-desc": { "type": "text", "content": "SSO + audit log" },
"cards": {
-
"children": ["card-starter", "card-team"]
+
"children": ["card-starter", "card-team", "card-pro"]
a3f9c1e
Pricing: add Pro tier (by Kimo, reviewed by you)

Design in. Code out.

Pricing.tsx
React + Tailwind
 1
export function
Pricing
() {
 2
return (
 3
 <section
className
="bg-[#FFF7EE] p-5">
 4
 <h2
className
="font-serif text-2xl">
 5
Pricing that grows with you
 6
 </h2>
 7
 <div
className
="flex gap-2">
 8
 <Tier
name
="Starter"
price
={0} />
 9
 <Tier
name
="Team"
price
={12} dark />
10
 <Tier
name
="Pro"
price
={24} />
11
 </div>
12
 </section>
13
 )
14
}
Generated · deterministic
Copy  ⌘C

The future is open source.

Every part of Kimo is open.

Start with one file.

Open in browser