CrossUI Studio — The Symmetric Visual IDE for React & MUI<br>CODE-TRUE VISUAL EDITING · REACT + MUI Your React codebase.<br>Now with a canvas.<br>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.<br>Design on the canvas.Commit clean code.<br>Open Studio →See how SCD works<br>React 18 / 19 / Canary ·MUI v7 + shadcn·Works with Gemini · OpenAI · Groq · OpenRouter ·Output: standard React<br>BUILT ON THE STACK YOU ALREADY TRUSTReactMUI v7shadcn/uiGitHubGitLabBitbucketAzure DevOpsGitea / Forgejo

studio.crossui.com / Dashboard.tsx

01 · WHAT MAKES STUDIO DIFFERENTSix pillars. One opinionated workbench for React + MUI.<br>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.

P01Symmetric Collaborative Development<br>Code ⇌ canvas, live and AST-precise. Design is code. Code is design. Both kept friendly to humans and AI.<br>See the four surfaces →P02Layer Drill-down Engine<br>Penetrate .map iterations, ternary branches, and slot children to design individual nodes in isolation. Mock data auto-injected.<br>Drill into any layer →P03Instant Dependency Runtime<br>Skip npm install entirely. Write an import, the engine streams the ESM from CDN, the canvas renders.<br>Zero-config runtime →P04Intent Integrity<br>Scalpel-level AST patches. Touch a prop, only that prop moves. Your comments, formatting, and business logic come out untouched.<br>See the diff →P05Data Sovereignty<br>AES-GCM tokens with physical key/lock separation. Salt in the cloud, ciphertext in your browser — combined in memory, only at request time.<br>Security architecture →P06No Vendor Lock-in<br>Standard React output. No private runtime, no closed dependencies. Leave Studio any day — your project keeps building, anywhere.<br>Read the FAQ →

02 · SYMMETRIC COLLABORATIVE DEVELOPMENTFour surfaces. One source of truth. Zero drift.<br>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.

SCDAST BUS

Component TreeHierarchy you can move.<br>Drag-reorder nodes, jump to parents, hover to highlight the matching component on canvas and the JSX block in code.<br>▾ App<br>▾ Dashboard<br>▾ Stack<br>● Card.map[2]

CanvasLive, real-rendered.<br>Sandbox-isolated React renders, drag-resize, breakpoint switching from xs to xl, click-to-select with a hover preview of the exact JSX node.<br>xs · sm · md · lg · xl

Monaco Code EditorCursor is selection.<br>Move the caret into a JSX tag and the inspector loads it. Typing edits the canvas. Prettier-formatted, single source of truth.<br>// canvas drag → 1 line touched<br>+ sx={{ mt: 2 }} ...><br>// 26 lines around it: untouched

Inspector & EventsAtomic prop writes.<br>Styles, Props, sx tree, MUI breakpoints, event handlers — every change is a targeted AST patch on the single property you touched.<br>variant · contained<br>color · primary<br>onClick · handleSubmit ↗

03 · CORE CAPABILITIESFour engines that make this more than another visual editor.

03-a · LAYER DRILL-DOWN ENGINEEdit at the depth you mean — even past a .map.<br>Most editors only let you touch the outermost render. Studio penetrates conditional branches, list iterations, MUI slots, SlotProps, and controlled sub-components.<br>Drill into a single iteration of a .map to design one card.<br>Enter the truthy branch of a ternary or && without changing the source.<br>Edit sub-components passed as children or via MUI slots.<br>Inject Mock data for undefined props so isolated nodes still render perfectly.

isolation contextApp/Dashboard/Stack/cond: hasOrders ?/OrdersTable/.map(order =>)/OrderCard<br>DepthAny depthRender modeIsolated · scoped sandboxIter contextorder = orders[0]<br>WHAT YOU CAN DRILL INTO<br>.maplist iteration<br>? :ternary branch<br>&&logical AND<br>childrenslot / prop nodes

1 Top breadcrumb / structure tree2 Cursor in code editor

03-b · INTENT INTEGRITYScalpel-grade diffs. Comments and logic survive.<br>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.<br>One prop changed → one prop in the diff. Nothing else.<br>Prettier-clean output that passes git diff review with no churn.<br>Logic-sensitive zones (loops, ternaries) are protected behind the Expression Hub.<br>Global undo stack — code, canvas, tree, inspector roll back as one.

diff · OrderCard.tsxHEAD → working tree+1 −1 · 4 comments preserved<br>12// keep this until the new spec lands — Jordan, Apr 14<br>13const total = useMemo(() => sum(order.items), [order])<br>14return (<br>15<br>16 {/* primary CTA — must be high-emphasis per design v3 */}<br>17 text" {/* critical */} onClick={handle}>Pay<br>17 Pay<br>18 {/* TODO(QA): trigger analytics on click */}<br>19<br>20)

INTENT INTEGRITY · GUARANTEES✓ all four upheld<br>✓...