Build with Alggtta Editor

Overview

@alggtta/editor is a commercial, core-first rich-text editor built on Tiptap 3 / ProseMirror. It ships as a single npm package with multiple distribution surfaces — a React component, a framework-agnostic mount() function, a Web Component, and a token-gated CDN/UMD build — and is licensed commercially (UNLICENSED), free to develop on localhost and token-verified in production.

@alggtta/editor is a commercial rich-text editor for product teams who want a Notion-grade editing surface without rebuilding ProseMirror from scratch. It is built on Tiptap 3.26 and ProseMirror, written in strict TypeScript, and styled with Tailwind v4 + DaisyUI. The design is core-first: the default bundle stays lean, and heavier capabilities (database tables, Mermaid, AI, export, collaboration) live behind explicit subpath imports so you only pay for what you use.

Who it is for

• React (18 or 19) product teams who want a drop-in editor with a friendly props API.
• Non-React stacks (Rails, Django, Laravel, plain HTML) that need to mount the editor into an existing page via mount() or a single <alggtta-editor> tag.
• Teams building a wiki or knowledge base — pair it with the private companion package @alggtta/wiki-store (provided to licensees on request) for backlinks, full-text search, and versions.

Dual distribution

One package, four ways to embed. The npm import is the primary path for bundled apps; the token-gated CDN/UMD build is for pages without a build step. All four share the same component and license flow.

Quick taste

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

export function MyEditor() {
  return (
    <AlggttaEditor
      token={process.env.ALGGTTA_TOKEN!}  // required; localhost is free
      preset="core"                        // 'core' (default) | 'full'
      variant="document"                   // 'document' | 'embedded' | 'bare'
      placeholder="Start writing…"
      onUpdate={({ json, html, text }) => {
        // persist json / html / text however you like
      }}
    />
  )
}

<!-- No bundler needed. The deployed CDN bundle keeps React external,
     so load the react / react-dom UMD globals first, then the editor. -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://cdn.alggtta.com/editor.css?token=YOUR_TOKEN" />
<script src="https://cdn.alggtta.com/editor.umd.js?token=YOUR_TOKEN"></script>
<alggtta-editor token="YOUR_TOKEN" preset="full" theme="light"></alggtta-editor>

Tech stack

Presets and variants at a glance

• preset 'core' (default): lean rich-text core — StarterKit plus code, image, table, and color.
• preset 'full': core plus advanced blocks (callout, toggle, columns, mention, wiki link, comments, find/replace, …) and their slash commands. Database / Mermaid / Math / AI remain opt-in via subpaths.
• variant 'document' (default) | 'embedded' | 'bare': controls the visual shell — a centered page, an inline panel, or no chrome at all.

Licensing

Installation

Install @alggtta/editor with its React + Tiptap 3.26 peers, add per-feature optional peers, import the single stylesheet, and learn how the license token/verifyEndpoint and dev-origin bypass work.

Install @alggtta/editor from the npm registry. It is a commercial, source-available package (UNLICENSED / EULA) and ships React + Tiptap as peer dependencies, so you install those alongside it. The advanced blocks (database, mermaid, math, export, AI) declare their heavy libraries as optional peers — add them only for the features you actually use.

npm install

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

This single line covers the package plus every required peer. The companion server package @alggtta/wiki-store (v0.1.0, SQLite via node:sqlite + FTS5) is a private package — it is not on the public npm registry. Licensees receive it on request; it is only needed when you build a backlinked wiki backend (see Building a wiki).

Required peer dependencies

Optional peer dependencies

Install these per feature. Each is declared optional in the package manifest, so npm will only warn if a feature subpath needs one that is missing — never on a base install.

Import the styles

The editor ships one stylesheet (Tailwind 4 + DaisyUI 5 layers). Import it once at your app entry, before rendering the editor:

import '@alggtta/editor/styles.css'

Available subpaths

The root entry (@alggtta/editor) is the lean default. Opt-in feature surfaces live behind dedicated subpaths so the base bundle stays small — each maps to a real entry in the package's exports field.

• @alggtta/editor — AlggttaEditor (default), mount, defineAlggttaEditorElement, extension factories, getWikiLinks/getMentions
• @alggtta/editor/headless — useAlggttaEditor, useTableOfContents, useCheckpoints, useEditLock, useAutosave, MigrationRegistry
• @alggtta/editor/database — createDatabaseExtensions, databaseSlashCommands
• @alggtta/editor/mermaid — mermaid extension + slash command
• @alggtta/editor/ai — AI hooks/components incl. createBrowserLLMHandler
• @alggtta/editor/export — ReadOnlyViewer, ExportDropdown, exportSlashCommands, markdown conversion
• @alggtta/editor/license — license gate/context/hooks
• @alggtta/editor/legacy — UniversalEditor (full toolbar/comments/TOC/export) + domain blocks
• @alggtta/editor/comments — comments surface
• @alggtta/editor/collab — realtime collaboration (Yjs) surface
• @alggtta/editor/styles.css — the single stylesheet

