useEditor

useEditor() returns the current injected 4B Pen 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