Aa documentation

Aa stores Markdown and draws it. One editable element per block keeps source offsets stable through formatting.

On a page

import { createEditor } from '@0001-labs/aa'
import '@0001-labs/aa/aa.css'

const editor = createEditor(host, {
  value: '# A note',
  toolbar: true,
  onChange: markdown => save(markdown),
})

Command-K, or Control-K, opens a field for a link. Escape selects the current block. Command-A selects that block, then the document. Tab nests a list or moves between table cells. Call destroy() when the editor leaves the page.

selection(), selectRange(), replace(), and transaction() work in Markdown offsets. decorate() can mark a range for a comment or another person’s caret without changing the Markdown.

React

import { AaEditor } from '@0001-labs/aa/react'
import '@0001-labs/aa/aa.css'

<AaEditor value={markdown} onChange={setMarkdown} toolbar />

React is an optional peer dependency. The ref exposes editor, focus(), undo(), and redo().

A shared document

connectCollaboration() from @0001-labs/aa/collaboration keeps one Yjs document in sync through a transport you provide. Local undo leaves remote edits in place. Wait for connection.ready before treating the document as current, and destroy the connection before the editor.

A Convex component ships at @0001-labs/aa/convex.config. Wrap its calls in your own authenticated functions, and check permission there. Convex is an optional peer dependency. The editor core imports neither React nor Yjs.

View on npm