DOM Studio

Visual editing for HTML and Vue

Designer

Beta

Design with the real DOM, not a picture of it. Edit website pages and the Vue output of app generators visually, then ship the same source.

Roadmap

Where this is going

Canvas is a Figma-style designer that renders real HTML instead of drawing to a canvas element. Because every layer is DOM, a design is already the shipped markup: Tailwind classes, theme tokens and live Vue components included. The canvas and the poster studio run on one editor model: a flat map of components by id, where each component type declares the properties the inspector shows and every edit is an undoable operation. The code view is two-way, so editing the Vue source updates the design. Studio moves onto the same core next, followed by live collaboration.

Complete editors

Tools

Full design apps, ready to open and use. Each one is assembled from the building blocks below, so you can copy its source as the starting point for your own.

Canvas New

A Figma-style workspace made of real HTML. Pan and zoom across artboards, design one Vue file at several widths with live components and preview data, edit its code side by side (optionally in Monaco), and export the same .vue file back.

MakeWebsite pages, app screens and Vue components

Social post studio New

Design one post and see it live at every platform size: Instagram post and story, LinkedIn, X, YouTube and link previews. Each layer pins to an edge, the centre or both sides, so a resize reflows instead of squashing.

MakeInstagram posts and stories, LinkedIn, X and YouTube graphics

Poster studio

A portrait flyer in the Social post studio: DomDesigner with two-way code, multi-select, align, rulers, image filters, every social format and HTML export.

MakeFlyers, posters and portrait graphics

Social card designer

The Social post studio starting from a link preview, with its code open. Edit the HTML or the canvas; each follows the other.

MakeOpen Graph and link-preview images

Flowchart designer

An infinite workspace powered by Vue Flow. Connect editable steps, pan, zoom, navigate with a minimap and export your graph.

MakeProcess maps, diagrams and decision flows

Nested frames & HTML import

DomDesigner on a page of nested flow, flex, grid and absolute frames. Switch a frame’s layout, move and align inside absolute ones, or paste Tailwind HTML into the code.

MakeEditable layouts from Tailwind HTML

Components the tools are made from

Building blocks

Small, focused Vue components. Use one on its own, such as a colour swatch in a settings form, or combine several into an editor of your own.

Assembly guideBuild your own designer →Working Vue examples and assembly documentation for combining these blocks into HTML editors, appearance controls and flowcharts.

Editor surface

Where people select, arrange and lay out HTML.

HTML stageDomDesignerStageAdd selection and optional movement to your own HTML. Your application owns the content and applies style changes.Layer treeDomDesignerLayersThe same tree used by the canvas, with selection, keyboard navigation and optional drag-and-drop.Frame layout editorDomFrameLayoutEditorFlow, flex, grid and absolute layout settings with an alignment pad, gap and per-side padding.

Style controls

Inspector panels that edit one CSS concern each.

Colour swatchDomColorSwatchThe theme editor’s colour control, available independently with a CSS expression and native picker.Background layersDomBackgroundEditorStack solid fills, linear gradients and radial gradients with independent opacity.CSS border editorDomBorderEditorEdit border width, style and colour with the shared CSS border control.CSS shadow editorDomShadowEditorCompose drop shadows, inner shadows and rings. Reuses the theme editor’s layer controls.Backdrop effectsDomBackdropEditorBlur and saturate the content behind translucent HTML elements.Typography editorNewDomTypographyEditorFont family, weight, size, line height, letter spacing, style, decoration, alignment and case, like Figma’s text panel.

Behaviour the tools share

Composables

The advanced behaviour of the Canvas, as composables. DomDesigner and the Social post studio are built from them, so a fix or a feature reaches every editor built on them, yours included.

Editor sessionuseEditorSessionOne document, selection and undo history that every part of an editor shares.Code syncuseCodeSync · DomCodePanelThe Vue source of the same tree, edited both ways, with selections that follow each other.In-place textuseInlineTextDouble-click text to edit it where it is, with bold, italic, underline and strike.PlacementuseLayoutGeometryDrag, X/Y/W/H, and align and distribute for one layer or several.Rich text modeltoggleMark · markOperationsMarks and edits on a paragraph as data, shared by the stage and the code panel.
How they fit together, with a small working editor →

@getdom/studio/designer

Embed the designer

The canvas is the DomDesigner component, so you can put it in your own product. Give it the components people may insert and a storage adapter: this browser by default, your API for a CMS (createHttpStorage), or project files (createFileStorage). The entry also exports the editor core: documents, operations, history, Vue import and export with source maps, and the composables above. It includes the Vue template compiler, so load it only on pages where people design.

vue
<script setup>
import * as studio from '@getdom/studio/vue';
import { DomDesigner, catalogFromExports, createHttpStorage } from '@getdom/studio/designer';

// Every DOM Studio component can be inserted; add your own to the same object.
const catalog = catalogFromExports(studio);
// Keep work in your database: GET and PUT /api/designs/:id with { value }.
const storage = createHttpStorage({ endpoint: '/api/designs' });
</script>

<template>
	<div class="h-dvh">
		<DomDesigner :catalog="catalog" :storage="storage" storage-key="home-page" title="Home page" />
	</div>
</template>

Ownership

A small, composable beta

Use the controls individually or combine them for social cards, banners and other creation tools. Normal HTML layout stays normal HTML. Enable absolute movement only on stages that need it. The host application owns undo, persistence, asset handling and publishing; the beta APIs may change.