DOM Studio

Component

Playground

<DemoInspector>

A live inspector. Click a component on the stage, edit its properties in the form, watch the change land instantly.

Demo

Single component

Button

Inspector

Live properties

Layers

Selected

Button

Click Pick in the inspector, then click the button on the stage to select it. Edit variant, size, or label — the stage updates live.

Auto-schema

Schema inferred from the component's props

Button (no schema declared)

Inspector

Live properties

Layers

Selected

Button (auto)

The HTML element or component to render. Use 'router-link' or 'a' to render a link.

Visual style — pick the role this button plays in the layout.

Three balanced sizes.

LoadingShow a spinner and block interaction.
DisabledDisable the button — non-interactive, lowered opacity.

Any utility classes — applied to the rendered element.

Same component, but the spec doesn't declare a schema. The inspector walks DomButton.props, looks up registry hints (variant + size), and adds a Tailwind classes editor at the end — automatically.

Demo

Nested arrangement

Pricing card

Lifetime

Pro

$149 once · forever yours

Inspector

Live properties

Layers

Selected

Card

This node has no editable properties.

Multiple selectable nodes — pick any layer in the stage or use the layer list to drill in.

Studio

Build full layouts with the Studio

The dedicated Studio page gives you a full-width canvas with a palette of every component, drag-and-drop with drop indicators, a Data / HTML / Renderer tab bar, and lossless round-trip through <DomRenderer>.

Open the Studio →

Spec

Author a playground in a few lines

const cardSpec = {
  id: 'card',
  label: 'Card',
  component: 'div',
  props: { class: 'rounded-3xl border bg-background p-7 …' },
  children: [
    {
      id: 'title',
      label: 'Title',
      component: 'h3',
      text: 'Pro',
      schema: [{ key: 'text', target: 'text', type: 'string' }],
    },
    {
      id: 'cta',
      label: 'CTA Button',
      component: DomButton,
      props: { variant: 'primary', size: 'md' },
      text: 'Get access',
      schema: [
        { key: 'variant', type: 'select',
          options: ['primary', 'secondary', 'ghost', 'danger'] },
        { key: 'size',    type: 'select', options: ['sm', 'md', 'lg'] },
        { key: 'text',    target: 'text', type: 'string' },
      ],
    },
  ],
};

Usage

Vue

<script setup>
import DemoInspector from '@getdom/inspector';
import { DomButton } from '@getdom/studio/vue';
import { markRaw } from 'vue';

const spec = {
  id: 'btn',
  label: 'Button',
  component: markRaw(DomButton),
  props: { variant: 'primary', size: 'md' },
  text: 'Click me',
  schema: [
    { key: 'variant', type: 'select', options: ['primary', 'secondary'] },
    { key: 'size',    type: 'select', options: ['sm', 'md', 'lg'] },
    { key: 'text',    target: 'text', type: 'string' },
  ],
};
</script>

<template>
  <DemoInspector :spec="spec" title="Button playground" />
</template>

Field types

string

Single-line text input.

text

Multi-line textarea.

number

Numeric input with optional min/max/step.

boolean

Renders the DomToggle switch.

select

Pill group of options.

color

Native color picker plus hex input.