Preview and edit material-kit-react without a build step - CrossUI Studio — Symmetric Visual IDE

Author

User<br>linb<br>Posts by this author<br>Posts by this author

~7 min read · Tutorial

I look at a lot of MUI admin templates. material-kit-react from the minimals people is one I keep going back to. Clean, typed, and the folder structure makes sense. Repo: minimal-ui-kit/material-kit-react.

But every time I just want to see it, or change one color to check something, it's the same ritual. git clone, npm install, wait, npm run dev, wait more, tab over to localhost. Few minutes gone, a few hundred MB of node_modules on disk. All that to look at a dashboard.

So this time I skipped the build. Opened the folder in CrossUI Studio, rendered src/main.tsx directly. No install, no Vite, no localhost. Below is what I did, including the bits that made me stop and think.

One honest note first. This does not replace your dev server. You still need the real thing for tests, prod builds, actual feature work. It's good for the look-and-tweak loop. Evaluating a template, recoloring something, showing a client. The stuff where booting the whole toolchain costs more than the task itself.

Quick note : local folder support requires a Pro account. To test it out, use the code 'GIFT-CODE-7DAY-FOR-BLOG-10 ' for a free upgrade. No credit card required, available while it lasts.

Your browser does not support video. Watch on YouTube.

1. Clone to local disk (don't open it straight from GitHub)

Studio can mount a GitHub repo directly. For a small repo that's the nicest path. For this one I cloned to disk first:

git clone https://github.com/minimal-ui-kit/material-kit-react

The reason is boring. src/ alone is ~130 files, ~245 in the whole project, spread over sections/, components/, layouts/, theme/, routes/. Opening a project means the tool has to pull the files it touches. Over the GitHub API, on demand, that's a lot of small requests. It works, just not snappy, and you can hit the rate limit if you poke around. A local folder is only the filesystem, so it's instant. For a template this size, local wins.

No npm install here. I only cloned the source. The whole point is to not build.

2. Open the folder — and let it generate a project setting

In Studio: open a Local Folder , pick the cloned material-kit-react directory. It reads the tree. Nothing installs, nothing runs, files stay on my disk. That last part matters if you don't love uploading a client's codebase somewhere just to look at it.

First time in, Studio sees there's no project setting file and pops a prompt:

This project has no CrossUI Studio setting file. We recommend auto-scanning the project to generate one first, then editing it by hand.

Hit Scan & generate . It goes through the project's own config files and writes a setting file at the root. After that, the imports the template uses everywhere just resolve, without Vite in the loop. I didn't have to tell it anything.

You can hand-edit it after. The Project Settings dialog opens right on the generated file. But the auto one was enough for everything below. Couple of seconds, still zero npm install.

3. Open src/main.tsx and hit preview

Close the Project Settings dialog and Studio opens the entry file for you. No need to go hunting in the file tree.

Here's the file you normally can't "just render":

// src/main.tsx<br>const router = createBrowserRouter([<br>Component: () => (

),<br>errorElement: ,<br>children: routesSection,<br>},<br>]);

createRoot(document.getElementById('root')!).render(

);

This is a Vite entry. createBrowserRouter + RouterProvider, and the whole app lives inside (the theme provider) and routesSection (the routes). Render this file in isolation the naive way and it blows up. No router context, no theme, no #root the way the app wants it.

It rendered anyway. I configured nothing. Opened main.tsx, hit preview, and the dashboard showed up on the canvas with the MUI theme and all.

Now return to the Design Mode. From what I can tell it picks the providers up from the entry files, so a template that does something weird at bootstrap probably needs you to point it at the right one by hand. For material-kit it just worked, and I'd guess it's because app.tsx is this plain:

// src/app.tsx<br>export default function App({ children }: AppProps) {<br>return (

{children}<br>{/* github fab */}

);

Clean entry files matter a lot here. More on that at the end.

4. Drill down — the providers follow you down (this is the real part)

The dashboard at / isn't one component. It's a lazy-loaded stack:

main.tsx (RouterProvider defined here + the detected ThemeProvider)<br>└─ routesSection (src/routes/sections.tsx)<br>└─ DashboardPage (src/pages/dashboard.tsx, lazy)<br>└─ OverviewAnalyticsView (src/sections/overview/view)<br>└─ AnalyticsWidgetSummary ×4 (src/sections/overview, the stat cards)

Ctrl+click on the canvas walks you DOWN this tree, one file at a time. The nice surprise: the provider wrapping follows you down by itself. Open the...