Tiptap Editor Integration

Use @slexkit/tiptap when editor documents need live previews for slex code blocks. Tiptap keeps editing, selection, and Markdown import/export; SlexKit only takes over CodeBlock nodes whose language is slex.

Run it from the repository:

bun run build:core
bun run --filter @slexkit/tiptap build
bun examples/dev-server.mjs tiptap

The source lives in examples/tiptap. The Tiptap and Streamdown examples use the same RC low-pass filter content, so editor and read-only hosts can be checked against the same input.

Open the integration guide · View runnable source

Responsibilities

Tiptap keeps document editing and Markdown import/export. State-only slex fences share one artifact runtime with later preview blocks; non-slex code blocks stay native to Tiptap.

Minimal wiring:

import { Editor } from "@tiptap/core";
import StarterKit from "@tiptap/starter-kit";
import { Markdown } from "@tiptap/markdown";
import { createSlexKitTiptapExtension } from "@slexkit/tiptap";
import "@slexkit/theme-shadcn/style.css";
import "@slexkit/tiptap/style.css";

const editor = new Editor({
  element: document.querySelector("#editor"),
  extensions: [
    StarterKit.configure({ codeBlock: false }),
    Markdown,
    createSlexKitTiptapExtension({ artifactId: "doc-1" })
  ],
  content: markdown,
  contentType: "markdown"
});

Use @slexkit/tiptap for editor previews. For read-only Markdown output, use Streamdown or the custom Markdown host API instead.