MUI online editor

Write, Run & Share MUI code online using OneCompiler's MUI online editor for free. It's one of the robust, feature-rich online editors for MUI. Getting started with the OneCompiler's MUI online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'MUI' and start writing code to learn and test online without worrying about tedious process of installation.

About MUI

MUI (formerly Material UI) is a React component library that implements Google's Material Design. It ships ready-made components like buttons, text fields, dialogs, and data grids that come styled and accessible by default. Styling runs on Emotion under the hood, and you adjust the look through a central theme or the sx prop on any component.

Syntax help

Importing components

Each component lives in its own path, so you can import it directly or pull several from the package root. Path imports keep things explicit and play well with the playground.

import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';

// or grouped from the root
import { Button, TextField } from '@mui/material';

Icons come from a separate package, one import per icon:

import DeleteIcon from '@mui/icons-material/Delete';

Buttons

Buttons take a variant (text, outlined, or contained), a color, and slots for icons. The click handler is a normal onClick.

import Button from '@mui/material/Button';
import DeleteIcon from '@mui/icons-material/Delete';

<Button variant="contained" color="primary">Save</Button>
<Button variant="outlined" startIcon={<DeleteIcon />}>Delete</Button>

Layout with Stack and Box

Stack lines children up in a row or column with consistent spacing. Box is a plain wrapper that accepts the sx prop, so it's handy for one-off layout.

import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';

<Stack spacing={2} direction="row">
  <Button>One</Button>
  <Button>Two</Button>
</Stack>

<Box sx={{ p: 3, bgcolor: 'grey.100', borderRadius: 2 }}>
  Padded box
</Box>

The sx prop

sx is a shortcut for styling any MUI component. It reads theme values (spacing, colors, breakpoints) so p: 2 becomes the theme's spacing unit times two, and you can nest responsive values.

<Box
  sx={{
    p: 2,
    color: 'primary.main',
    fontSize: { xs: 14, md: 18 },
    '&:hover': { color: 'secondary.main' },
  }}
>
  Responsive, theme-aware styles
</Box>

Text fields and forms

TextField bundles the label, input, and helper text together. Control it with value and onChange like any React input.

import TextField from '@mui/material/TextField';
import { useState } from 'react';

function NameField() {
  const [name, setName] = useState('');
  return (
    <TextField
      label="Your name"
      value={name}
      onChange={(e) => setName(e.target.value)}
      size="small"
    />
  );
}

Typography

Typography renders text at the right size and weight for a given role. The variant picks the style, and it maps to a sensible HTML tag.

import Typography from '@mui/material/Typography';

<Typography variant="h4">Page title</Typography>
<Typography variant="body1" color="text.secondary">
  Supporting copy in a muted color.
</Typography>

Theming

Build a theme with createTheme and pass it to ThemeProvider near the top of your app. Every component reads from it, so changing the palette or typography updates the whole UI in one place.

import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    mode: 'light',
    primary: { main: '#5c6ac4' },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* your components */}
    </ThemeProvider>
  );
}