elementplus.landing Open editor

ui-kit/element-plus

An Element Plus Playground and Online Vue Editor

Build a Vue 3 interface from Element Plus components — tables, forms and dialogs — and watch it render live as you edit, with npm and nothing to install.

Open the Element Plus editor How it fits Vue 3
frameworkVue 3
focusdesktop interfaces
packageselement-plus via npm
installnone
App.vue
<script setup>
import { ref } from 'vue';
const query = ref('');
</script>

<template>
  <el-input v-model="query" placeholder="Search" />
  <el-table :data="filtered" />
</template>
element plus · live

01 platform

What Element Plus is for in a Vue 3 app

Element Plus is a component library aimed squarely at data-dense desktop interfaces — admin panels, dashboards, back-office tools — for Vue 3. The editor is where you assemble one from its parts without a build step in the way.

  • Built for desktop UIs

    Tables, forms, date pickers, trees and pagination are its center of gravity, so the admin-style screens Element Plus is chosen for come together quickly.

  • Vue 3, script setup

    Components bind to reactive state written in <script setup>, so an el-table follows a ref and an el-form validates against a reactive model with no glue code.

  • Real Element Plus

    element-plus resolves from npm through esm.sh and runs against Vue 3, so components and props match the Element Plus docs rather than a lookalike.

  • A project, not a snippet

    Split components across .vue files, keep a store, and commit with Git — the shape of an actual Element Plus app.

02 deep dive

Components that read your <script setup>

Element Plus is at its best when components bind directly to Vue's reactivity, and the editor shows that binding live.

v-model two-way binds. el-input and el-select bind to a ref, so typing updates state and state updates the field, with the preview reflecting both instantly.

Tables follow the data. el-table renders whatever array you pass as :data, so sorting, filtering or adding a row is a change to the reactive source, not to the table.

Forms validate against a model. el-form takes a reactive model and a rules object, so validation lives with the data rather than being wired per field.

bind
v-model + ref
table
:data from a ref
form
model + rules
reactivity
Vue 3
form.vue
<el-form :model="form" :rules="rules">
  <el-form-item label="Email" prop="email">
    <el-input v-model="form.email" />
  </el-form-item>
</el-form>
a validated reactive form

03 features

What ships with an Element Plus project

Everything below is on the moment you open the Element Plus editor, which starts as a Vue 3 inventory app with a searchable el-table and a reactive store.

  • npm without a wait

    element-plus and its icons 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 dense table or form is something you check at real sizes.

  • The VS Code engine

    Monaco with Vue-aware editing for the .vue files an Element Plus app is made of.

  • TypeScript included

    Write <script setup lang="ts"> for typed models and props, stripped on the fast path.

  • A reactive store

    Keep shared state in a reactive module or Pinia and bind components to it, the way a real admin app does.

  • Git and export

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

04 deep dive

Forms and tables, the desktop-app parts

The parts of Element Plus people actually reach for are the ones desktop software is made of, and they run here against real reactivity.

Tables that do the work. el-table handles sorting, fixed columns, selection and custom cell templates, so a data grid is configuration rather than a component you assemble.

Forms with real validation. Rules run on blur or submit and surface messages inline, so you test the validation flow in the preview rather than imagining it.

Overlays and feedback. Dialogs, drawers, message boxes and notifications come with the library, so the interactions an admin tool needs are there without a second dependency.

grid
el-table
forms
el-form + rules
overlays
dialog, drawer
feedback
message, notify
table.vue
<el-table :data="rows" @selection-change="onSelect">
  <el-table-column type="selection" />
  <el-table-column prop="name" label="Name" sortable />
  <el-table-column prop="qty" label="Qty" sortable />
</el-table>
sortable columns, selection

05 workflow

From a reactive store to an el-table

No install, no bundler, no dev server — the whole loop from a reactive store to a searchable, sortable table.

elementplus-inventory — xcodx
  • new project → Element Plus
  • created App.vue · element-plus via esm.sh
  • bind el-input to a query ref
  • el-table filters as you type
  • add sortable columns + selection
  • sort and multi-select working live
  • git commit -m "searchable inventory table"
  • [main 2c7f0b8] searchable inventory table · 3 files

  • Nothing to set up

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

  • The same loop on a tablet

    Vue and Element Plus 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 table.

06 ecosystem

Element Plus among the component kits

Element Plus 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 Element Plus

An Element Plus 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

Element Plus in the browser — common questions

Do I need to install anything to use Element Plus?

No. The element-plus 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 Element Plus on Vue 3?

Yes, the published element-plus package running against Vue 3, so components, props and behavior match the Element Plus documentation rather than a lookalike.

Does el-table handle sorting and selection?

Yes. el-table supports sortable columns, row selection, fixed columns and custom cell templates, all bound to a reactive :data source, so a data grid is configuration you can shape live in the preview.

Can I build validated forms?

Yes. el-form takes a reactive model and a rules object, validating on blur or submit and surfacing messages inline, so you test the whole validation flow in the preview.

Does it work with <script setup> and TypeScript?

Yes. Components bind to state in <script setup>, and <script setup lang="ts"> gives typed models and props, with the types stripped on the fast pass that compiles the SFC.

Can I split the app across .vue files?

Yes. Projects are multi-file, so components and a store 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 Element Plus editor now

A Vue 3 admin interface on screen in under a minute — searchable tables and forms, live, with no account wall and nothing to install.

Open the Element Plus editor Browse the docs