UI designer

Vue Designer Stage Component

Beta

Selection and optional absolute positioning over your own HTML.

Try it

Drag this HTML heading

Use in your application

Mark slot elements with unique data-designer-id values. v-model controls selection. positioning enables drag and resize and emits style-change { id, style }; apply it to your model. Use positioned containing blocks within the stage. Rotations and independently transformed ancestors are not supported in this beta. interactive passes clicks through. Apps own undo, persistence and export.

vue

<DomDesignerStage v-model="selected" positioning @style-change="applyStyle">
	<h2 data-designer-id="title" :style="titleStyle">Real HTML</h2>
</DomDesignerStage>

Open the complete social-card example →