Word-grade documents,
in one React component.

storytold’s open-source WordCraft editor, packaged for React: the ribbon, real pages, tracked changes and .docx. Co-editing, AI and version history are one prop each.

Get startednpm i @gamine/wordcraft-react

The editor with the ribbon, rulers and a document

The AI bar with quick actions and the prompt box

Version history: a version shown read only, with Restore

Two people editing one document, each with a cursor

Hover a picture to see more of it. Every feature below has a page with screenshots, a live example and the code.

Everything in the box

What ships today. Features tagged Extra are additions of this package, not part of Microsoft Word or WordCraft.

The whole word processor

WordCraft’s ribbon, styles, tables, headers and footers, footnotes, equations, comments and Track Changes, on real pages.

Inline tools, as on Windows

The two-row mini toolbar over a selection and above the right-click menu, with New Comment.

Co-editingExtra

Yjs with any provider. Live cursors and per-person undo.

AI and AI StudioExtra

A writing bar with skills, letterheads, palettes and your own key.

Version historyExtra

Versions recorded as you work. View, name, restore or download.

Fonts on demandExtra

The Google Fonts library in the font box, each name in its own face.

The font box, each name drawn in its own font

Command API

Every ribbon action is a command you can run from code. Export to .docx, PDF, HTML or Markdown.

Phones and tabletsExtra

Word for Android’s shape: touch gestures and one palette at the bottom.

The phone layout: title bar, the page in Mobile View and the quick bar

Host controls

Choose the tabs, collapse or hide the ribbon and title bar, set the mode and turn commands off.

Open

Document viewer

Viewing mode with the chrome hidden: faithful pages, read only.

Open

Drop it in like any editor

It renders on the server as a sized box and starts in the browser, so the App Router needs no dynamic import.

Saves reach your app through onSave, including Word-style AutoSave.
Your bundler emits the WebAssembly binary and caches it.
Kept in step with WordCraft (now eae2421): synced every two hours, released when the tests pass.

'use client';
import { WordcraftEditor } from '@gamine/wordcraft-react';

export default function Brief() {
  return (
    <WordcraftEditor
      user={{ name: 'Wanjiru Kamau' }}
      ai
      versionHistory
      onSave={(file) =>
        fetch('/api/brief', { method: 'PUT', body: file.blob })
      }
    />
  );
}

The Craft packages

Open-source look-alikes of the Office apps, packaged for React. Each follows its upstream project and the same versioning rule.

@gamine/wordcraft-react Available

Packages storytold’s WordCraft, the Microsoft Word look-alike.

@gamine/gridcraft-react Planned

Will package storytold’s GridCraft, the Microsoft Excel look-alike, the same way.

Up next

Getting started

Install the package and put the editor in a page.

Playground

Change every prop and watch the editor follow.

Word-grade documents,in one React component.