Loading from the CDN (no bundler)

For Rails, Django, or plain HTML pages you can load the prebuilt UMD bundle and stylesheet directly and use the <alggtta-editor> custom element. The token is passed on the script URL and as the element's token attribute. The deployed CDN bundle keeps React external, so load the react and react-dom UMD globals before editor.umd.js.

<!-- The deployed CDN bundle keeps React external — load the UMD globals first. -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://cdn.alggtta.com/editor.css?token=YOUR_TOKEN" />
<script src="https://cdn.alggtta.com/editor.umd.js?token=YOUR_TOKEN"></script>
<alggtta-editor token="YOUR_TOKEN" preset="full" theme="light"></alggtta-editor>

Verify locally

pnpm typecheck
pnpm lint
pnpm test
pnpm build

React (Vite) quickstart

Drop the AlggttaEditor component into a Vite + React app: install peers, import the named AlggttaEditor export and styles.css, pass token + verifyEndpoint from import.meta.env, and read updates from onUpdate({ json, html, text }).

This is the fastest way to render @alggtta/editor in a Vite + React project. You install the package alongside its required Tiptap and React peers, import the AlggttaEditor component (a named export of the package root) plus its stylesheet, and pass a license token. In development you can run against localhost without a real token; production domains require a valid token verified against the CDN gateway.

1. Install

Install the editor and its required peer dependencies. The Tiptap suite must stay on ^3.26.0 (3.26 or a newer 3.x release) and be bumped together, and React 18.2+ or 19 is supported.

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

2. Configure environment variables

Vite exposes only variables prefixed with VITE_ to client code via import.meta.env. Put your license token and the CDN gateway URL there. Add the file to .gitignore — do not commit production tokens.

# .env.local
VITE_ALGGTTA_TOKEN=your-license-token
VITE_ALGGTTA_VERIFY_ENDPOINT=https://cdn.alggtta.com

3. Render the editor

Import the AlggttaEditor named export and the stylesheet once (e.g. in your root or in this component). Pass the token and verifyEndpoint from import.meta.env, set initial content, mark it editable, supply a placeholder, and destructure { json, html, text } in onUpdate to persist changes. The editor variant defaults to 'document' and the extension preset defaults to 'core'.

// src/Editor.tsx
import { useState } from 'react'
import { AlggttaEditor } from '@alggtta/editor'
import '@alggtta/editor/styles.css'

export default function Editor() {
  const [doc, setDoc] = useState('<p>Hello from Alggtta 👋</p>')

  return (
    <AlggttaEditor
      token={import.meta.env.VITE_ALGGTTA_TOKEN}
      verifyEndpoint={import.meta.env.VITE_ALGGTTA_VERIFY_ENDPOINT}
      content={doc}
      editable
      placeholder="Start writing…"
      locale="en"
      onUpdate={({ json, html, text }) => {
        // json: Tiptap JSON (lossless — prefer for persistence)
        // html: serialized HTML
        // text: plain-text content
        setDoc(html)
        console.log({ json, html, text })
      }}
    />
  )
}

For persistence prefer the json payload (lossless and compact); html is convenient for previews, and text is handy for search or word counts. All three are read from the same onUpdate call.

Core props

Next.js (App Router)

Render AlggttaEditor from a 'use client' wrapper in the Next.js App Router, and pass the license token and verify endpoint via NEXT_PUBLIC_ environment variables.

AlggttaEditor mounts a browser-side Tiptap editor and reads localStorage (the license guard caches the verified config for an offline grace window). It must therefore run on the client. In the App Router, wrap it in a 'use client' component and import that wrapper from a normal server page.tsx.

1. Install

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

2. Client wrapper (editor-client.tsx)

Mark the wrapper with 'use client', import the stylesheet once, and read configuration from NEXT_PUBLIC_-prefixed variables. The token prop is a required string, so coerce the env value (here with a non-null assertion).

// app/editor/editor-client.tsx
'use client'

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

export function EditorClient() {
  return (
    <AlggttaEditor
      token={process.env.NEXT_PUBLIC_CDN_TOKEN!}
      verifyEndpoint={process.env.NEXT_PUBLIC_CDN_URL}
      content=""
      variant="document"
      preset="core"
      onUpdate={({ json, html, text }) => console.log({ json, html, text })}
    />
  )
}

3. Server page (page.tsx)

The page itself stays a Server Component. It just renders the client wrapper, so all of the browser-only work happens inside the 'use client' boundary.

