antd.landing Open editor

ui-kit/ant-design

An Ant Design Playground and Online Editor for React

Compose an enterprise React interface from Ant Design components — tables, forms and layouts — and watch it render live as you type, with nothing to install.

Open the Ant Design editor How theming works
frameworkReact + antd
themingdesign tokens
packagesantd via npm
installnone
App.jsx
import { Table, Tag, Button, Space } from 'antd';

const columns = [
  { title: 'Seat', dataIndex: 'seat' },
  { title: 'Status', dataIndex: 'status',
    render: (s) => <Tag color={s === 'active' ? 'green' : 'default'}>{s}</Tag> },
];

export default () => <Table columns={columns} dataSource={rows} />;
antd · enterprise components, live

01 platform

What Ant Design is built for

Ant Design is a component system built for data-dense enterprise software — admin consoles, dashboards, internal tools. The editor is where you assemble one of those interfaces from antd's parts without a build step in front of it.

  • Enterprise components

    A serious Table, Form, DatePicker, Transfer, Tree and Descriptions — the components back-office software is made of, tuned for density and data rather than marketing pages.

  • Design tokens

    antd v5 is themed by tokens — color, radius, spacing — read through ConfigProvider, so a whole app re-themes from one object rather than overridden CSS.

  • Real React and antd

    antd resolves from npm through esm.sh and runs against the real React runtime, so components and props match the Ant Design docs.

  • A project, not a snippet

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

02 deep dive

The Table, forms and layout

A few antd components carry most of an admin app, and they are live to configure in the editor.

The Table is the centerpiece. Columns with custom renderers, sorting, filtering, pagination, row selection and expandable rows are all props, so a data grid is configuration rather than a component you build.

Forms are declarative. Form with Form.Item and rules validates a model and lays fields out consistently, so a complex form is a description rather than wiring.

Layout composes the shell. Layout with Sider, Header and Content, plus Menu, builds the console frame these apps share, so navigation and structure come for free.

grid
Table + columns
forms
Form.Item + rules
shell
Layout / Sider / Menu
feedback
message, notification
form.jsx
<Form onFinish={submit}>
  <Form.Item name="email" rules={[{ required: true, type: 'email' }]}>
    <Input placeholder="Email" />
  </Form.Item>
  <Button htmlType="submit" type="primary">Save</Button>
</Form>
declarative form with rules

03 features

What ships with an Ant Design project

Everything below is on the moment you open the Ant Design editor, which starts as a dark-themed enterprise dashboard with a seats table and segmented filters.

  • npm without a wait

    antd and @ant-design/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 console layout is something you check at real sizes.

  • The VS Code engine

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

  • TypeScript included

    antd ships types; write .tsx for autocomplete on component props and the theme tokens, stripped on the fast path.

  • Dark theme via tokens

    ConfigProvider with the dark algorithm re-themes the whole app, so light and dark come from one token set.

  • Git and export

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

04 deep dive

Design tokens and a dark theme via ConfigProvider

antd v5's theming is its token system, and the editor makes changing those tokens a live operation.

Tokens drive everything. ConfigProvider takes a theme with tokens like colorPrimary and borderRadius, and every component reads them, so a brand color or a rounder look is one change applied everywhere.

Algorithms flip the mode. antd ships darkAlgorithm and compactAlgorithm, so dark mode and a denser layout are a switch on the theme rather than overridden styles.

Component tokens go deeper. Per-component token overrides tune just the Table or just the Button when the global tokens are not enough, without dropping to CSS.

provider
ConfigProvider
tokens
colorPrimary, radius
algorithms
dark, compact
per-component
token overrides
theme.jsx
import { ConfigProvider, theme } from 'antd';

<ConfigProvider theme={{
  algorithm: theme.darkAlgorithm,
  token: { colorPrimary: '#6d28d9', borderRadius: 10 },
}}> … </ConfigProvider>
one token set, whole app

05 workflow

From ConfigProvider to a sortable table

No install, no bundler, no dev server — the whole loop from a theme token to a themed, sortable enterprise table.

antd-dashboard — xcodx
  • new project → Ant Design
  • created App.jsx · antd via esm.sh
  • set token.colorPrimary + darkAlgorithm
  • preview: whole dashboard re-themed
  • add sortable columns + a Segmented filter
  • table sorts, filter switches views
  • git commit -m "dark tokens + sortable table"
  • [main 6b0e2a1] dark tokens + sortable table · 3 files

  • Nothing to set up

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

  • The same loop on a tablet

    React and antd 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 dashboard.

06 ecosystem

Ant Design among the component kits

Ant Design 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 Ant Design

An Ant Design 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

Ant Design in the browser — common questions

Do I need to install anything to use Ant Design?

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

Is this real Ant Design v5?

Yes, the published antd package on React, so components, props and the design-token theming match the Ant Design documentation rather than a lookalike.

Does the Table support sorting, filtering and selection?

Yes. antd's Table takes columns with custom renderers, sorters, filters, pagination, row selection and expandable rows as props, so a data grid is configuration you shape live in the preview.

How does theming work with design tokens?

ConfigProvider takes a theme object of tokens like colorPrimary and borderRadius that every component reads, plus darkAlgorithm and compactAlgorithm for mode and density, so the whole app re-themes from one object in the live preview.

Can I use TypeScript with antd?

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

Can I split an antd 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 Ant Design editor now

A themed enterprise React dashboard on screen in under a minute — design tokens, live preview, with no account wall and nothing to install.

Open the Ant Design editor Browse the docs