Skip to content

CrossUI Studio is here — visually edit your *real* React code (v0.9.5)

Latest
Latest

Choose a tag to compare

View all tags
@linb linb released this 03 Jun 15:01
· 1 commit to master since this release
studio-v0.9.5
51aac12
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Ten years ago we built CrossUI — a visual builder that grew to 2,000+ stars by betting on one idea: you shouldn't have to hand-write every line of UI.

But every visual tool since has betrayed developers the same way: they generate throwaway code you can't read, lock you into a proprietary runtime, and turn a one-pixel tweak into an unreviewable 200-line diff. So serious teams gave up and went back to editing by hand. The AI tools made it worse — ask one to nudge a padding and it regenerates the whole file.

So we built something new to end that trade-off — a different product, for a different problem.

Meet CrossUI Studio — a visual editor that edits your real React source code, not a copy and not a proprietary document.

▶️ Watch the walkthrough

Watch CrossUI Studio in action

🎬 Play the demo →

What makes it different

Every visual editor we tried failed the same test: change one button, run git diff, and get 40 lines of reformatted noise with your comments stripped. No team lets that near a real repo.

CrossUI Studio is built around one rule: a visual change is a single atomic write to one node in your React AST.

  • One-line diffs. Change a prop on the canvas → exactly one line moves in your source. Hooks, custom logic, comments, and formatting come out byte-identical.
  • No lock-in. No proprietary runtime, no codegen, no SDK. Your React is the source of truth; the canvas is just a view over the AST. Delete Studio tomorrow and your repo still builds with npm install && npm run build.
  • Your real Git. GitHub · GitLab · Bitbucket · Azure · Gitea · Forgejo (self-hosted included). React 18 / 19 / Canary · MUI v7 · shadcn.
  • Deep-layer editing. Drill past the outermost render — into a .map() iteration, a ternary branch, or a node passed as children — and design it in isolation. Studio synthesizes type-correct mock data so the node renders even without its parent's runtime context.

Try it

👉 https://studio.crossui.com — no install, opens in your browser.

We'd genuinely love your feedback — especially from anyone maintaining a real React/MUI app. Open an issue or reply in Discussions.

CrossUI Studio is a new product from the team behind CrossUI. The original CrossUI framework remains open source and available in this repository.

Assets 2
Loading