// app/editor/page.tsx (Server Component)
import { EditorClient } from './editor-client'

export default function Page() {
  return <EditorClient />
}

4. Environment variables

# .env.local
NEXT_PUBLIC_CDN_TOKEN=tok_your_license_token
NEXT_PUBLIC_CDN_URL=https://cdn.alggtta.com

Because the NEXT_PUBLIC_ token is inlined into the client bundle and visible to end users, rely on the gateway's domain binding (Origin/Referer checks plus domain-bound decryption) for protection rather than treating the token as a secret.

Embed anywhere (vanilla JS, Web Component, CDN)

Drop @alggtta/editor into any page — not just a React tree — with the imperative mount() factory, the <alggtta-editor> custom element, or a single CDN script tag.

@alggtta/editor renders with React internally, but you do not need a React app to use it. The package root exports two framework-agnostic entry points — the imperative mount() factory and the defineAlggttaEditorElement() custom-element registrar — so you can embed the editor into Rails, Django, Laravel, or plain HTML pages. For pure browser pages with no bundler, the same build is served as a UMD script from the CDN.

1. mount() — imperative factory for any page

Import { mount } from the package root. Call mount(elementOrSelector, props) and it owns a React root for you, returning a MountHandle. The handle exposes update(partialProps) to re-render with merged props (swap content, theme, or token), unmount() to release the root, and ref — the imperative AlggttaEditorRef (insertContent / getJSON / focus / ...) once mounted. mount() is SSR-safe: nothing touches the DOM until you call it.

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

// Selector or HTMLElement both work.
const handle = mount('#editor', {
  token: 'tok_xxx',     // required in production
  preset: 'full',       // 'core' (default) | 'full'
  theme: 'light',       // DaisyUI theme name
})

// Re-render with merged props.
handle.update({ theme: 'dark' })

// Reach the imperative editor ref.
const json = handle.ref?.getJSON()

// Tear down and release the React root.
handle.unmount()

2. <alggtta-editor> Web Component

Import { defineAlggttaEditorElement } and call it once to register the custom element (default tag 'alggtta-editor'; pass a string to use a different tag). The call is a no-op outside the browser, when customElements is unavailable, or if the tag is already defined. Then place the tag anywhere and configure it via attributes. Observed attributes are: token, theme, variant, preset, placeholder, locale, content (content accepts a JSON string or plain text). The element mounts into a light-DOM child rather than a shadow root, so your global DaisyUI theme variables and typography styles apply directly — there is no Shadow DOM isolation yet.

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

// Registers <alggtta-editor>. Pass a tag name to override the default.
defineAlggttaEditorElement()

<alggtta-editor
  token="tok_xxx"
  preset="full"
  theme="light"
  variant="document"
  locale="en"
  placeholder="Start writing..."
></alggtta-editor>

<script>
  // The element emits a 'change' CustomEvent on every edit.
  // detail.json is the Tiptap document JSON.
  document.querySelector('alggtta-editor')
    .addEventListener('change', (e) => {
      console.log(e.detail.json)
    })
</script>

3. CDN UMD script (no bundler)

For a plain HTML page with no bundler, load the obfuscated UMD bundle and stylesheet directly from the CDN. The token is read from the script URL's ?token= query parameter, so the editor and its dynamically imported chunks are authenticated automatically. Because the deployed CDN bundle keeps React external, load the react and react-dom UMD globals before editor.umd.js (as shown below). After the script registers the element, drop in the <alggtta-editor> tag exactly as above.

<!-- The deployed CDN bundle keeps React external — load the UMD globals first. -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://cdn.alggtta.com/editor.css?token=YOUR_TOKEN" />
<script src="https://cdn.alggtta.com/editor.umd.js?token=YOUR_TOKEN"></script>

<alggtta-editor token="YOUR_TOKEN" preset="full" theme="light"></alggtta-editor>

Token & license behavior

• token is required. In all three paths (mount props, the token attribute, or the script ?token= query) the editor will not render without one in production.
• localhost and 127.0.0.1 are treated as development origins — no valid token is needed there, so you can prototype freely before wiring up issuance.
• Production domains need a valid token issued by the CDN/admin system; verifyEndpoint (an AlggttaEditorProps field) points at the CDN gateway and defaults to https://cdn.alggtta.com.
• preset:'full' registers the advanced blocks (advancedBlockExtensions) and advanced slash commands (advancedSlashCommands — database, mermaid, etc.); preset:'core' is the lean default. variant is 'document' (default) | 'embedded' | 'bare'.

Components

