mantine.landing Open editor

ui-kit/mantine

A Mantine Playground and Online Editor for React

Build a React interface from Mantine components and its hooks and watch it render live as you type, with npm, TypeScript and nothing to install.

Open the Mantine editor The hooks that come with it
frameworkReact + Mantine
extrashooks library
packages@mantine via npm
installnone
Habit.jsx
import { Button, Card, Text } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

export default function Habit() {
  const [open, { toggle }] = useDisclosure(false);
  return (
    <Card withBorder>
      <Text>{open ? 'Done today' : 'Not yet'}</Text>
      <Button mt="sm" onClick={toggle}>Toggle</Button>
    </Card>
  );
}
mantine · components + hooks, live

01 platform

What Mantine's hooks add to its components

Mantine is two things at once — a large React component set and one of the biggest hooks libraries around. The combination is the appeal, and the editor is where you feel it: a component and the hook that drives it, side by side.

  • Components and hooks together

    @mantine/core gives the components and @mantine/hooks gives dozens of utilities — useDisclosure, useForm, useLocalStorage — so the interactive plumbing ships with the UI rather than being rebuilt.

  • Style props on components

    Spacing, color and layout are props (mt, c, p) read from the theme, so a component's look lives with its markup on a consistent scale.

  • Real React and Mantine

    @mantine/core resolves from npm through esm.sh and runs against the real React runtime, so components, props and hooks match the Mantine docs.

  • A project, not a snippet

    Split components across files, keep a theme, add TypeScript, and commit with Git — the shape of an actual Mantine app.

02 deep dive

The hooks that come with the components

Mantine's hooks library is a large part of why teams pick it, and it is one import away in the editor.

State hooks handle UI plumbing. useDisclosure drives modals and drawers, useToggle and useCounter cover small state, so the boilerplate around a component is a hook rather than hand-written state.

Form handling is built in. useForm from @mantine/form manages values, validation and submission, so a form is a hook and a schema rather than controlled inputs wired one by one.

Browser hooks are there too. useLocalStorage, useMediaQuery, useHotkeys and useIntersection wrap the platform, so an app reacts to storage, breakpoints and keys without bespoke effects.

ui state
useDisclosure
forms
useForm
storage
useLocalStorage
platform
useMediaQuery
form.jsx
import { useForm } from '@mantine/form';

const form = useForm({
  initialValues: { email: '' },
  validate: { email: (v) => (/^\S+@\S+$/.test(v) ? null : 'Invalid') },
});
a form as a hook + schema

03 features

What ships with a Mantine project

Everything below is on the moment you open the Mantine editor, which starts as a weekly habit tracker built from components and hooks.

  • npm without a wait

    @mantine/core, @mantine/hooks and @mantine/form 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, in device frames or its own tab — so a responsive component is something you check at each breakpoint.

  • The VS Code engine

    Monaco with IntelliSense against Mantine's types, multi-cursor and the command palette.

  • TypeScript included

    Mantine ships types; write .tsx for autocomplete on props, hooks and the theme, stripped on the fast path.

  • Theme and color scheme

    MantineProvider sets a theme with colors, spacing and radius, and light and dark come from one definition.

  • Git and export

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

04 deep dive

Theming with the MantineProvider

Mantine's look is set once at the provider and read everywhere, and the editor makes that a live thing to tune.

The provider holds the theme. MantineProvider takes a theme with a color palette, spacing scale, radius and fonts, and every component and style prop reads it, so the app stays consistent from one definition.

Color scheme is built in. Light and dark are part of the theme and switch at runtime, so both come from one set of values rather than duplicated styles.

Style props reference the scale. mt="sm", c="blue.6" and p="md" resolve to theme tokens, so spacing and color stay on the system rather than being arbitrary.

provider
MantineProvider
palette
colors, primaryColor
scheme
light / dark
props
mt, c, p (tokens)
theme.jsx
import { MantineProvider, createTheme } from '@mantine/core';

const theme = createTheme({
  primaryColor: 'violet', defaultRadius: 'md',
});
// <MantineProvider theme={theme} defaultColorScheme="dark">
one theme, whole app

05 workflow

From a component to a working form

No install, no bundler, no dev server — the whole loop from a first component to a validated form driven by a hook.

mantine-habits — xcodx
  • new project → Mantine Habit Tracker
  • created App.jsx · @mantine/core via esm.sh
  • add useForm with a validate schema
  • preview: form validates on submit
  • set primaryColor violet, dark scheme
  • whole app re-themed from the provider
  • git commit -m "validated form + dark theme"
  • [main 8d1f0c4] validated form + dark theme · 3 files

  • Nothing to set up

    No dev server and no local Mantine install — the components render the moment you save.

  • The same loop on a tablet

    React and Mantine 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 uses the interactive interface.

06 ecosystem

Mantine among the component kits

Mantine is one of several component systems the editor runs — the same tab compiles React with 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 Mantine

A Mantine 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

Mantine in the browser — common questions

Do I need to install anything to use Mantine?

No. @mantine/core and @mantine/hooks resolve from npm through esm.sh into a native import map and run against the real React runtime, so components and hooks work with no webpack, no dev server and no node_modules. Opening the editor is the whole setup.

Is this real Mantine?

Yes, the published @mantine packages on React, so components, style props and the hooks match the Mantine documentation rather than a lookalike.

Do the Mantine hooks work here?

Yes. useDisclosure, useForm, useLocalStorage, useMediaQuery and the rest run against the real React runtime, so a modal driven by a hook or a validated form behaves exactly as the docs describe.

How does theming work?

MantineProvider holds a theme — palette, spacing, radius, fonts — that every component and style prop reads, and light and dark are part of it, so setting the primary color or the color scheme re-themes the whole app live in the preview.

Can I use TypeScript with Mantine?

Yes. Mantine ships type definitions, so .tsx gives autocomplete on props, hooks and the theme, with the types stripped on the fast pass that compiles the code.

Can I split a Mantine app across files?

Yes. Projects are multi-file, so components, a theme and hooks live in their own files with a tree and tabs, and the whole app 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 Mantine editor now

A themed React interface with a working form on screen in under a minute — components and hooks, live, with no account wall and nothing to install.

Open the Mantine editor Browse the docs