Krafto

Visual editor for your existing React codebase.

Click any element in your live app and edit its text and classes, or ask the AI in plain language. Your own coding agent (Claude Code / Codex) writes the change to your source as real code, committed to a krafto-owned branch — your working tree and branches are never touched.

Status: early preview. Next.js and Vite+React, macOS/Linux.

Try it

In a Next.js or Vite+React project (Node 18+):

npx krafto init   # detect the project, connect it (gitignored .krafto config)
npx krafto dev    # start the agent — open the editor from your dashboard

init doesn't rewrite your sources — it only adds the gitignored .krafto/ config and makes a single onboarding commit for it. To edit, you need a coding agent installed (Claude Code or Codex); krafto runs your own agent, never its own keys.

How editing works

Every design session lives on its own branch:

• Opening the editor creates a session — a git worktree under .krafto/worktrees/ on branch krafto/<id>, running its own dev server.
• An edit (an inspector tweak or an AI-panel prompt) is handed to your coding agent, which writes it to the worktree (your app hot-reloads instantly) and the change is committed to the session branch.
• Fork a session from the editor to branch off its current state and experiment.
• Like the look? git merge krafto/<id> whenever you want — krafto never merges or pushes for you.

The agent (krafto dev) talks to the gateway over an outbound WSS tunnel — no inbound ports, nothing deployed.

Links

• Follow the build: github.com/getkrafto/cli
• Contact: [email protected]

License

Apache License 2.0. Copyright © Okto Labs LLP.