# @skaile/forge-editor

> Vue and React block editor library on TipTap v3: features, presets, Nuxt module, server ports, AI and collaboration.

## Documentation Sets

- [@skaile/forge-editor](https://skaile-ai.github.io/forge-editor/llms-full.txt)

## Package

- [npm package](https://www.npmjs.com/package/@skaile/forge-editor): Published ESM build with type declarations.
- [Source](https://github.com/skaile-ai/forge-editor): GitHub repository (monorepo: library in packages/editor).
- [Changelog](https://github.com/skaile-ai/forge-editor/blob/main/packages/editor/CHANGELOG.md): Release notes per version.
- [Agent skill](https://skaile-ai.github.io/forge-editor/.well-known/skills/ecsplico-editor/SKILL.md): Installable Agent Skill for integrating and extending the editor.

## Docs

Every page below is available as raw markdown.

- [Reading these docs as an agent](https://skaile-ai.github.io/forge-editor/raw/ai-agents.md): Machine entry points of this site (llms.txt, markdown twins, sitemap, installable Agent Skill) and where an agent starts.
- [Add a block or feature](https://skaile-ai.github.io/forge-editor/raw/ai-agents/extend.md): Agent playbook for adding an own block or feature to @skaile/forge-editor: an ordered checklist where each step links to the tutorial chapter that shows it.
- [Integrate the editor](https://skaile-ai.github.io/forge-editor/raw/ai-agents/integrate.md): Agent playbook for adding @skaile/forge-editor to an app: choose the surface, then the entry to import, then follow the matching setup page.
- [Pitfalls and invariants](https://skaile-ai.github.io/forge-editor/raw/ai-agents/invariants.md): Rules that must stay true when integrating or changing @skaile/forge-editor: CSS order, mandatory context, SSR, mount-time props, bundle isolation, entries.
- [Verify](https://skaile-ai.github.io/forge-editor/raw/ai-agents/verify.md): Which checks an agent runs after changing an @skaile/forge-editor integration or the package itself.
- [Glossary](https://skaile-ai.github.io/forge-editor/raw/getting-started/glossary.md): Terms used across the documentation: editor composition, document, block, source, AI and panel vocabulary.
- [Installation](https://skaile-ai.github.io/forge-editor/raw/getting-started/installation.md): Requirements, peer dependencies and the npm install command for @skaile/forge-editor.
- [Introduction](https://skaile-ai.github.io/forge-editor/raw/getting-started/introduction.md): What @skaile/forge-editor is: a Vue and React block editor library on TipTap v3, assembled from features.
- [Quick start: Nuxt](https://skaile-ai.github.io/forge-editor/raw/getting-started/quick-start-nuxt.md): Register the Nuxt module, provide EditorPorts and mount the simple and the advanced editor in a Nuxt app.
- [Quick start: React](https://skaile-ai.github.io/forge-editor/raw/getting-started/quick-start-react.md): Set up the simple editor in a Vite and React app: peers, Tailwind and shadcn tokens, EditorContextProvider, EditorSurface and SimpleEditor.
- [Quick start: plain Vue](https://skaile-ai.github.io/forge-editor/raw/getting-started/quick-start-vue.md): Set up the simple editor in a Vite and Vue app: peers, Nuxt UI plugin, CSS and a mounted SimpleEditor with toolbar and outline.
- [Kitchen sink: learning path](https://skaile-ai.github.io/forge-editor/raw/guides/advanced-nuxt-example.md): Fifteen pages, basics first: structure, content blocks, JSON and Markdown, block actions and settings, then the building blocks, then the use cases, each with the code that builds it
- [Advanced editor in React](https://skaile-ai.github.io/forge-editor/raw/guides/advanced-react.md): Mount the collaborative AdvancedEditor on React with the chrome components beside it, over the same backend as the Vue surface.
- [AI](https://skaile-ai.github.io/forge-editor/raw/guides/ai.md): Add AI to an editor: selection menu, sidebar, ghost text, backend endpoints, integrations with Typed blocks and transcripts, agent operations and fence formats.
- [AI configuration and secrets](https://skaile-ai.github.io/forge-editor/raw/guides/ai-configuration.md): One configuration object for module options, server and browser, the Model presets and Model roles, and why API keys come from the environment only.
- [Audio: read aloud, mixdown and ElevenLabs](https://skaile-ai.github.io/forge-editor/raw/guides/audio.md): The add-on @skaile/forge-editor-audio: an ElevenLabs SpeechProvider, the derive methods audio-tts and audio-mixdown that make recording blocks with named Derivation inputs, and the render target audio-mixdown that mixes takes through ffmpeg.
- [Authors and comments](https://skaile-ai.github.io/forge-editor/raw/guides/authors-and-comments.md): Mark who wrote which text and let readers discuss selections in threads, with a margin or inline layout.
- [Block capabilities, abilities and actions](https://skaile-ai.github.io/forge-editor/raw/guides/block-capabilities.md): Declare a Block capability in a host Feature, gate a Block action with requires and ability, see what abilities gate and let a Block type opt in.
- [Block properties and Property definitions](https://skaile-ai.github.io/forge-editor/raw/guides/block-properties.md): Define Block properties with Property definitions, give them to a Block type with the properties capability and read and write them.
- [Block types in code and JSON](https://skaile-ai.github.io/forge-editor/raw/guides/block-types.md): Define a Block type as data in code or in a JSON file, check it against the capability registry, and give the server the same list.
- [Block UI (drag handle, hover actions)](https://skaile-ai.github.io/forge-editor/raw/guides/block-ui.md): Add the drag handle, hover targeting, block actions and block-range selection with blockUiFeature().
- [Charts: bar, line, pie and scatter over a query](https://skaile-ai.github.io/forge-editor/raw/guides/charts.md): The add-on @skaile/forge-editor-charts: the Block type chart, its configuration and the query it derives, the pure Vega-Lite specification, the node view with a chart editor for Vue and React, and the render target chart-svg.
- [Citations](https://skaile-ai.github.io/forge-editor/raw/guides/citations.md): Cite a bibliography entry of the Document with the inline cite node: insert it with /zitat, read it as (Autor Jahr), and keep it through Markdown export and import.
- [Collaboration on the client](https://skaile-ai.github.io/forge-editor/raw/guides/collaboration.md): Collaboration is a feature: mount a surface with a Yjs session, per-client undo, authors and comments, positions that survive concurrent edits, and matching schemas.
- [Collections: an ordered list of Blocks](https://skaile-ai.github.io/forge-editor/raw/guides/collections.md): The collection Block type: its items and stored query, the node view with reorder and „Aus Abfrage füllen“, the block action that adds a Block, and the Markdown export.
- [Composites and the settings UI](https://skaile-ai.github.io/forge-editor/raw/guides/composites.md): Add Typed blocks with Block types, chips and property views, plus the settings panel and the file-import integration.
- [Feature composition and entries](https://skaile-ai.github.io/forge-editor/raw/guides/composition.md): Compose an editor from features and presets, pick the right entries, and choose the integration depth from no data layer to a Nuxt server.
- [Content tree mechanics](https://skaile-ai.github.io/forge-editor/raw/guides/content-tree.md): Work on a tree of Typed blocks: colour baskets and hidden titles, splitting by hand, by length or with AI, outline cleanup, focus and basket filter in the tree, and block transfer between two editors.
- [Data views: a query shown as table, list or board](https://skaile-ai.github.io/forge-editor/raw/guides/data-views.md): The dataView Block type: its stored query and layout, the three layouts and what a board needs, how the view asks and refreshes, /ansicht, and the Typed blocks table as the table layout.
- [Derive methods and the Derivation index](https://skaile-ai.github.io/forge-editor/raw/guides/derive-methods.md): Register one way to make a block from another block, find the Derived blocks of an original and handle a missing source.
- [Document tree](https://skaile-ai.github.io/forge-editor/raw/guides/document-tree.md): Show folders, documents and the open document's outline in a file drawer over your own DocumentStore, on Vue and React.
- [Edges: backlinks and authored connections](https://skaile-ai.github.io/forge-editor/raw/guides/edges.md): Which Blocks point at a Block: the Edges the Block index projects from references, Derivations, embeds and tags, the ones a person adds in the inspector, the edges route and the drizzle table.
- [EditorPorts: auth and storage](https://skaile-ai.github.io/forge-editor/raw/guides/editor-ports.md): The single seam between the package and the host: ports for identity, documents, Yjs state, assets, settings, themes and AI models.
- [Explore: backlinks, related Blocks and the trail](https://skaile-ai.github.io/forge-editor/raw/guides/explore.md): What is connected to a Block: the Blocks that point at it, the Blocks related to it, and the chain of Derivations behind it. The explore Feature, the panel, the related route and derivationTrailOf.
- [AI proposals and the export check](https://skaile-ai.github.io/forge-editor/raw/guides/export-check.md): Show unchecked AI results as „KI-Vorschlag“ in the Freigabestatus, list what to look at before a Typed block is exported, and register your own check source.
- [Graph: the Edges around a Block](https://skaile-ai.github.io/forge-editor/raw/guides/graph.md): The graph route that walks the Edges of the Block index in both directions, the walk's limits, the client call, and the @skaile/forge-editor-graph add-on that draws the answer with sigma in Vue and React.
- [Image studio](https://skaile-ai.github.io/forge-editor/raw/guides/image-studio.md): The Bild-Studio block: a picture with its description, prompt blocks, references, previous generations and chat. The node, its Markdown form, the state reducers, the images backend port and the dialog for your own store.
- [Importers: what a dropped file becomes](https://skaile-ai.github.io/forge-editor/raw/guides/importers.md): The importer registry of the feature contract: Importer and ImportPlan, planImport, the Markdown, subtitle and BibTeX importers of the media feature, and how composite-media wraps the plan.
- [Index on Postgres: typos, meaning and SQL pushdown](https://skaile-ai.github.io/forge-editor/raw/guides/index-pg.md): The @skaile/forge-editor-index-pg add-on: trigram title search, a vector table kept current on replace, nearest and related Blocks, query pushdown, and the Embedder port with its OpenAI-compatible adapter.
- [Knowledge graph: sources and concepts beside the Documents](https://skaile-ai.github.io/forge-editor/raw/guides/knowledge-graph.md): The read-only KnowledgeGraph port with its search and neighbours routes, the Wissensgraph tab of the Explore panel, the memory adapter for tests and the @skaile/forge-editor-kgs add-on over the KGS SDK.
- [Language](https://skaile-ai.github.io/forge-editor/raw/guides/language.md): Choose the editor language once per app, override single messages, and keep user-facing strings in the German and English catalogs.
- [Markdown and code](https://skaile-ai.github.io/forge-editor/raw/guides/markdown-and-code.md): Edit Markdown files as blocks with frontmatter and unknown fences preserved, edit source files in CodeMirror, and pick a surface per file type.
- [Media, mentions and transcript features](https://skaile-ai.github.io/forge-editor/raw/guides/media-mentions-transcript.md): Add image, audio, video and file blocks, @ mentions and # tags, and speaker transcripts as independent features, with uploads, metadata lists and server schemas.
- [Migrating from #tiptap-editor](https://skaile-ai.github.io/forge-editor/raw/guides/migration.md): Move a host from the removed #tiptap-editor Nuxt module to explicit imports from @skaile/forge-editor entries.
- [Register the Nuxt module](https://skaile-ai.github.io/forge-editor/raw/guides/nuxt-module.md): Register @skaile/forge-editor/nuxt in nuxt.config.ts, what the module wires into build, client and server, and which routes it mounts.
- [Obsidian: import and export a vault](https://skaile-ai.github.io/forge-editor/raw/guides/obsidian.md): The add-on @skaile/forge-editor-obsidian: importVault plans one Document per note with frontmatter as properties, wikilinks as reference chips and ^id block ids kept; exportVault writes them back; a command uploads a vault to an editor server.
- [PDF viewer: passages, anchors and quotes](https://skaile-ai.github.io/forge-editor/raw/guides/pdf-viewer.md): The add-on @skaile/forge-editor-pdf-viewer: the source-anchor property, a pdfjs viewer with a text layer, scrolling to a passage on reveal, and „Zitat anlegen“, which creates a quote block derived from the PDF.
- [Production](https://skaile-ai.github.io/forge-editor/raw/guides/production.md): Build and run a Nuxt host with the editor module: runtime secrets, persistent storage and shutdown behaviour.
- [Prüfung and Freigabestatus](https://skaile-ai.github.io/forge-editor/raw/guides/pruefung.md): Record that a user checked a Typed block at one content state, derive the Freigabestatus, optionally lock checked blocks, and add your own chips and inspector sections.
- [Query: filter, sort, group and total Blocks](https://skaile-ai.github.io/forge-editor/raw/guides/query.md): The DataQuery model, its pseudo-fields and operators per property kind, the evaluator, the BlockIndex.query port method, the route, the client call and the find_blocks tool.
- [Render: export a Block or a Document to a file](https://skaile-ai.github.io/forge-editor/raw/guides/render.md): The Renderer port with its render targets, the SSE route that streams progress and stores the result as an asset, the client call, and the block action and command that offer it.
- [Server routes and authentication](https://skaile-ai.github.io/forge-editor/raw/guides/routes-and-auth.md): How every editor route authenticates through the identity port, the full route table with status codes, and websocket authentication.
- [Settings and app lifetime](https://skaile-ai.github.io/forge-editor/raw/guides/settings.md): The versioned EditorSettings object every editor of an app shares: local storage, per-account sync, the settings UI, the settingsUi prop and themes.
- [Slides: decks, slide layouts and exports](https://skaile-ai.github.io/forge-editor/raw/guides/slides.md): The add-on @skaile/forge-editor-slides: the Block types deck and slide, the pure HTML render contract, the render targets reveal-html, pptx and marp-md, the transfer transforms that turn blocks into slides, and the slide preview in the inspector.
- [Speech: text to audio, and subtitle files](https://skaile-ai.github.io/forge-editor/raw/guides/speech.md): The SpeechProvider port with its engines and voices, the SSE route that streams progress and stores the audio as an asset, the daily character budget, the client call, and the block action that exports a transcript as WebVTT or SubRip.
- [Storage adapters, comment stores, Nitro host](https://skaile-ai.github.io/forge-editor/raw/guides/storage-adapters.md): Pick where documents live with ready-made EditorPorts adapters, comment stores, a Nuxt-free Nitro host and the useEditorDocument composable.
- [Templates: start a Document from a Dokumentvorlage](https://skaile-ai.github.io/forge-editor/raw/guides/templates.md): The Dokumentvorlagen folder, the placeholders expandTemplate fills in ({{title}}, {{date}}, {{time}}, {{cursor}}), and the templateId of the Document create route.
- [Themes (Obsidian)](https://skaile-ai.github.io/forge-editor/raw/guides/themes.md): Render an Obsidian theme on the whole app, choose, upload and delete themes, and know the limits.
- [Typst: render a Document as a PDF with citations](https://skaile-ai.github.io/forge-editor/raw/guides/typst.md): The add-on @skaile/forge-editor-typst: the render target typst-pdf that turns a Document or a paper into Typst markup, writes the bibliography as BibTeX, and compiles a PDF in one of four citation styles.
- [Workspace: find, read, reference and embed Blocks across Documents](https://skaile-ai.github.io/forge-editor/raw/guides/workspace.md): The Block index, Workspace search, Block references and Embeds that name a Block address, Document routes with the DocumentMutator, Tool providers for the document chat, and change sets for edits to other Documents.
- [Vue-free advanced schema](https://skaile-ai.github.io/forge-editor/raw/reference/advanced-schema.md): Use advancedSchemaExtensions() on a server, validator or migration without Vue, React or browser globals.
- [Block capability contract](https://skaile-ai.github.io/forge-editor/raw/reference/block-capabilities.md): BlockCapability, the capability registry, the built-in capabilities with their config and appliesTo, and the BlockAction.requires gate.
- [Block type contract](https://skaile-ai.github.io/forge-editor/raw/reference/block-types.md): BlockType, the config types of the built-in capabilities, PropertyDefinition and the functions that read and combine Block types.
- [Changelog](https://skaile-ai.github.io/forge-editor/raw/reference/changelog.md): Release history of @skaile/forge-editor on GitHub and the current version on npm.
- [Commands](https://skaile-ai.github.io/forge-editor/raw/reference/commands.md): Build, check and dev commands of the repository: what each one proves and when to run it.
- [CSS and UI-provider requirements](https://skaile-ai.github.io/forge-editor/raw/reference/css-and-ui.md): Design tokens, stylesheet order, Tailwind sources and the UI kit each surface needs.
- [Dependency rules](https://skaile-ai.github.io/forge-editor/raw/reference/dependency-rules.md): Which layer of @skaile/forge-editor may import which, and how the bundle isolation check enforces it.
- [Derive method contract](https://skaile-ai.github.io/forge-editor/raw/reference/derive-methods.md): DeriveMethod, DeriveContext, the derive registry, the Derivation record and the derivation index functions.
- [Public exports](https://skaile-ai.github.io/forge-editor/raw/reference/exports.md): Every explicit subpath of @skaile/forge-editor and the names it exports.
- [Feature contract](https://skaile-ai.github.io/forge-editor/raw/reference/feature-contract.md): The EditorFeature, FeatureContext and EditorPreset types, what defineEditor validates and how to contribute a custom feature.
- [Presets and features](https://skaile-ai.github.io/forge-editor/raw/reference/presets-and-features.md): Which features each preset contains, which backend it needs and which modules its bundle must not contain.
- [Renderer port](https://skaile-ai.github.io/forge-editor/raw/reference/renderer-port.md): The Renderer, RenderTargetInfo and RenderInput types, the render routes and events, and the createRenderer and markdownTarget adapter.
- [Speech port](https://skaile-ai.github.io/forge-editor/raw/reference/speech-port.md): The SpeechProvider, SpeechEngineInfo and SpeechRequest types, the speech routes and events, the daily budget, and the createOpenAiSpeech and createMemorySpeech adapters.
- [Chapter 7: AI](https://skaile-ai.github.io/forge-editor/raw/tutorial/ai.md): Add aiFeature() to the meeting-notes editor, provide the /api/ai endpoints and keys, and describe the callout to the model with aiContext.
- [Chapter 6: Backend and collaboration](https://skaile-ai.github.io/forge-editor/raw/tutorial/backend-and-collaboration.md): Register the Nuxt module, hand it EditorPorts for identity and storage, and open one document in two browsers with the collaboration session.
- [Chapter 3: Compose features](https://skaile-ai.github.io/forge-editor/raw/tutorial/compose-features.md): Replace SimpleEditor with EditorSurface over defineEditor and add mentions, media, tables and block UI as features.
- [Tutorial: overview](https://skaile-ai.github.io/forge-editor/raw/tutorial/overview.md): Build a meeting-notes editor in eight chapters: a simple editor, composed features, an own block, a backend with collaboration, AI, and the same editor on React.
- [Chapter 4: Your own block, path A](https://skaile-ai.github.io/forge-editor/raw/tutorial/own-block-path-a.md): Write the „Hinweis“ callout as a TipTap node and plug it into SimpleEditor through the extensions and commands props.
- [Chapter 5: Your own feature, path B](https://skaile-ai.github.io/forge-editor/raw/tutorial/own-feature-path-b.md): Turn the callout into an EditorFeature with a toolbar button, a hover menu for the tone, „Umwandeln in …“ and its own ability.
- [Chapter 8: The React surface](https://skaile-ai.github.io/forge-editor/raw/tutorial/react-surface.md): Run the meeting-notes editor on React: EditorContextProvider, EditorSurface, EditorToolbar, SimpleEditor and the Toaster, and where the callout would go.
- [Chapter 2: A simple editor](https://skaile-ai.github.io/forge-editor/raw/tutorial/simple-editor.md): Mount SimpleEditor with a JSON v-model, add the toolbar and the outline beside it, switch it read-only and handle rejected content.

## Landing

Every page below is available as raw markdown.

- [/](https://skaile-ai.github.io/forge-editor/raw/index.md)

## Notes

- Use @skaile/forge-editor when a Vue 3 or React 19 app needs a block editor for structured documents with optional AI, collaboration and a Nuxt server side; it is not a general CMS.
- Append .md to any page URL of this site or GET /raw/<path>.md.
- Verification commands: /reference/commands