vuetify.landing Open editor

ui-kit/vuetify

A Vuetify Playground and Online Editor for Vue

Compose a Vue 3 interface from Vuetify Material Design components and watch it render with the theme applied as you type, with npm and nothing to install.

Open the Vuetify editor How theming works
frameworkVue 3 + Vuetify
designMaterial Design 3
packagesvuetify via npm
installnone
App.vue
<template>
  <v-app>
    <v-container>
      <v-card title="Release" subtitle="v7.6">
        <v-card-text>Shipped today.</v-card-text>
        <v-btn color="primary">View</v-btn>
      </v-card>
    </v-container>
  </v-app>
</template>
vuetify · themed, live

01 platform

What Material Design brings to a Vue app

Vuetify is the Material Design system for Vue — a large, consistent component set that agrees on spacing, elevation and color. The editor is where you assemble an interface from it without writing the CSS behind it.

  • A component for most things

    Cards, data tables, dialogs, navigation drawers, forms and the full Material set, so a screen is assembled from parts that already look coherent together.

  • The v-app shell

    v-app provides the layout context Vuetify components expect — theme, breakpoints and layout regions — so app bars, drawers and content compose the way Material apps do.

  • Real Vue 3 and Vuetify

    vuetify resolves from npm through esm.sh and runs against Vue 3, so components and props match the Vuetify docs rather than a lookalike.

  • A project, not a snippet

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

02 deep dive

The v-app shell and the data table

Two components carry a lot of a Vuetify app — the shell and the table — and both are live to shape in the editor.

v-app frames everything. It establishes the theme and layout so v-app-bar, v-navigation-drawer and v-main slot into the regions Material Design defines, rather than being positioned by hand.

v-data-table is the workhorse. Sorting, pagination, search and custom cell slots come built in, so a data-dense screen is configuration rather than a table you build from scratch.

Props do the styling. color, variant, density and elevation are props read from the theme, so a component's look lives with its markup and stays on the Material scale.

shell
v-app / v-main
table
v-data-table
styling
props from theme
layout
v-container / v-row
table.vue
<v-data-table
  :headers="headers"
  :items="releases"
  :search="query"
  density="compact"
/>
sortable, searchable, built in

03 features

What ships with a Vuetify project

Everything below is on the moment you open the Vuetify editor, which starts as a Material Design release board with a data table and a dialog form.

  • npm without a wait

    vuetify and its peers 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 Material layout is something you check at each breakpoint.

  • The VS Code engine

    Monaco with Vue-aware editing, multi-cursor and the command palette for the .vue files a Vuetify app is made of.

  • TypeScript included

    Write <script setup lang="ts"> for typed props and stores, stripped on the fast path so it costs nothing at runtime.

  • Theme and dark mode

    A Vuetify theme defines light and dark palettes, so both come from one definition and switch without duplicated styles.

  • Git and export

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

04 deep dive

Theming Vuetify with its design tokens

A design system is only consistent because of its theme, and Vuetify's is a live thing to shape here.

Themes name your colors. A Vuetify theme defines primary, surface, error and the rest, and components read them by name, so a brand color is set once and applied everywhere.

Light and dark are two themes. Both are declared together and switched at runtime, so you design them side by side rather than maintaining two stylesheets.

Defaults cut repetition. Vuetify's defaults set a component's baseline props — every v-btn flat, every v-text-field outlined — so a consistent look is configuration, not a prop repeated on every element.

palette
primary, surface
modes
light / dark
defaults
per-component
reads
components by name
vuetify.js
createVuetify({
  theme: {
    defaultTheme: 'dark',
    themes: { dark: { colors: { primary: '#6d28d9' } } },
  },
});
one theme, whole app

05 workflow

From v-app to a themed data table

No install, no bundler, no dev server — the whole loop from the app shell to a themed, sortable data table.

vuetify-board — xcodx
  • new project → Vuetify
  • created App.vue · vuetify via esm.sh
  • set theme.primary + defaultTheme dark
  • preview: every component re-themed
  • add :search to the v-data-table
  • table filters as you type
  • git commit -m "dark theme + search"
  • [main 4e1a90c] dark theme + search · 3 files

  • Nothing to set up

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

  • The same loop on a tablet

    Vue and Vuetify 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 board.

06 ecosystem

Vuetify among the component kits

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

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

Vuetify in the browser — common questions

Do I need to install anything to use Vuetify?

No. The vuetify package resolves from npm through esm.sh into a native import map and runs against Vue 3, so components work with no webpack, no dev server and no node_modules. Opening the editor is the whole setup.

Is this real Vuetify 3?

Yes, the published vuetify package on Vue 3, so components, props, the v-app shell and the theme match the Vuetify documentation rather than a lookalike.

Does the v-data-table work with sorting and search?

Yes. Sorting, pagination, search and custom cell slots are built into v-data-table, so a data-dense screen is configuration — bind headers, items and a search string and it works live.

Can I customize the theme and dark mode?

Yes. A Vuetify theme defines light and dark palettes together and components read them by name, so setting primary or switching the default theme re-themes the whole interface live in the preview.

Can I write Vuetify components in TypeScript?

Yes. Use <script setup lang="ts"> for typed props and stores; the types are stripped on the fast pass that compiles the SFC, so a typed component adds no runtime cost.

Can I split a Vuetify app across .vue files?

Yes. Projects are multi-file, so components, a theme module and stores 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 Vuetify editor now

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

Open the Vuetify editor Browse the docs