ai-sparkwrite-editor

A composer that writes into the document

Type a request under the editor and watch it stream into the page as headings, lists, tables and code. Keep, undo, retry, or refine the same span. One undo step.

The whole document, one click

Continue writing, summarize, outline, suggest a title, extract action items, fix grammar everywhere, translate — with the document as context and its structure preserved.

Rewrite what you select, finish what you type

Improve, shorten, translate, turn into a table or a list from the selection menu; Space on an empty line asks AI; ghost text completes your sentence, Tab keeps it.

Formulas and diagrams from a sentence

Describe a formula or a flow; the Katex and Mermaid dialogs write the source and render it live.

Your model, your rules

One URL on your backend receives the conversation as JSON and answers with text or a stream; which provider and model reply is your business. Answers are parsed through the editor schema, so nothing is pasted and nothing unknown gets in.

Composable, React or Vue

One import per framework, or the whole editor as one `RichTextKit` with a ready-made toolbar and menus. The AI engine and every block live in a framework-free core shared by both UIs.

Everything a document needs

Tables, dividers, code with language detection, images with cropping and upload tracking, columns, callouts, Katex, Mermaid, Excalidraw, Word/PDF/Markdown import and export.

Pastes and languages handled

Word lists and code-editor snippets paste correctly; 16 languages load on demand with matching CJK, Devanagari and Bengali fonts.

Record and replay

Every edit can be recorded as timestamped steps and played back like a screen recording of the document.

Fits your design system

Prefixed Tailwind classes, a handful of CSS variables, exported toolbar primitives for custom menus and custom blocks.

How it works

Every answer is Markdown, parsed through the editor's own schema. Nothing is pasted; a table is a table.

Ask

Type in the composer under the editor, click a chip (continue, summarize, outline, title, action items, grammar, translate), select text and pick Improve, or press Space on an empty line.

Watch it land

The model streams into a tracked span in the page. Headings, lists, tables, code and task lists take shape as real nodes while the text is still arriving.

Keep, undo or refine

The whole answer is one undo step. Keep it, put the original back, retry, or type a follow-up and the same span is rewritten with the conversation so far.

The editor with the AI composer open under the document

One core, two UIs

Extensions, the AI engine and every block live in a framework-free core. ai-sparkwrite-editor is the React import, ai-sparkwrite-editor/vue the Vue one — same features, same stylesheet.

React

import { RichTextKit, RichTextKitToolbar, RichTextKitMenus } from 'ai-sparkwrite-editor';

useEditor({ extensions: [RichTextKit.configure({ ai: { endpoint: '/api/ai' } })] });

<RichTextProvider editor={editor}>
  <RichTextKitToolbar />
  <EditorContent editor={editor} />
  <RichTextKitMenus />
</RichTextProvider>

Vue

import { RichTextKit, RichTextKitToolbar, RichTextKitMenus } from 'ai-sparkwrite-editor/vue';

useEditor({ extensions: [RichTextKit.configure({ ai: { endpoint: '/api/ai' } })] });

<RichTextProvider :editor="editor">
  <RichTextKitToolbar />
  <EditorContent :editor="editor" />
  <RichTextKitMenus />
</RichTextProvider>

ai-sparkwrite-editorTell it what you want. It writes it in the page.