---
title: "Introduction"
description: "What @skaile/forge-editor is: a Vue and React block editor library on TipTap v3, assembled from features."
canonical_url: "https://skaile-ai.github.io/forge-editor/getting-started/introduction"
---
# Introduction

> What @skaile/forge-editor is: a Vue and React block editor library on TipTap v3, assembled from features.

## What it is

A Vue and React editor library on TipTap v3. Editors are assembled from **features**: the *simple* editor is the core features alone (formatting, headings, lists, quotes, code, undo/redo) and needs no backend, no Yjs and no feature code; the *advanced* editor composes every feature (media, mentions, transcripts, Typed blocks, authors, comments, AI, collaboration, block UI, site-wide Obsidian themes and their integrations) on both surfaces. The framework-free `./core` holds the feature model, and every feature's logic is framework-free too (`./<feature>`): a feature is built from a typed **UI binding** (`<x>FeatureCore(ui)`) that the Vue layer (`./<feature>/vue`, Nuxt UI chrome) and the React layer (`./<feature>/react`, shadcn/ui on Radix and Tailwind) fill with their components, node views and notice seam. Toolbar, settings panel and modal, Block outline, AI sidebar, Comments margin, Typed blocks table and Block inspector, and the Document tree are components you place anywhere beside an editor; both layers ship the simple editor (`./vue/simple`, `./react/simple`) and the advanced editor (`./vue/advanced`, `./react/advanced`).

A reference Nuxt app and the `@skaile/forge-editor` library it is built on: a block editor for structured documents (transcripts, minutes, reports) with AI assistance and collaboration, offered on a Vue and a React surface.

## How the pieces fit

- An editor is a **list of features** (`EditorFeature`) validated by `defineEditor` into an immutable `EditorPreset` and mounted by `EditorSurface`. `composeEditor({ content: 'basic' | 'rich', interaction: 'minimal' | 'full' | [], ai: boolean, backend?, add?, remove? })` builds one from three dimensions; a feature whose `requires` or backend capability is missing is dropped and listed in `omitted`. Prebuilt are the `SimpleEditor` and `AdvancedEditor` components (Vue and React), `advancedEditor()` (everything plus the three integrations) and the framework-free `simpleEditor()` (`core-content` + `core-ui`, no backend, no ⌘K palette) from `/presets/compose`. See [Feature composition](https://skaile-ai.github.io/forge-editor/guides/composition).
- Toolbar, settings panel and modal, Block outline, AI sidebar and Document tree are **separate components** you place beside an editor and give the editor (`:editor` from `ready`). The toolbar and settings components find the editor's preset through it; there is no `preset` prop.
- Every advanced feature has three entries: framework-free `/<x>` (logic, models and the UI binding contract), `/<x>/vue` and `/<x>/react`. Layers: framework-free `/core`, Vue (`/vue`, Nuxt UI) and React (`/react`, shadcn/ui). Importing an entry registers nothing globally, and the root entry `@skaile/forge-editor` is **type-only**. All entries are listed in the [exports reference](https://skaile-ai.github.io/forge-editor/reference/exports).
- The package is published as built ESM with `.d.ts` (the source maps embed the sources; `src` is not published). Consume it through Vite (`@vitejs/plugin-vue` with `@nuxt/ui/vite`, or `@vitejs/plugin-react` with `@tailwindcss/vite`) or Nuxt.
- UI strings render from catalogs in `de` (default) and `en`: `locale: 'de' | 'en'` and partial `messages` overrides on `createEditorContext` / `createEditor` / the module option, `ctx.t(key, params?)` in features and `useEditorI18n()` in components (see [Language](https://skaile-ai.github.io/forge-editor/guides/language)). Server error messages are German developer messages; docs and identifiers are English.

The words used on these pages (Feature, Preset, Surface, Block, …) are defined in the [glossary](https://skaile-ai.github.io/forge-editor/getting-started/glossary).

## Where to start

<card-group>
<card icon="i-lucide-download" title="Install" to="https://skaile-ai.github.io/forge-editor/getting-started/installation">

Requirements, peer dependencies and the npm command.

</card>

<card icon="i-lucide-rocket" title="Quick start" to="https://skaile-ai.github.io/forge-editor/getting-started/quick-start-nuxt">

A working editor in Nuxt, plain Vue or React.

</card>

<card icon="i-lucide-graduation-cap" title="Tutorial" to="https://skaile-ai.github.io/forge-editor/tutorial/overview">

Build a meeting-notes editor step by step, including an own block.

</card>

<card icon="i-lucide-list" title="Exports reference" to="https://skaile-ai.github.io/forge-editor/reference/exports">

Every entry point of the package and what it exports.

</card>
</card-group>


## Sitemap

See the full [sitemap](https://skaile-ai.github.io/forge-editor/sitemap.md) for all pages.