Vue Reference

The @pexelize/vue-editor package provides a Vue 3 component and composable for embedding the Pexelize editor.

Installation

npm install @pexelize/vue-editor @pexelize/editor-types

Quick Start

<script setup lang="ts">
import { PexelizeEditor } from '@pexelize/vue-editor';
import type { DesignJson, EditorOptions } from '@pexelize/editor-types';

const options: EditorOptions = {
  user: { id: 'user-1', name: 'Jane', email: 'jane@example.com' },
  appearance: { theme: 'light' },
};

function onReady() {
  console.log('Editor ready');
}

function onChange(design: DesignJson) {
  console.log('Changed', design);
}
</script>

<template>
  <PexelizeEditor
    :options="options"
    style="height: 100vh"
    @ready="onReady"
    @change="onChange"
  />
</template>

Component Props

Prop	Type	Required	Description
options	EditorOptions	Yes	Editor configuration. See Configuration.
design	DesignJson	No	Initial design JSON to load.

Component Emits

Event	Payload	Description
ready	—	Editor is fully initialized.
load	DesignJson	A design was loaded.
change	DesignJson	The design changed.
error	EditorError	An editor error occurred.
moduleSave	ModuleSaveData	A module was saved.
preview	PreviewData	The user clicked preview.
contentDialog	ContentDialogData	The content dialog opened.

Exposed Methods

Access methods via template ref:

<script setup lang="ts">
import { ref } from 'vue';
import { PexelizeEditor } from '@pexelize/vue-editor';
import type { DesignJson, ExportHtmlData } from '@pexelize/editor-types';

const editorRef = ref<InstanceType<typeof PexelizeEditor>>();

async function handleExport() {
  const html: ExportHtmlData = await editorRef.value!.exportHtml();
  console.log(html);
}

function handleUndo() {
  editorRef.value?.undo();
}
</script>

<template>
  <button @click="handleExport">Export</button>
  <button @click="handleUndo">Undo</button>
  <PexelizeEditor
    ref="editorRef"
    :options="{ user: { id: '1', name: 'Jane', email: 'jane@example.com' } }"
    style="height: 100vh"
  />
</template>

Methods Reference

Method	Signature	Description
loadDesign	(design: DesignJson) => void	Load a design.
getDesign	() => DesignJson	Get the current design JSON.
exportHtml	() => Promise<ExportHtmlData>	Export as HTML.
exportImage	(options?: ExportImageOptions) => Promise<ExportImageData>	Export as image.
exportPdf	(options?: ExportPdfOptions) => Promise<ExportPdfData>	Export as PDF.
undo	() => void	Undo last action.
redo	() => void	Redo last action.
setViewMode	(mode: ViewMode) => void	Switch desktop/tablet/mobile.
setTheme	(theme: ThemeMode) => void	Switch light/dark theme.
showPreview	() => void	Open preview modal.
hidePreview	() => void	Close preview modal.

usePexelizeEditor Composable

For reactive control over the editor:

<script setup lang="ts">
import { PexelizeEditor, usePexelizeEditor } from '@pexelize/vue-editor';

const {
  editorRef,
  isReady,
  loadDesign,
  getDesign,
  exportHtml,
  undo,
  redo,
  setViewMode,
} = usePexelizeEditor();

async function save() {
  const design = getDesign();
  const html = await exportHtml();
  await fetch('/api/designs', {
    method: 'POST',
    body: JSON.stringify({ design, html }),
  });
}
</script>

<template>
  <button @click="save" :disabled="!isReady">Save</button>
  <PexelizeEditor
    ref="editorRef"
    :options="{ user: { id: '1', name: 'Jane', email: 'jane@example.com' } }"
    style="height: 100vh"
  />
</template>

Composable Return Values

Property	Type	Description
editorRef	Ref<InstanceType<typeof PexelizeEditor>>	Template ref to bind.
isReady	Ref<boolean>	Reactive ready state.
loadDesign	(design: DesignJson) => void	Load a design.
getDesign	() => DesignJson	Get the current design.
exportHtml	() => Promise<ExportHtmlData>	Export as HTML.
exportImage	(opts?) => Promise<ExportImageData>	Export as image.
exportPdf	(opts?) => Promise<ExportPdfData>	Export as PDF.
undo	() => void	Undo.
redo	() => void	Redo.
setViewMode	(mode: ViewMode) => void	Switch view mode.
setTheme	(theme: ThemeMode) => void	Switch theme.
showPreview	() => void	Open preview.
hidePreview	() => void	Close preview.

TypeScript

Types are re-exported from @pexelize/editor-types:

import type { DesignJson, EditorOptions, ExportHtmlData } from '@pexelize/vue-editor';

warning

Set an explicit height on the editor container. The editor fills its parent and requires a defined height to render.

tip

The composable is the recommended API — it provides reactive isReady state and avoids manual ref type assertions.