Simulate any codebase

Paste. Drag.
Ship.

Drop in your code, see it running live, drag to edit the layout. Your source updates in real time. Any framework.

App.jsx
styles.css
utils.js
1import React from "react";
2import { Card, Button } from "./components";
3
4export default function Dashboard() {
5 return (
6 <div className="dashboard">
7 <h1>Overview</h1>
8
9 <Card style={{ marginTop: 24 }}>
10 <span className="label">Revenue</span>
11 <h2>$12,840</h2>
12 </Card>
13
14 <Card>
15 <span>Recent</span>
16 <UserList />
17 </Card>
18
19 <Button>Export</Button>
20 </div>
21 );
22}
Overview
Revenue
$12,840
↑ 12.5% from last month
<Card> line 9
Recent
Sarah Chen
Upgraded to Pro
+$29
Marcus Rivera
New signup
New
Export
<Card> App.jsx:9
margin-top 24px
padding 16px
border-radius 12px
background #111
width 288px

Simulate your code

Three steps. Zero configuration.

Step 01

Paste your code

Drop in any React, Vue, Svelte, or HTML file. Import a GitHub repo. Or start from a template. Your code runs instantly in the browser — nothing to install.

import { useState } from "react";
export default function App() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Count: {count}</h1>
Step 02

Simulate and drag

Your app renders live. Toggle drag mode — click any element to inspect it, drag to move it, pull edges to resize. Code updates as you drag, character by character.

<div style={{
marginTop: 24,
padding: 16,
}}>
<h1>Hello</h1>
<p>Welcome</p>
</div>
Hello
Welcome back to your dashboard.
Continue
Step 03

Export clean code

Copy the updated code back to your project. Push directly to GitHub. Or download as a zip. Your original structure, your original style — just better positioned.

📋
Copy to clipboard
Updated source code ready to paste
→
🔗
Push to GitHub
Commit changes to your repo
→
📦
Download project
Full project as .zip
→

Built for developers

⚡

Instant simulation

Code runs in-browser via WebContainers. No build step, no server, no waiting.

🎯

Pixel-accurate drag

Drag elements with pixel precision. Margins, padding, and position update live.

🔗

Source-mapped edits

Every visual change maps back to the exact line in your source code. No magic.

📱

Responsive testing

Preview at any breakpoint. Desktop, tablet, mobile — see how your layout responds.

🤖

AI layout assist

"Center this" or "make it responsive" — describe changes in plain English.

↩

Full undo stack

Every drag, resize, and edit is tracked. Undo anything, go back to any state.

Connects to everything

Pull from GitHub. Push back. Let AI bots edit visually.

GitHub
Pull and push directly
mike/ dashboard-app main
📁 src/
📄 App.jsx
📄 index.css
📁 components/
Pull & Open
Push Changes
Connect your repo. Open any file visually. Drag to edit. Push a clean commit — no merge conflicts, no reformatting.
AI Plugin API
Claude, OpenClaw, GPT & more
POST /api/session
{
"code": "<App />",
"action": "move",
"target": "Card",
"marginTop": 32
}
Returns updated code + live preview URL
AI agents send code via API, make visual adjustments, and return a shareable preview link. Users see changes, tweak by dragging, approve or reject.
Claude
OpenClaw
GPT
Cursor

Any language

If it renders in a browser, we simulate it.

React
Vue
Svelte
HTML/CSS
Next.js
Angular
Vanilla JS
TypeScript

Simple pricing

Free to start. Upgrade when you need more.

Free
$0 /mo
Try it out
  • Single file projects
  • React + HTML support
  • Click to inspect
  • Basic drag editing
  • Copy to clipboard
Pro
$29 /mo
For serious builders
  • Multi-file projects
  • All frameworks
  • GitHub integration
  • AI layout assistant
  • Responsive preview
  • Unlimited undo
Team
$99 /mo
Collaborate visually
  • Everything in Pro
  • 5 team members
  • Real-time collaboration
  • Design system rules
  • Version history
  • Priority support

Stop describing layouts.

Paste your code and start dragging. It's free.