Visually edit MUI in 5 minutes — no repo, just paste a component.

The fastest way to understand CrossUI Studio isn’t a demo video — it’s pasting one of your own components in and changing something. No install, no repo connection, no signup. Here’s the whole loop in five minutes.

YOU’LL NEED: A browser and any MUI component — yours, or the one we provide below. The Playground runs on an in-browser virtual repo, so there’s nothing to connect and nothing to install before you see the canvas.

Most tools make you sign up, connect a repo, and wait for an index before you see anything. That’s backwards: you can’t tell if a visual editor is any good until you’ve edited something *real* in it. So Studio’s Playground starts the other way around — paste a component, see it on the canvas, edit it, read the diff. You connect Git later, only once you already want to.

The five-minute loop

Step 1 — Open the Playground

Go to [studio.crossui.com] and open the Playground. It loads onto a virtual repo — a real React + MUI project running entirely in your browser tab. No account, no install. You’re looking at a live canvas in a couple of seconds.

> If you’d rather not paste anything yet, the Playground ships with a sample app already loaded — skip to Step 3 and edit that instead. But pasting your own component is the moment it clicks.

Step 2 — Paste a component

Hit New file, drop in a `.jsx` / `.tsx` file, and paste any MUI component. No props wired up, no parent context — Studio renders it standalone. If you don’t have one handy, paste this:

import { Card, CardContent, Typography, Button, Stack } from '@mui/material'
export default function PlanCard() {
 return (
   <Card sx={{ p: 2, maxWidth: 360 }}>
   <CardContent>
     <Typography variant="h6">Pro</Typography>
     <Typography variant="body2" color="text.secondary">
       Everything in Free, plus real Git mounts.
     </Typography>
     <Stack direction="row" spacing={1} sx={{ mt: 2 }}>
     <Button variant="text">Learn more</Button>
     <Button variant="text">Upgrade</Button>
     </Stack>
   </CardContent>
 </Card>
 )
}

It appears on the canvas, rendered with the real MUI theme — not a screenshot, not an approximation. The actual component.

Step 3 — Make a visual change

Click the `Upgrade` button on the canvas. The inspector on the right shows its props, read straight from MUI’s schema. Change variant from `text` to `contained`. The button updates on the canvas instantly.

Get Jack Li’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Now do a second one to feel the `sx` editor: select the `Card`, find `p` (padding), and click the responsive toggle to promote it from a single value to `{ xs: 2, md: 3 }`. One click, no typing the object out by hand.

Step 4 — Read the diff

Open the Code view, or the diff panel. This is the whole point of the tool — look at what your two visual edits actually wrote to the file:

- <Card sx={{ p: 2, maxWidth: 360 }}>
+ <Card sx={{ p: { xs: 2, md: 3 }, maxWidth: 360 }}>
…
- <Button variant="text">Upgrade</Button>
+ <Button variant="contained">Upgrade</Button>

Two visual changes, two precise edits. The `Learn more` button is untouched. Your imports, your `CardContent`, the `Typography` copy — all byte-identical. This is the thing no screenshot can show you: the canvas edited your source, the way you’d have typed it.

Step 5 — (Optional) Connect a real repo

Once the loop makes sense on a throwaway component, point it at something real. Studio mounts your actual Git — GitHub, GitLab, Bitbucket, Azure, Gitea, or Forgejo, self-hosted included. The edit loop is identical; the difference is the diff lands as a commit you can open a PR from.

The Playground is free forever. Real Git mounts are the paid tier.

Why “paste first” matters

You’ll notice the entire tutorial happened before you logged in or connected anything. That’s deliberate. A visual editor’s only real claim is the quality of the code it writes — and you can’t evaluate that from the outside. So the fastest honest pitch we can make is: bring your own component and watch the diff.

> Don’t trust the screenshots. Paste your gnarliest MUI component and try to make the diff ugly. That’s the test we built the tool to pass.

If you want the reasoning behind why the diff stays this clean, the [first post] walks through the AST architecture. But you don’t need the theory to start — you need a component and five minutes.

Open the Playground. Paste a component. Read the diff.

No install, no repo, no signup. Just the loop.

About CrossUI Studio — A visual IDE for React & MUI. Code and canvas stay in two-way sync on the same AST: edit code and the canvas updates live; click an element on the canvas, edit its props visually, and the code changes with a surgical one-line diff. No build, no localhost — it runs in the browser, works on your real Git repo or a local folder, with no vendor lock-in.

[Try it free → studio.crossui.com]