DOM Studio

Component

Vue 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.

Five balanced sizes.

PressedShow native press feedback for an external activation, such as a keyboard shortcut. Does not represent toggle selection.
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.

Canvas

Build full layouts in the canvas

The canvas gives you a full-width designer with every component to insert, layers, an inspector generated from these same specs, and a two-way Vue code view that keeps the stage and source selected together.

Open the canvas →

Spec

Author a playground in a few lines

js
const cardSpec = {
  id: 'card',
  label: 'Card',
  component: 'div',
  props: { class: 'rounded-3xl border bg-canvas 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

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.