@alggtta/editor

React/TypeScript Notion-style editor built on Tiptap 3, Tailwind CSS v4, and DaisyUI 5.

@alggtta/editor v3 keeps the default package focused on the core editor. Heavy features such as database blocks, Mermaid, AI, and export helpers are available through opt-in subpath imports.

Install

npm install @alggtta/editor

Install peer dependencies in your app:

npm install react react-dom @tiptap/core @tiptap/react @tiptap/pm

Production usage requires an Alggtta token. Localhost development still works with a token-shaped value such as tok_dev.

Basic Usage

import { AlggttaEditor } from '@alggtta/editor'
import '@alggtta/editor/styles.css'

export function EditorPage() {
  return (
    <AlggttaEditor
      token={process.env.NEXT_PUBLIC_ALGGTTA_TOKEN ?? ''}
      content="<h1>Hello</h1><p>Type / for commands.</p>"
      onUpdate={({ editor, json, html, text }) => {
        console.log({ json, html, text })
      }}
    />
  )
}

Next.js App Router

Use the editor from a client component.

'use client'

import { AlggttaEditor } from '@alggtta/editor'
import '@alggtta/editor/styles.css'

export default function EditorClient() {
  return (
    <AlggttaEditor
      token={process.env.NEXT_PUBLIC_ALGGTTA_TOKEN ?? ''}
      variant="document"
      onUpdate={({ json }) => {
        void fetch('/api/document', {
          method: 'POST',
          body: JSON.stringify(json),
        })
      }}
    />
  )
}

Vite / CRA / React

import { AlggttaEditor } from '@alggtta/editor'
import '@alggtta/editor/styles.css'

export function App() {
  return (
    <AlggttaEditor
      token={import.meta.env.VITE_ALGGTTA_TOKEN}
      placeholder="Write something..."
    />
  )
}

Visual Variants

Use variant to fit the editor into different layouts:

<AlggttaEditor token={token} variant="document" />
<AlggttaEditor token={token} variant="embedded" />
<AlggttaEditor token={token} variant="bare" />

• document: default document canvas with comfortable padding.
• embedded: compact shell for dashboards and admin panels.
• bare: minimal wrapper when your app owns the layout.

License UI

token is required. verifyEndpoint defaults to https://cdn.alggtta.com.

<AlggttaEditor
  token={token}
  licenseFallback={({ error }) => (
    <div role="alert">Editor license check failed: {error}</div>
  )}
/>

Subpath Imports

import { useAlggttaEditor } from '@alggtta/editor/headless'
import { createDatabaseExtensions, databaseSlashCommands } from '@alggtta/editor/database'
import { createMermaidExtensions, mermaidSlashCommands } from '@alggtta/editor/mermaid'
import { createAIExtensions, aiSlashCommands } from '@alggtta/editor/ai'
import { markdownToHtml, htmlToMarkdown } from '@alggtta/editor/export'
import { LicensedGate, useLicenseVerification } from '@alggtta/editor/license'
import { UniversalEditor } from '@alggtta/editor/legacy'

The main entry includes core blocks only: paragraph, headings 1-3, lists, task list, quote, divider, link, highlight, image, table, code block, slash menu, bubble menu, and drag handle.

Optional entries may require their matching peer dependencies, for example @tanstack/react-table for database blocks and mermaid for Mermaid diagrams. Export/import UI loads html2pdf.js and mammoth only when the PDF or DOCX actions are used.

Optional Feature Composition

import { AlggttaEditor } from '@alggtta/editor'
import { createDatabaseExtensions, databaseSlashCommands } from '@alggtta/editor/database'

<AlggttaEditor
  token={token}
  extensionConfig={{
    customExtensions: createDatabaseExtensions(),
    customSlashCommands: databaseSlashCommands,
  }}
/>

Export UI is also opt-in. Import the dropdown from /export and inject it into the editor footer:

import { AlggttaEditor } from '@alggtta/editor'
import { ExportDropdown, exportSlashCommands } from '@alggtta/editor/export'

<AlggttaEditor
  token={token}
  extensionConfig={{
    customSlashCommands: exportSlashCommands,
  }}
  renderFooterControls={({ editor, allowedFeatures }) =>
    allowedFeatures.includes('*') || allowedFeatures.includes('export')
      ? <ExportDropdown editor={editor} />
      : null
  }
/>

Only expose optional commands for features you actually register or render.

Tailwind and DaisyUI

The package ships compiled CSS at @alggtta/editor/styles.css. DaisyUI is internally prefixed with ue- to reduce conflicts with consuming apps. You can use the editor in apps with or without Tailwind/DaisyUI.

Migration from v2

onUpdate

// v2
<UniversalEditor onUpdate={(editor) => save(editor.getJSON())} />

// v3
<AlggttaEditor onUpdate={({ json }) => save(json)} />

UniversalEditor

AlggttaEditor is the recommended v3 component. The previous UniversalEditor remains available from the legacy entry during migration:

import { UniversalEditor } from '@alggtta/editor/legacy'

Optional Features

Database, Mermaid, AI, export helpers, GuideFlow blocks, and schedule blocks are no longer part of the default core entry. Import the matching subpath and pass its extensions/commands explicitly.

License

MIT