The three render surfaces shipped by @alggtta/editor — AlggttaEditor (the recommended React component, with a full props table and the imperative AlggttaEditorRef), UniversalEditor from /legacy (batteries-included toolbar, comments, TOC, export), and ReadOnlyViewer from /export for static JSON rendering — plus the framework-agnostic mount() and <alggtta-editor> web component for non-React pages.

@alggtta/editor exposes three render surfaces. For almost every product use AlggttaEditor — it keeps license verification and feature gating active. UniversalEditor (from /legacy) is the batteries-included surface with a built-in toolbar, comments, table of contents and export. ReadOnlyViewer (from /export) renders saved Tiptap JSON as static, non-editable HTML.

AlggttaEditor (recommended)

The default export and primary entry point. It is a controlled React component that renders the full editing surface — drag handle, bubble menu, slash menu and mobile toolbar — behind a license gate. Import it from the package root and load the stylesheet once in your app.

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

export function Page() {
  return (
    <AlggttaEditor
      token={process.env.NEXT_PUBLIC_ALGGTTA_TOKEN!}
      variant="document"
      preset="core"
      locale="en"
      placeholder="Type '/' for commands..."
      onUpdate={({ json }) => save(json)}
    />
  )
}

Imperative ref: AlggttaEditorRef

Attach a ref to drive the editor imperatively. The ref exposes the underlying Tiptap editor plus convenience methods for inserting content and reading the document.

import { useRef } from 'react'
import { AlggttaEditor } from '@alggtta/editor'
import type { AlggttaEditorRef } from '@alggtta/editor'

const ref = useRef<AlggttaEditorRef>(null)

// ref.current exposes:
//   editor: Editor | null
//   insertImage(url, attrs?)
//   insertContent(content: string | JSONContent)
//   getSelectedText(): string
//   getJSON(): JSONContent
//   getHTML(): string
//   focus(position?)

<AlggttaEditor ref={ref} token={token} />

// later:
ref.current?.insertContent('<p>Hello</p>')
const doc = ref.current?.getJSON()

Framework-agnostic: mount() and <alggtta-editor>

For Rails, Django, Laravel or plain HTML pages, mount(elementOrSelector, props) renders AlggttaEditor into any DOM node and returns a MountHandle with update(partialProps), unmount() and ref. It is SSR-safe: nothing touches the DOM until you call it.

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

const handle = mount('#editor', { token: 'YOUR_TOKEN', preset: 'full' })
handle.update({ theme: 'dark' })
const json = handle.ref?.getJSON()
handle.unmount()

Or register the custom element once and drop a single tag anywhere. defineAlggttaEditorElement(tag = 'alggtta-editor') observes the token, theme, variant, preset, placeholder, locale and content attributes, and emits a 'change' CustomEvent (detail.json) on edits. It mounts into a light-DOM child so global theme variables and typography apply (no Shadow DOM isolation yet).

<!-- The deployed CDN bundle keeps React external — load the UMD globals first. -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://cdn.alggtta.com/editor.css?token=YOUR_TOKEN" />
<script src="https://cdn.alggtta.com/editor.umd.js?token=YOUR_TOKEN"></script>

<alggtta-editor token="YOUR_TOKEN" preset="full" theme="light"></alggtta-editor>

<script>
  // From an npm/bundler setup you would instead:
  //   import { defineAlggttaEditorElement } from '@alggtta/editor'
  //   defineAlggttaEditorElement()
  document.querySelector('alggtta-editor')
    .addEventListener('change', (e) => save(e.detail.json))
</script>

UniversalEditor (/legacy)

UniversalEditor is the batteries-included surface imported from @alggtta/editor/legacy. It ships a built-in toolbar, comments sidebar, table of contents, character count and export UI — all toggled by boolean props — and drags in the heavier domain blocks. Prefer AlggttaEditor for new builds; reach for UniversalEditor when you want that chrome without assembling it yourself.

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

<UniversalEditor
  token={token}
  showToolbar
  showComments
  showTableOfContents
  showExport
  currentUser={{ id: 'u1', name: 'Jane' }}
  onUpdate={(editor) => save(editor.getJSON())}
/>

ReadOnlyViewer (/export)

ReadOnlyViewer, imported from @alggtta/editor/export, renders saved Tiptap JSON as static HTML without mounting a full editor instance — ideal for published pages, feeds and previews. Its content prop accepts JSONContent | null (null renders empty). It is far lighter than booting a live editor.

import { ReadOnlyViewer } from '@alggtta/editor/export'
import '@alggtta/editor/styles.css'
import type { JSONContent } from '@tiptap/core'

export function PublishedDoc({ doc }: { doc: JSONContent | null }) {
  return <ReadOnlyViewer content={doc} className="my-article" />
}

Features

