---
title: "Tutorial: overview"
description: "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."
canonical_url: "https://skaile-ai.github.io/forge-editor/tutorial/overview"
---
# Tutorial: overview

> 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.

This tutorial builds one editor for meeting notes. You start with the smallest working editor, add features one at a time, write your own block, connect it to a server, teach it to an AI model and finally see the same editor on React. Every chapter ends with a working result and one link to the next chapter.

The finished editor of chapters 1 to 5 runs below. Type `/callout` to add a callout, hover a callout block to change its tone, and open „Umwandeln in …“ on any paragraph.

<demo-callout-path-b>



</demo-callout-path-b>

## What you build

<table>
<thead>
  <tr>
    <th>
      Chapter
    </th>
    
    <th>
      You add
    </th>
    
    <th>
      Result
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a href="https://skaile-ai.github.io/forge-editor/tutorial/simple-editor">
        2. A simple editor
      </a>
    </td>
    
    <td>
      <code>
        SimpleEditor
      </code>
      
      , <code>
        EditorToolbar
      </code>
      
      , <code>
        EditorOutline
      </code>
    </td>
    
    <td>
      Rich text, toolbar, outline, read-only switch
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://skaile-ai.github.io/forge-editor/tutorial/compose-features">
        3. Compose features
      </a>
    </td>
    
    <td>
      <code>
        EditorSurface
      </code>
      
       over <code>
        defineEditor
      </code>
      
      , mentions, media, tables, block UI
    </td>
    
    <td>
      <code>
        @
      </code>
      
       and <code>
        #
      </code>
      
       suggestions, image drop, tables, drag handle
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://skaile-ai.github.io/forge-editor/tutorial/own-block-path-a">
        4. Own block, path A
      </a>
    </td>
    
    <td>
      The „Hinweis“ node through the <code>
        extensions
      </code>
      
       and <code>
        commands
      </code>
      
       props
    </td>
    
    <td>
      A callout block with a <code>
        /hinweis
      </code>
      
       entry
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://skaile-ai.github.io/forge-editor/tutorial/own-feature-path-b">
        5. Own feature, path B
      </a>
    </td>
    
    <td>
      The callout as an <code>
        EditorFeature
      </code>
    </td>
    
    <td>
      Toolbar button, hover menu, „Umwandeln in …“
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://skaile-ai.github.io/forge-editor/tutorial/backend-and-collaboration">
        6. Backend and collaboration
      </a>
    </td>
    
    <td>
      The Nuxt module, <code>
        EditorPorts
      </code>
      
      , a collaboration session
    </td>
    
    <td>
      Two browsers on one document
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://skaile-ai.github.io/forge-editor/tutorial/ai">
        7. AI
      </a>
    </td>
    
    <td>
      <code>
        aiFeature()
      </code>
      
      , <code>
        aiContext
      </code>
    </td>
    
    <td>
      The model knows about callouts
    </td>
  </tr>
  
  <tr>
    <td>
      <a href="https://skaile-ai.github.io/forge-editor/tutorial/react-surface">
        8. The React surface
      </a>
    </td>
    
    <td>
      <code>
        EditorContextProvider
      </code>
      
      , <code>
        EditorSurface
      </code>
      
      , <code>
        SimpleEditor
      </code>
    </td>
    
    <td>
      The same editor on React
    </td>
  </tr>
</tbody>
</table>

The UI strings of the examples are German („Hinweis“, „Warnung“, „Erledigt“, „Umwandeln in …“), the code and this tutorial are English. Pass `createEditor({ locale: 'en' })` to switch the built-in strings of the library to English; the strings of your own block stay yours.

## Prerequisites

- Node 22 or newer and [Bun](https://bun.sh) (the commands below use `bun`; `npm` works the same).
- A Vite app with Vue 3. Nuxt UI's Vite plugin, `@nuxt/ui/vite`, provides the theme, icons and component imports; the editor's Vue layer uses Nuxt UI components. You do not need Nuxt for chapters 1 to 5.
- `@skaile/forge-editor` and its peers installed as described in [Installation](https://skaile-ai.github.io/forge-editor/getting-started/installation).

If you start from nothing, [Quick start: plain Vue](https://skaile-ai.github.io/forge-editor/getting-started/quick-start-vue) lists the three small files (`package.json`, `index.html`, `tsconfig.json`) a new app needs. The Vite config of the runnable example, `examples/vue-simple`, is the one this tutorial builds on:

```ts [examples/vue-simple/vite.config.ts]
// Plain Vite + Vue (no Nuxt, router or backend). Nuxt UI's Vite plugin brings the theme, icons and component imports.
export default defineConfig({
  server: { port: 3040, strictPort: true },
  resolve: sourceResolve,
  plugins: [
    vue(),
    ui({ router: false, icon: { clientBundle: { scan: true, icons: [...libraryIcons] } } }),
  ],
})
```

Two parts of this file belong to the repository only. `sourceResolve` makes Vite read the library from `packages/editor/src` instead of a built package, and `libraryIcons` bundles the library's icons although the library lies outside the Vite root. In your own app the plugin list `[vue(), ui({ router: false })]` is enough; the icon bundling is optional and only avoids runtime requests to the Iconify API.

## Run the examples

Every chapter shows code from a real file of the repository, so you can run the same code:

```sh
bun install
bun run --cwd examples/vue-simple dev   # chapters 2 and 4, port 3040
bun run dev                             # chapters 5 to 7, port 3056 (the repository's Nuxt app)
```

## What you have now

A plan, and a place to run each step: the simple example app for the first chapters and the repository's Nuxt app for the advanced ones.

## Next

[Chapter 2: A simple editor](https://skaile-ai.github.io/forge-editor/tutorial/simple-editor).


## Sitemap

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