Code and design,
finally in the same room.
Edit React and Next.js interfaces visually with clean, production-ready code.
No rebuilds, no sync delays — just instant, AST-safe edits and built-in Git control.
Unified Diff
+ .btn { @apply bg-neon-500 text-black; }
- .btn { background:#0b1020; color:#fff; }
@@ -24,6 +24,7 @@ Button.tsx
export function Button() {…
Built for modern stacks
Next.js
React
Tailwind
Git
Designers and developers are out of sync
SMOKIT keeps code, preview, and design in one place so teams move faster.
Visual Editing + Live Preview
Click and edit your UI while seeing it behave in real time.
AST‑aware Code Changes
Under the hood, SMOKIT understands your code structure, so edits don’t break syntax or style.
Minimal Diffs & Git Integration
Only the essential changes are committed, and you can stage/branch without leaving the editor.
Tailwind & Schema Validation
Enforces design consistency by validating tokens and structure.
How It Works
Open
Load your project with one click.
Explore
Navigate visually with canvas + layers.
Edit
Click/drag to update components and styles.
Transform
SMOKIT applies safe AST changes.
Preview
See changes live in Next.js.
Commit
Stage/branch via built‑in Git.
What You Gain
Faster design‑to‑code
Ship UI changes in minutes, not hours.
Cleaner reviews
Minimal diffs reduce noise and conflict.
Safer updates
Edits respect syntax and structure.
Design consistency
Tailwind tokens enforced automatically.
Performance confidence
Budgets and metrics keep you honest.
Dev control
Keep engineers in the loop — minus friction.
Who SMOKIT Is Made For
FE
Front‑end Engineers
Ship React/Next.js changes without breaking code.
UX
UI/UX Designers
Make direct visual edits to production UIs.
DS
Design Systems
Enforce tokens and consistency at scale.
AG
Agencies
Safe quick fixes across many React sites.
AST‑aware edits for JSX/TSX
Change props, reorder nodes, and refactor styles without breaking formatting. SMOKIT validates schema and Tailwind tokens, then emits minimal unified diffs.
AST Engine · Minimal Diff
GPU canvas with Selection
Powered by Metal in the desktop app, and WebGL/WebGPU on the web. Inspect layers, snap to nodes, and keep 120 FPS even on heavy pages.
CanvasKit · 120 FPS
FAQ
Does SMOKIT rewrite your code?
No — it makes minimal, safe adjustments and never breaks syntax.
Which frameworks / stacks are supported?
Next.js, React, Tailwind, (TSX/JSX).
Is my code private / secure?
Yes — no telemetry, everything runs locally by default.
Will it generate large diffs?
No — SMOKIT creates minimal unified diffs to keep your Git history clean.
Join Our Launch / Stay in the Loop
We’re opening limited invites soon. Get early access to the desktop & web version.
No spam. One‑click unsubscribe.