Bilingual Features section for @alggtta/editor v6.2.0: built-in rich text (slash/bubble/drag), core vs full presets, and a Feature | How to enable | Optional dep table covering AI (/ai BYO-key), collaboration (/collab Yjs), database (/database), Mermaid (/mermaid), comments (/comments), export-import (/export), math (KaTeX, /legacy), code highlight (lowlight), and the neuro theme family — every API, import, subpath, and version is verified against the published @alggtta/editor package.

`@alggtta/editor` ships a rich-text core that works out of the box, plus advanced blocks and integrations that you opt into through the `preset` prop or feature subpaths. The recommended entry point is the `AlggttaEditor` component, which keeps license verification and feature gating active. This page catalogues every feature, how to turn it on (root export vs. a subpath like `/ai` or `/database`), and the optional peer dependency each one requires.

Built-in rich text (always on)

The default `core` preset already includes the everyday writing surface: headings, lists, tables, task lists, links, marks (bold/italic/underline/strike/highlight/color), code blocks with syntax highlighting, images, and the three core interaction surfaces — the slash menu (`/`), the bubble (selection) menu, and the block drag handle. These are part of `createCoreExtensions` and need no extra packages.

Presets: core vs. full

The `preset` prop selects how many extensions register. `core` (default) is the lean writing surface. `full` additionally registers the advanced blocks (`advancedBlockExtensions`) and `advancedSlashCommands`, which expose blocks such as callouts, toggles, columns, embeds, mentions, wiki links, and comments through the slash menu. (Database, Mermaid, and Math stay opt-in via their own subpaths / `extensionConfig.customExtensions` — see the catalogue below.) The corresponding factories are `createCoreExtensions`, `createFullExtensions`, and the configurable `createExtensions(config)`, all root-exported.

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

// Lean default — core preset, document shell
<AlggttaEditor token={token} verifyEndpoint={endpoint} />

// Advanced blocks (callouts, toggles, columns, mentions, comments…) via the slash menu
<AlggttaEditor token={token} verifyEndpoint={endpoint} preset="full" />

Feature catalogue

AI writing (bring your own key)

The `/ai` subpath connects the editor's AI surface directly to an LLM provider from the browser using a user-supplied key. `createBrowserLLMHandler(settings, options?)` returns an `OnAIRequestV2` streaming handler. Three providers are supported via the `LLMProvider` union `'anthropic' | 'openai' | 'gemini'` (Claude, OpenAI, Gemini). Each provider's SDK is an optional peer, installed only for the provider you actually use.

import { createBrowserLLMHandler } from '@alggtta/editor/ai'

// settings.provider: 'anthropic' | 'openai' | 'gemini'
const onAIRequest = createBrowserLLMHandler({
  provider: 'anthropic',
  apiKey: userKey,             // user-supplied (BYO-key)
  model: 'claude-opus-4-8',
})
// pass onAIRequest into the editor via onAIRequestV2 (extensionConfig / AlggttaEditor)

Realtime collaboration

The `/collab` subpath turns the Yjs-ready core into a live collaborative editor. `createCollaborationExtensions` binds the document and remote cursors, `usePresence` exposes presence state, and `createIndexeddbPersistence` adds opt-in offline storage. It is provider-agnostic — pair it with y-websocket, Hocuspocus, or y-webrtc. Cursors require the `y-prosemirror` peer and offline persistence requires `y-indexeddb`.

Database, Mermaid, comments and export

Each integration lives on its own subpath so the lean core stays small. Database tables come from `/database` (`createDatabaseExtensions()` + `databaseSlashCommands`, requires `@tanstack/react-table`). Mermaid diagrams come from `/mermaid` (`createMermaidExtensions` + `mermaidSlashCommands`, requires `mermaid`). Inline comments come from `/comments` (`CommentMark`, `useComments`, `CommentSidebar`) — note that thread content lives in hook state, not the document, so persist and rehydrate it with `serializeCommentThreads` / `deserializeCommentThreads`. Export/import comes from `/export` (`ExportDropdown`, `exportSlashCommands`, `ReadOnlyViewer`); PDF export uses `html2pdf.js` and DOCX import uses `mammoth`.

// Each feature on its own subpath
import { createDatabaseExtensions, databaseSlashCommands } from '@alggtta/editor/database'
import { createMermaidExtensions, mermaidSlashCommands } from '@alggtta/editor/mermaid'
import { CommentMark, useComments, CommentSidebar } from '@alggtta/editor/comments'
import { ExportDropdown, exportSlashCommands, ReadOnlyViewer } from '@alggtta/editor/export'
import { createCollaborationExtensions, usePresence } from '@alggtta/editor/collab'

Themes (neuro family)

