mui.landing Open editor

ui-kit/mui

An MUI Online Editor and Playground for Material UI

Compose Material UI components in a React file and watch them render with the theme applied as you type — a live MUI playground with nothing to install.

Open the MUI editor How theming works
frameworkReact + MUI
packages@mui/material via npm
stylingtheme + sx prop
installnone
Ticket.jsx
import { Button, Chip, Stack } from '@mui/material';

export default function Ticket() {
  return (
    <Stack spacing={2} sx={{ p: 3 }}>
      <Chip label="High" color="error" size="small" />
      <Button variant="contained">Reply</Button>
    </Stack>
  );
}
mui · themed, live

01 platform

What a Material Design system gives you out of the box

MUI is the trade where you accept a design system — Material Design — and get a large, consistent component set for free. The editor is where you feel that trade, composing an interface without writing the CSS behind it.

  • A component for most things

    Buttons, inputs, dialogs, menus, tabs, a full DataGrid — the breadth is the point. You assemble an interface from parts that already agree on spacing, elevation and type.

  • Consistency by default

    Because every component reads the same theme, a screen looks coherent without you enforcing it. Change a palette value and the whole interface moves with it.

  • Real React and real MUI

    @mui/material resolves from npm through esm.sh and runs against the real React runtime, so behavior matches the MUI docs rather than a lookalike.

  • A project, not a snippet

    Split components across files, add TypeScript, keep a theme module, and commit with Git — the shape of an actual MUI app, not a single pen.

02 deep dive

One theme, applied to every component

The reason a design system pays off is the theme, and the editor makes changing it a live operation rather than a rebuild.

ThemeProvider sets the tone. Wrap the app in a theme and every component reads it — palette, typography, shape and spacing — so a brand color is set once and applied everywhere.

Components respond immediately. Change a primary color or the default border radius and the live preview redraws every button and card that used it, which is the fastest way to tune a look.

Dark mode is a theme, not a rewrite. Flip the palette mode and MUI recomputes surfaces and contrast, so you design light and dark from the same definition.

provider
ThemeProvider
palette
primary, error, mode
shape
radius, spacing
mode
light / dark
theme.jsx
import { createTheme, ThemeProvider } from '@mui/material';

const theme = createTheme({
  palette: { primary: { main: '#6d28d9' }, mode: 'dark' },
  shape: { borderRadius: 12 },
});

// <ThemeProvider theme={theme}> … </ThemeProvider>
one theme, whole app themed

03 features

What ships with an MUI project

Everything below is on the moment you open the MUI editor, which starts as a themed support inbox — a ticket list, priority chips and tab filters.

  • npm without a wait

    @mui/material, @mui/icons-material and add-ons resolve through esm.sh into a native import map, ready on the next render with no node_modules.

  • Live preview, four ways

    Full width, split beside the code, in device frames, or its own tab — so a responsive layout is something you check rather than assume.

  • The VS Code engine

    Monaco with IntelliSense against MUI's types, multi-cursor and the command palette — what long JSX trees of components need to stay editable.

  • TypeScript included

    MUI ships types; write .tsx for autocomplete on props and the theme, stripped on the fast path so it costs nothing at runtime.

  • The sx prop

    One-off styling with theme-aware shorthand, right on the component, so a tweak does not need a separate stylesheet.

  • Git and export

    Commit history in the browser through isomorphic-git, and export the project as a zip that runs anywhere.

04 deep dive

Styling with the sx prop, not a stylesheet

MUI's answer to one-off styling is the sx prop, and it is a large part of why an MUI project needs so little CSS of its own.

sx is theme-aware shorthand. sx={{ p: 3, mt: 2 }} reads spacing from the theme, so padding and margins stay on the system's scale instead of being arbitrary pixels.

It lives on the component. The style sits next to the element it styles rather than in a distant file, which keeps a component readable and its layout obvious.

It still escapes when needed. Full CSS values, breakpoints and pseudo-selectors all work inside sx, so the shorthand never becomes a ceiling — you drop to raw CSS in the same place.

spacing
sx={{ p: 3 }}
reads
the theme scale
breakpoints
responsive values
escape
any CSS value
sx.jsx
<Box sx={{
  p: { xs: 2, md: 4 },
  bgcolor: 'background.paper',
  borderRadius: 2,
}}>
  content
</Box>
responsive padding from the theme

05 workflow

From an import to a themed component

No install, no bundler, no dev server — the whole loop from importing MUI to a themed, responsive component.

