# @sutrata/editor

> React + ProseMirror screenplay editor for Sutra, with first-class support for Indic and other complex scripts.

Latest version **0.1.2** (published 2026-09-24) · GPL-3.0-or-later license · 0 weekly downloads

## Install

```sh
npm install @sutrata/editor
pnpm add @sutrata/editor
yarn add @sutrata/editor
bun add @sutrata/editor
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2026-09-24 |
| First published | 2026-09-24 |
| Weekly downloads | 0 |
| License | GPL-3.0-or-later |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 18 |
| Unpacked size | 946.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | sivarajd |
| Keywords | sutra, screenplay, editor, prosemirror, react, indic, unicode, fountain |

## Links

- npm: https://www.npmjs.com/package/@sutrata/editor
- Repository: https://github.com/sutrata/sutrata
- Homepage: https://github.com/sutrata/sutrata/tree/main/packages/editor#readme
- Issues: https://github.com/sutrata/sutrata/issues
- npm.io page: https://npm.io/package/@sutrata/editor

## Dependencies (18)

- [diff](https://npm.io/package/diff.md) ^9.0.0
- [docx](https://npm.io/package/docx.md) ^9.7.1
- [jszip](https://npm.io/package/jszip.md) ^3.10.1
- [@sutrata/parser](https://npm.io/package/@sutrata/parser.md) 0.1.1
- [@codemirror/view](https://npm.io/package/@codemirror/view.md) ^6.43.1
- [@lezer/highlight](https://npm.io/package/@lezer/highlight.md) ^1.2.3
- [prosemirror-view](https://npm.io/package/prosemirror-view.md) ^1.33.0
- [@codemirror/state](https://npm.io/package/@codemirror/state.md) ^6.6.0
- [prosemirror-model](https://npm.io/package/prosemirror-model.md) ^1.21.0
- [prosemirror-state](https://npm.io/package/prosemirror-state.md) ^1.4.3
- [prosemirror-keymap](https://npm.io/package/prosemirror-keymap.md) ^1.2.2
- [prosemirror-history](https://npm.io/package/prosemirror-history.md) ^1.4.0
- [@codemirror/commands](https://npm.io/package/@codemirror/commands.md) ^6.10.3
- [@codemirror/language](https://npm.io/package/@codemirror/language.md) ^6.12.3
- [prosemirror-commands](https://npm.io/package/prosemirror-commands.md) ^1.5.2
- [prosemirror-transform](https://npm.io/package/prosemirror-transform.md) ^1.9.0
- [prosemirror-schema-basic](https://npm.io/package/prosemirror-schema-basic.md) ^1.2.2
- [@codemirror/theme-one-dark](https://npm.io/package/@codemirror/theme-one-dark.md) ^6.1.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2026-09-24
- 0.1.1 — 2026-09-24
- 0.1.0 — 2026-09-24

## README

# @sutrata/editor

The React screenplay editor behind [Sutrata](https://github.com/sutrata/sutrata), for writing scripts in **Sutra**, a plain-text screenplay format for world languages. It's built on ProseMirror and handles Indic and other complex scripts properly:
- Text is stored in logical order.
- The cursor and selection move by grapheme cluster (user-perceived character).
- Find/replace matches after NFC normalization, so differently encoded forms of the same text still match.

This package contains the complete editor:
- WYSIWYG and source modes, with smart Enter that cycles through screenplay elements.
- A scene navigator, find/replace, a title-page form and screenplay styles.
- Statistics, autocomplete and spellcheck.
- Export to PDF, DOCX, Fountain and workflow reports, including romanized exports.
- Localized UI.

Sutra parsing and serialization come from [`@sutrata/parser`](https://www.npmjs.com/package/@sutrata/parser).

## Install

```bash
npm install @sutrata/editor react react-dom
```

`react` and `react-dom` (^18.3) are peer dependencies.

## Usage

The editor doesn't read or write files itself. You pass it a `StorageAdapter`, and it saves, opens and keeps version history through that adapter. The same editor can therefore run on local files, in a desktop shell or against a server.

```tsx
import React from 'react'
import { createRoot } from 'react-dom/client'
import {
  TranslationProvider,
  LanguageProvider,
  DocumentProvider,
  AppShell,
  type StorageAdapter,
} from '@sutrata/editor'
import '@sutrata/editor/dist/shell/fonts/fonts.css'
import '@sutrata/editor/dist/styles/screenplay.css'

const storageAdapter: StorageAdapter = {
  // documents and version history
  saveDocument: async (path, content) => { /* ... */ },
  loadDocument: async (path) => null,
  listVersions: async (path) => [],
  // file dialogs
  openFile: async () => null,        // { name, content, handle }
  openDocx: async () => null,        // { name, buffer }
  openStyleJson: async () => null,   // { name, text }
  saveFile: async (name, content, handle) => null, // { savedName, handle }
  // custom screenplay styles
  saveStyle: async (style) => {},
  loadAllStyles: async () => [],
  deleteStyle: async (id) => {},
}

createRoot(document.getElementById('root')!).render(
  <TranslationProvider>
    <LanguageProvider>
      <DocumentProvider storageAdapter={storageAdapter}>
        <AppShell />
      </DocumentProvider>
    </LanguageProvider>
  </TranslationProvider>,
)
```

`StorageAdapter` also has optional methods: `saveVersion`, `deleteAllVersions`, `persistFileHandle` and `restoreFileHandle`. For a complete implementation built on IndexedDB and the File System Access API, see [`local-storage-adapter.ts`](https://github.com/sutrata/sutrata/blob/main/packages/app/src/local-storage-adapter.ts) in the Sutrata app.

Inside the providers, `useDocument()` gives you the current Sutra text, its parsed AST and the editor state.

### Fonts

`fonts.css` declares Noto font faces for every supported script, loaded from `/fonts/*.woff2` on your own site. This package does not include the font files. Copy them from [`packages/app/public/fonts`](https://github.com/sutrata/sutrata/tree/main/packages/app/public/fonts) into your app's `/fonts/` path, or use your own `@font-face` rules. Without them, some scripts may display as missing-glyph boxes (tofu).

## Extension points

Beyond `StorageAdapter`, the package exports type definitions for more extension points: `AIProvider`, `SpeechProvider`, `SessionContext`, `PanelRegistry`, `CommandRegistry`, `ExportRegistry`, `CollabBinding` and `DecorationProvider`. **These are type-only previews and are not wired into the editor yet.** Their shapes may change before 1.0.

## Status

Pre-1.0. The API may change between minor versions.

## License

[GPL-3.0-or-later](https://github.com/sutrata/sutrata/blob/main/packages/editor/LICENSE).

---
_Source: https://npm.io/package/@sutrata/editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._