Themes are applied with the `theme` prop (a DaisyUI theme name, set as `data-theme` on the editor wrapper). Alongside DaisyUI's `light` / `dark`, the editor ships six neuroscience-informed custom themes: `neuro-light` (warm cream, general bright environments), `neuro-dark` (warm-toned dark, halation-reduced), `neuro-sepia` (peach/sepia, dyslexia-friendly), `midnight` (high-contrast focus dark), `matcha` (low-saturation green for long writing), and `sunset` (warm coral/orange). The root-exported `ThemeToggle` / `SimpleThemeToggle` components let users switch between them.

import { AlggttaEditor, ThemeToggle } from '@alggtta/editor'

<AlggttaEditor token={token} verifyEndpoint={endpoint} theme="neuro-light" />
// Or expose a switcher:
<ThemeToggle />

Subpath APIs & extension config

Reference for the @alggtta/editor subpath entries, the createExtensions family for assembling your own Tiptap editor, and the public-API policy that keeps internal hooks out of the root barrel.

`@alggtta/editor` (v6.2.0) ships a lean root entry plus nine feature subpaths. Each subpath is independently importable, so optional peers (such as `@tanstack/react-table` or `mermaid`) are only pulled in when you import the matching subpath. The recommended product path is the root `AlggttaEditor` component; the subpaths and `createExtensions` family exist for advanced integrations that assemble their own Tiptap editor.

Public subpath entries

createExtensions / createCoreExtensions / createFullExtensions

For advanced integrations that drive a raw Tiptap editor, the root barrel exports three factory functions. `createCoreExtensions(config)` returns the lean core bundle; `createExtensions` is an alias for it. `createFullExtensions(config)` adds the advanced editing blocks (callout, toggle, columns, embed, file attachment, mention, wiki link, comments, find/replace, etc.) plus their slash commands — the same bundle that `preset:'full'` registers. Database, Mermaid, Math, and AI stay explicit opt-ins via their subpaths so 'full' never forces their optional peers on every consumer.

import { useEditor } from '@tiptap/react'
import { createExtensions } from '@alggtta/editor'
import '@alggtta/editor/styles.css'

// createExtensions === createCoreExtensions (lean core bundle)
const extensions = createExtensions({
  placeholder: 'Write here...',
  characterCount: { limit: 10000 },
  link: { autolink: true, openOnClick: false },
  customSlashCommands: [],
})

const editor = useEditor({ extensions, content: '' })

Compose optional features through `ExtensionConfig`. Pass node extensions via `customExtensions` and their slash commands via `customSlashCommands`. The same config surface works whether you call a factory directly or pass `extensionConfig` to `AlggttaEditor`:

import { createFullExtensions } from '@alggtta/editor'
import { createDatabaseExtensions, databaseSlashCommands } from '@alggtta/editor/database'
import { useEditor } from '@tiptap/react'

// Full bundle + the DB block composed via extensionConfig
const extensions = createFullExtensions({
  placeholder: 'Write here...',
  customExtensions: createDatabaseExtensions(),
  customSlashCommands: databaseSlashCommands,
})

const editor = useEditor({ extensions, content: '' })

Public API policy

Internal hooks, providers, and menu primitives are deliberately NOT exported from the root barrel — this prevents assembling a license-free editor by importing the raw building blocks. The boundary is enforced in CI by an automated export-contract test that asserts these names are `undefined` on the main entry. Examples of intentionally root-private symbols:

• `useEditor` (raw Tiptap), `EditorProvider`, `Toolbar`, `BubbleMenu` — editor assembly internals.
• `verifyLicense`, `initEditor`, `getDefaultExtensions`, `defaultExtensions` — license/bootstrap internals.
• Headless hooks (`useAlggttaEditor`, `useEditorState`, `useToolbarState`) are reachable only via `/headless`, not the root.
• Feature surfaces (`DatabaseGrid`, `MermaidExtension`, `AIPanel`, slash-command bundles) are reachable only via their dedicated subpaths.

Theming

How to theme @alggtta/editor: the neuroscience-based DaisyUI 5 theme family (neuro-light default, neuro-dark, neuro-sepia, midnight, matcha, sunset) plus built-in light/dark; setting a theme via the AlggttaEditor theme prop, the <alggtta-editor> theme attribute, or data-theme on a wrapper; the SimpleThemeToggle/ThemeToggle exports; required fonts; and the styles.css import.

@alggtta/editor ships a neuroscience-based theme family built on DaisyUI 5. Themes are pure CSS — selected by a single attribute, with no JavaScript runtime cost — so switching a theme recolors the entire editor (chrome, syntax highlighting, menus) at once. The design rationale (APCA polarity, blue-light suppression, OKLCH tokens) is available from us on request.

Available themes

Six custom themes plus DaisyUI's two built-ins are bundled. neuro-light is the default. neuro-dark also responds automatically to prefers-color-scheme: dark.

