krafto

Visual editor for your existing React codebase

Click any element in your live app. Change it. Ship the diff to your repo.

$ npx krafto init
View on GitHub

How it works

  1. 01

    Install in your repo

    npx krafto init tags every JSX element with a stable ID and writes the config.

  2. 02

    Run the agent locally

    docker compose up starts a container that hosts your dev server and connects to Krafto.

  3. 03

    Edit visually, commit normally

    Open the editor in your browser. Click any element, change classes or content. Krafto patches the source, commits, and HMR shows the result live.