useEditor

useEditor() returns the current injected OpenPencil editor.

It is the main entry point for SDK composables and headless primitives that need editor access.

Usage

useEditor() must be called inside a subtree where provideEditor(editor) has already been called.

import { useEditor } from '@open-pencil/vue'

const editor = useEditor()

Basic example

<script setup lang="ts">
import { computed } from 'vue'

import { useEditor } from '@open-pencil/vue'

const editor = useEditor()
const pageId = computed(() => editor.state.currentPageId)
</script>

<template>
  <div>Current page: {{ pageId }}</div>
</template>

Practical examples

Read selected nodes

const editor = useEditor()
const selected = editor.getSelectedNodes()

Trigger commands

const editor = useEditor()
editor.zoomToFit()
editor.undoAction()

Error behavior

If called outside an editor provider tree, useEditor() throws with a helpful message.

That is intentional — this API should fail loudly when the editor context is missing.

Related APIs

• provideEditor
• useCanvas
• useSelectionState
• useEditorCommands

Type

function useEditor(): Editor