Setting a theme

There are three equivalent ways to apply a theme — they all resolve to a DaisyUI [data-theme="..."] selector. Pick the one that matches how you mounted the editor.

1. The theme prop on the React AlggttaEditor component (a string DaisyUI theme name). It is applied as data-theme on the editor's wrapper element, so it scopes the theme to just this editor instance:

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

export function Page() {
  return (
    <AlggttaEditor
      token={import.meta.env.VITE_ALGGTTA_TOKEN}
      theme="neuro-dark"
      placeholder="Write something…"
    />
  )
}

2. The theme attribute on the <alggtta-editor> custom element. theme is one of its observed attributes, so changing it at runtime re-applies the theme:

<script type="module">
  import { defineAlggttaEditorElement } from '@alggtta/editor'
  defineAlggttaEditorElement() // registers <alggtta-editor>
</script>

<alggtta-editor
  token="YOUR_TOKEN"
  theme="neuro-sepia"
  variant="document"
></alggtta-editor>

3. A data-theme attribute on any ancestor wrapper. DaisyUI applies the nearest [data-theme] in the DOM, so you can theme a whole page (or a region) by setting it on a parent element. This is also how the built-in toggles work — they set data-theme on <html>:

// Theme the whole document (what ThemeToggle does under the hood)
document.documentElement.setAttribute('data-theme', 'matcha')
localStorage.setItem('theme', 'matcha') // optional persistence

Built-in theme toggles

Two ready-made selector components are root-exported: SimpleThemeToggle (a compact <select>) and ThemeToggle (the same plus a transient confirmation toast). Both list all eight themes, set data-theme on document.documentElement, and persist the choice to localStorage under the 'theme' key.

import { SimpleThemeToggle, ThemeToggle } from '@alggtta/editor'

function Toolbar() {
  // Either component sets <html data-theme> + persists to localStorage('theme')
  return <SimpleThemeToggle />
}

Fonts

The theme system pairs three typefaces: Atkinson Hyperlegible (Latin body — designed by the Braille Institute for low-vision legibility, disambiguating I/l and O/0), Pretendard (Korean body), and JetBrains Mono (code, with contextual ligatures for operators like => and !=). The package ships the CSS that references them via the --ue-font-sans and --ue-font-mono variables, but the font files themselves are loaded by your host page — add the Atkinson Hyperlegible + JetBrains Mono (Google Fonts) and Pretendard (jsDelivr) <link> tags shown below, otherwise the system font fallback chain is used.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap"
  rel="stylesheet"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
/>

Building a wiki