mui-inbox — xcodx
  • new project → MUI Support Inbox
  • created App.jsx · @mui/material via esm.sh
  • set palette.primary + mode: 'dark'
  • preview: every component re-themed
  • add a DataGrid, install @mui/x-data-grid
  • import map updated · sortable table renders
  • git commit -m "dark theme + grid"
  • [main 3a91f0e] dark theme + grid · 3 files

  • Nothing to set up

    No webpack, no dev server, no local MUI install — the components render the moment you save.

  • The same loop on a tablet

    React and MUI run client-side, so an iPad renders the interface the same way a laptop does.

  • Share by link

    Send a live preview URL and the recipient sees the themed, interactive interface, not a screenshot.

06 ecosystem

MUI among the component kits

MUI is one of several component systems the editor runs — the same tab compiles React, Vue and the UI kit of your choice, per file.

  • React
  • Vue
  • Angular
  • Svelte
  • SolidJS
  • Lit
  • HTMX
  • Vite
  • TypeScript
  • JavaScript
  • HTML
  • CSS
  • SCSS
  • Less
  • Pug
  • Tailwind
  • Bootstrap
  • Vuetify
  • Ant Design
  • shadcn/ui
  • Phaser
  • Node.js
  • Python
  • Java
  • C++
  • C#
  • Go
  • Rust
  • Ruby
  • PHP
  • Kotlin
  • Swift
  • SQL
  • Bash

07 languages

What the editor compiles around MUI

An MUI project sits beside everything else the editor compiles in the browser, renders natively, or runs on demand.

Compiled in your browser11

Zero build step. Transform runs on a Web Worker, so typing never blocks.

  • JSX
  • TSX
  • TypeScript
  • Vue SFC
  • Svelte
  • Angular (JIT)
  • SolidJS
  • SCSS
  • Sass
  • Less
  • Pug

Rendered natively8

Straight to the live preview, no transform in the way.

  • HTML
  • CSS
  • JavaScript
  • JSON
  • Markdown
  • Jupyter (.ipynb)
  • SVG
  • YAML

Executed on demand22

70+ languages run through a self-hosted Piston engine. stdout, stderr, images and tracebacks land in the console.

  • Python
  • Java
  • C
  • C++
  • C#
  • Go
  • Rust
  • Ruby
  • PHP
  • Kotlin
  • Swift
  • Lua
  • Scala
  • Perl
  • Haskell
  • Elixir
  • Dart
  • R
  • Julia
  • SQLite
  • Bash
  • PowerShell

08 questions

MUI in the browser — common questions

Do I need to install anything to use MUI?

No. @mui/material resolves from npm through esm.sh into a native import map, so importing components works with no webpack, no dev server and no node_modules. Opening the editor is the whole setup.

Is this the real Material UI, or a subset?

The real library, running against the real React runtime. Components, the theme, the sx prop and behavior match the MUI documentation, because it is the published @mui/material package resolved from npm.

Can I customize the theme live?

Yes. Wrap the app in a ThemeProvider and edit the palette, typography, shape or spacing; the preview redraws every component that reads the theme, so tuning a brand color or dark mode is a live operation.

Can I use MUI icons and the DataGrid?

Yes. Install @mui/icons-material and @mui/x-data-grid from the npm panel and they resolve through esm.sh like any package, so icons and the sortable, filterable grid work alongside the core components.

Does it work with TypeScript?

Yes. MUI ships type definitions, so writing .tsx gives autocomplete on component props and the theme, with the types stripped on the same fast pass that compiles the code.

Can I split an MUI app across files?

Yes. Projects are multi-file, so components, a theme module and hooks live in their own files with a tree and tabs, and the whole thing commits with Git.

Do I need to install anything to use XCODX Studio?

No. XCODX Studio is a browser-based IDE — the editor, the compilers and the preview all run client-side. There is no download, no package manager to set up and no configuration file to write. Opening the editor is the whole setup step.

Where is my code stored?

In your own browser. Projects, file history and Git objects live in local storage on your device and are never uploaded to a server. That also means XCODX works offline: it is a Progressive Web App, so you can install it and keep coding with no connection.

Is XCODX Studio free?

Yes. The editor, the live preview, the 70+ language runtimes, npm installs, Git and the integrated terminal are all free to use.

Can I use XCODX on a tablet or Chromebook?

Yes. The editor is a responsive web app, so a Chromebook, an iPad or an Android tablet gets the same compilers and the same preview a laptop does — there is no desktop-only build, because there is no build to install at all. The layout adapts to the screen rather than shrinking a desktop UI into it.

Can I export a project or move it to my own machine?

Yes. Export the whole project as a zip with its folder structure intact and open it locally, or commit it and push. It is ordinary source on disk from that point on — no proprietary format and no lock-in, which is also why importing an existing repository from GitHub works the same way in reverse.

Nothing to install

Open the MUI editor now

A themed Material UI interface on screen in under a minute — live preview, npm, with no account wall and nothing to install.

Open the MUI editor Browse the docs