Component

Vue Image Editor Component

<DomImageEditor>

Image source, alt text, fit and filters for a designer inspector.

Playground

Try every prop live

Image editor playground

Adjust the props to explore sizing, content, and behaviour.

Playground.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomImageEditor } from '@getdom/studio';

const data = reactive({
		"title": "Image",
		"upload": {},
		"disabled": false
	});
</script>

<template>
	<DomImageEditor
		v-bind="data"
		@update:modelValue="data.modelValue = $event"
	/>
</template>

Reference

Props

Control props

Name	Type	TS	Default	Description
`modelValue`*	object	Record<string, unknown>	—	—
`title`	string	string	'Image'	—
`upload`	function	Function	{}	—
`disabled`	boolean	boolean	false	—

Auto-generated from Image editor.props and inline _edit hints.

Events

Name	Payload	Description
@update:modelValue	(payload `payload: unknown;` : unknown)	—
@error	(payload `payload: unknown;` : unknown)	—

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.

Scheduler

Application