Combine @alggtta/editor with the private companion @alggtta/wiki-store (SQLite, provided to licensees) to build a Notion/Obsidian-style wiki: the editor owns the page body plus the [[ and @ triggers and link enumeration, the store owns pages, the backlink index, full-text search and versions, and your app owns routing, the backlink panel and the graph.

@alggtta/editor ships the primitives a wiki needs — a rich page body, the [[ wiki-link and @ mention triggers, link enumeration, and an autosave hook — but it deliberately leaves storage to you. The private companion package @alggtta/wiki-store (v0.1.0, SQLite via node:sqlite + FTS5) — provided to licensees, not on the public npm registry — is the reference store: it owns pages, the backlink index, full-text search, tags, properties, versions and the graph. Your app wires them together with routing and a backlink panel. Request the full integration blueprint with your license.

Responsibility split

Each layer owns a clear slice. The editor never touches storage; the store never renders UI. This keeps the editor bundle lean and lets you swap the store (or skip it entirely) without forking the editor.

Install

# Editor + required peers (public npm registry)
npm install @alggtta/editor react react-dom @tiptap/core @tiptap/pm @tiptap/react

# @alggtta/wiki-store is a PRIVATE companion package (Node 22+, node:sqlite + FTS5).
# It is NOT on the public npm registry — licensees receive it on request and
# install it from the tarball we provide, e.g.:
#   npm install ./alggtta-wiki-store-0.1.0.tgz
# Request access: https://alggtta.com

The core loop

Create one store, then for each page render AlggttaEditor with preset="full" (this registers the WikiLink and Mention nodes). Wire the two suggestion sources through extensionConfig.wikiLink.search and extensionConfig.mention.items, and on every update derive outbound links with getWikiLinks(json) and persist them in a single store.savePage call.

'use client'
import { useMemo } from 'react'
import { AlggttaEditor, getWikiLinks } from '@alggtta/editor'
import {
  createWikiStore,
  createWikiSearchSource,
  createMentionSource,
} from '@alggtta/wiki-store'

// One store per database file (create it once, outside React).
const store = createWikiStore({ filename: './wiki.db' })

function WikiPage({ pageId, token }: { pageId: string; token: string }) {
  const page = useMemo(() => store.getPage(pageId), [pageId])

  return (
    <AlggttaEditor
      token={token}
      preset="full"               // registers WikiLink + Mention nodes
      content={page?.content}
      extensionConfig={{
        // [[ -> async page search; selecting inserts a wikiLink node
        wikiLink: { search: createWikiSearchSource(store, { excludeId: pageId }) },
        // @ -> people / pages
        mention: { items: createMentionSource(store) },
      }}
      onUpdate={({ json }) => {
        // Persist body + reindex outbound links + FTS in one call
        store.savePage({
          id: pageId,
          title: page?.title ?? 'Untitled',
          content: json,
          links: getWikiLinks(json).map((l) => ({
            targetId: l.pageId,
            targetTitle: l.pageTitle,
            kind: 'wiki' as const,
          })),
        })
      }}
    />
  )
}

Debounced autosave

Saving on every keystroke is wasteful. Swap the inline onUpdate for the useAutosave hook from @alggtta/editor/headless — it debounces edits (default 800ms), flushes on blur and on unmount, and exposes a save status. Pair it with the store's createAutosaveHandler for a one-liner persist callback.

import { useAutosave } from '@alggtta/editor/headless'
import { createAutosaveHandler } from '@alggtta/wiki-store'

const save = createAutosaveHandler(store)

// `editor` is the Tiptap instance, e.g. from a ref or useAlggttaEditor
const { status, lastSavedAt, saveNow } = useAutosave({
  editor,
  delay: 800,
  onSave: ({ json }) => save(pageId, json),
})
// status: 'idle' | 'pending' | 'saving' | 'saved' | 'error'

Backlinks and graph

Because every save reindexes outbound links, the store can answer backlink, unlinked-mention and graph queries instantly. The editor's job ends at getWikiLinks(json); rendering the backlink panel and the graph canvas is your app's job.

// Pages that link here, and titles mentioned but not yet linked
const backlinks = store.getBacklinks(pageId)
const unlinked = store.getUnlinkedMentions(pageId)

// Whole-wiki graph -> feed to D3-force / Cytoscape / react-force-graph
const { nodes, edges } = store.getGraph()

// Cross-page full-text search (FTS5 prefix + snippets)
const results = store.search('graph view') // [{ id, title, snippet }]

What stays your job

Routing, the page tree/sidebar, the graph canvas, permissions and redirect handling are app concerns — but every query they need (search, backlinks, graph, tags, properties, versions) is already in the store. The editor emits a wiki-link-click CustomEvent when a wiki link is clicked, so you can route on it.

editorEl.addEventListener('wiki-link-click', (e) => {
  router.push(`/p/${e.detail.pageId}`)
})

Validation & support

Validation and support: local checks (pnpm typecheck | lint | test | build), production tokens from the CDN/admin system (passed via the token prop, verified by the CDN gateway at verifyEndpoint), and contacting the team via https://alggtta.com for help or a custom build.

This section covers how to validate an `@alggtta/editor` integration locally, where to obtain a production license token, and how to reach the team for help or a custom build. The package is commercial (UNLICENSED, EULA) and is published to the npm registry as `@alggtta/editor` (currently v6.2.0).

Local validation

Run these four commands from the repository root to validate types, lint rules, unit tests, and the production build before shipping an integration:

pnpm typecheck   # tsc --noEmit
pnpm lint        # eslint .
pnpm test        # vitest run
pnpm build       # vite build (production build)

Getting a production token

Production tokens are issued and managed by the CDN/admin system, not generated in your own code. Each token is bound to a set of allowed domains and a plan, and the CDN gateway verifies it at runtime (Origin/Referer check plus a domain-bound encrypted boot config). Pass the issued token to the editor as the `token` prop:

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

<AlggttaEditor
  token={process.env.NEXT_PUBLIC_CDN_TOKEN}   // issued by CDN/admin
  verifyEndpoint="https://cdn.alggtta.com"     // CDN gateway base URL
  content=""
/>

Getting help / requesting a custom build

For licensing questions, token provisioning, bug reports, or a custom build (additional features, private extensions, enterprise terms), contact the team through the site at https://alggtta.com. Include your package version, a minimal reproduction, and the output of the failing validation command above to speed up triage.

• Package: `@alggtta/editor` v6.2.0 (UNLICENSED, commercial + EULA), published on npm.
• Companion (private): `@alggtta/wiki-store` v0.1.0 (SQLite via `node:sqlite` + FTS5) for wiki backlink/search/version storage — not on the public npm registry; provided to licensees on request.
• Installable version: check the public npm registry — `npm view @alggtta/editor version` (currently 6.2.0).
• Contact / custom builds: https://alggtta.com