# Visual editor for React/MUI that touches your repo atomically > Source: > Published: 2026-06-03 00:18:53+00:00 CrossUI Studio is the round-trip visual editor for React & MUI apps *you already have*. Every change is one atomic AST patch — drill into a .map, a ternary, a slot, and touch a prop. Only that prop moves. git diff reads like you wrote it by hand — comments, formatting, and intent preserved. No fork. No lock-in. Design on the canvas.Commit clean code. Every other visual tool gives you one of these and calls it a day. CrossUI Studio is the platform when you need all six at once. Code ⇌ canvas, live and AST-precise. Design is code. Code is design. Both kept friendly to humans *and* AI. Penetrate .map iterations, ternary branches, and slot children to design individual nodes in isolation. Mock data auto-injected. Drill into any layer →Skip npm install entirely. Write an import, the engine streams the ESM from CDN, the canvas renders. Zero-config runtime →Scalpel-level AST patches. Touch a prop, only that prop moves. Your comments, formatting, and business logic come out untouched. See the diff →AES-GCM tokens with physical key/lock separation. Salt in the cloud, ciphertext in your browser — combined in memory, only at request time. Security architecture →Standard React output. No private runtime, no closed dependencies. Leave Studio any day — your project keeps building, anywhere. Read the FAQ →Component tree, canvas, code editor, and inspector are peers on the same AST. Edit anywhere; the other three follow inside the same global undo transaction. Drag-reorder nodes, jump to parents, hover to highlight the matching component on canvas and the JSX block in code. Sandbox-isolated React renders, drag-resize, breakpoint switching from xs to xl, click-to-select with a hover preview of the exact JSX node. Move the caret into a JSX tag and the inspector loads it. Typing edits the canvas. Prettier-formatted, single source of truth. Styles, Props, sx tree, MUI breakpoints, event handlers — every change is a targeted AST patch on the single property you touched. Most editors only let you touch the outermost render. Studio penetrates conditional branches, list iterations, MUI slots, SlotProps, and controlled sub-components. Every visual change is an atomic AST patch — never a full-file rewrite. Your formatting, custom hooks, business logic, and comments come out of the editor exactly as you wrote them. Studio understands MUI as a first-class citizen. Supports custom createTheme objects, schema-driven property panels, an industrial sx tree editor, and one-click responsive promotion. `sx={{ p: { xs: 1, sm: 1, md: 1, lg: 2, xl: 2 } }}` The runtime engine streams ESM packages from CDN on the fly. Every project starts with MUI v7 preloaded; anything else you import boots without a build step. Every module remains state-aware, ensuring seamless context switching. Zero-config virtual file system. Persists in your browser. Export the full tree as a zip when you're ready. virtual VFS · 10 files (Free)Native Git mount. Side-by-side diff before push. Single-file atomic commits the way Git wants them. GitHub · GitLab · Bitbucket · …14 CSS sections in Basic mode; full MDN-coverage in Advanced. Profile, Style, Props, Events. schema-driven panelsDeep adapters for MUI v7 and shadcn/ui. sx tree, responsive promotion, design tokens. MUI v7 · shadcnSimple, JS-structured tree, and full code editor — all on the same AST. Live runtime evaluate against the canvas sandbox. 3 modes · live evaluateDirect-connect Gemini, OpenAI, Groq or OpenRouter. Scoped to the node you selected — never leaks past the boundary. BYOK · 4 invocation pointsESM CDN auto-import. Three React tiers — Classic 18.2, Modern 19, Edge Canary. No npm install wait. esmjs · jsdelivr · unpkgHEALTH score, RISK rating, 26 business intents. Click any deduction to jump to the exact block in the editor. 26 intents · 4 risk tiersVisual editors split into design-handoff, AI app-builders, and lock-in low-code. Studio sits next to your repo and treats your React source as the truth. | Plasmicvisual builder · headless | Builder.iovisual headless CMS | v0 / Bolt / LovableAI prompt-to-app | CrossUI Studiosymmetric visual IDE | | |---|---|---|---|---| | Source of truth | Proprietary model | Hosted CMS entries | Generated, then forked | Your React source code | | Round-trip code ⇌ canvas | Codegen export, one-way | Render via SDK | Re-prompt, regenerate | Real-time, AST-precise | | Drill into .map / ternary / children | Outermost layer only | Outermost layer only | Outermost layer only | Any depth, isolated render | | MUI v7 first-class | Generic React | Generic React | Tailwind-first | Schema · sx tree · responsive promote | | Preserves your hand-written code | Re-emits the file | N/A | Often rewrites | Atomic AST patches · comments kept | | If you stop using it | Need runtime + studio | SDK lock-in | You keep the fork | Your repo still builds, unchanged | | Where your code lives | Their cloud | Their cloud | Their cloud | Local-first · browser ⇄ Git, direct | If you write React UI professionally, CrossUI Studio was built with you in mind. Here are the profiles we see most, along with the specific pain each one brings to them: `.map` ." And if none of the above quite fits — if you simply write React UI and hate the gap between editing code and seeing the result — that's enough. CrossUI closes that loop locally and instantly, for every developer, on every project. **Dramatically cuts UI iteration time.** No proprietary database. CrossUI is a visual editor on top of the Git system you already trust — self-hosted instances included. Git operations and AI calls go browser-to-provider, end-to-end. API tokens are split physically — the Key lives in the cloud, the Lock in your browser. AES-GCM encrypted tokens stored locally; the salt lives on your CrossUI account. Local files alone can't decrypt anything. Your browser talks directly to GitHub, GitLab, Gemini, OpenAI, OpenRouter — CrossUI never proxies, never stores. Playground files live in browser storage. Repository edits stream straight to your remote branch. No middleman. Single-file scope per session. No cross-file content sent. Provider terms apply, on your account, with your key. Stripe-billed, cancel anytime. The free plan is the full editor, just gated on Git repos and a few advanced surfaces. The full bi-directional editor on a virtual repo. For exploring continuous iteration. For developers who ship with Studio every week. Save $29 vs. the monthly plan. Pays for itself in your first hour of coding. Cancel anytime. From solo developers to enterprise teams, we provide the dedicated channels you need to ship faster. Running into an AST edge case? Need help with Git integration? Email our engineering team directly. Share your components, ask questions, and learn best practices from other Studio developers. Found a bug in the Bridge SDK? Have a feature request? Open an issue or contribute on GitHub. Join the developers shipping React apps faster with CrossUI Studio.