---
title: Document Editor Playground
emoji: "📝"
colorFrom: indigo
colorTo: purple
sdk: static
app_file: index.html
pinned: false
license: gpl-3.0
short_description: Compare six open-source rich-text editors in one UI
---

# Document Editor Playground

Compare six open-source authoring editors — **TipTap**, **Toast UI Editor**,
**Editor.js**, **Slate**, **Lexical**, and **CKEditor 5** — side by side in one
consistent, full-page workspace. Type the same content into each, apply
formatting, run diagnostics, and see how they differ.

## Editors

| Editor | What it is | Upstream |
| --- | --- | --- |
| TipTap | Headless ProseMirror framework for deeply customized authoring UX | https://github.com/ueberdosis/tiptap |
| Toast UI Editor | Markdown + WYSIWYG editor with practical built-in formatting | https://github.com/nhn/tui.editor |
| Editor.js | Block-styled editor that stores content as structured blocks | https://github.com/codex-team/editor.js |
| Slate | Framework for custom rich-text editors with full schema control | https://github.com/ianstormtaylor/slate |
| Lexical | Extensible React editor framework from Meta | https://github.com/facebook/lexical |
| CKEditor 5 | Production-ready rich-text editor framework | https://github.com/ckeditor/ckeditor5 |

Each editor has its own route (`/tiptap/`, `/toast/`, `/codex/`, `/slate/`,
`/lexical/`, `/ckeditor/`) behind a shared shell providing navigation, a theme
toggle, controls, diagnostics, and comments. `/` is the editor picker.

## About this repository

This is the **deployment repository** for the Space. The application is
developed in [DocEditorPlayground](https://github.com/eputnam77/DocEditorPlayground)
and vendored into [`app/`](app); `UPSTREAM.json` records exactly which upstream
commit is deployed.

Do not edit files under `app/` — it is a mirror, and edits are overwritten on
the next sync. Change upstream, then re-sync. See [DEPLOY.md](DEPLOY.md).

## How the Space runs

This is a **Static Space**: Hugging Face serves the files in this repository
directly, with no container and no compute. The site is a Next.js static export
(`output: "export"`) built on a workstation by `scripts/build-static.ps1` and
committed here, so a push goes live immediately with no build wait and no cold
start.

The generated files at the repository root (`index.html`, `_next/`, the route
directories) are build output — see `.space-build-manifest`. The build inputs are
`app/` plus [`overlay/`](overlay), a small set of static-only additions.

### One difference from running it as a server

A static export has no Next.js API routes, so upstream's `POST /api/ai-suggest`
does not exist here. `overlay/public/ai-suggest-shim.js` answers that request in
the browser with the same contract the upstream stub implemented — validate,
strip zero-width characters, uppercase — so TipTap's AI Suggest behaves exactly
as it does locally.

That stub was never a real model. To make AI Suggest genuinely intelligent while
staying on a free Static Space, replace the shim's `suggest()` with a
[transformers.js](https://github.com/huggingface/transformers.js) call and run a
small model in the browser. A server-side LLM would instead mean hosting where
Next.js can run, since a static page cannot hold an API key.

## Local development

Build the exact site this Space serves:

```powershell
.\scripts\build-static.ps1
python -m http.server 8000
```

Or run the vendored app as a normal dev server with Node 20:

```bash
cd app
npm ci
npm run dev     # http://localhost:3000
```

For real feature work use the upstream repo — it has the tests, lint config, and
docs this deployment copy deliberately omits.

## License

GPL-3.0-only, inherited from the upstream project. See [`app/LICENSE`](app/LICENSE).