Skip to content

Packages & APIs

SciFlow publishes a small set of npm packages. Use this page to decide which one to consume and how they fit together.

Package Description When to use
@sciflow/editor-start Web components (<sciflow-editor>, <sciflow-formatbar>) plus the browser-ready bundle. Fastest way to embed the editor without wiring ProseMirror manually.
@sciflow/editor-core Editor runtime, command system, sync strategy contracts, and helper types. Framework integrations that need full control over rendering, storage, or collaboration.
@sciflow/schema-prosemirror Manuscript schema definition compatible with ProseMirror and SciFlow JSON snapshots. Validating or transforming content outside the editor, building import/export pipelines.

@sciflow/editor-start

  • Registers custom elements automatically when the bundle loads.
  • Ships a fully themed editor surface, formatter toolbar, and demo helpers (outline, references).
  • Provides reference implementations for sidebars so you can copy/paste patterns into your app.

@sciflow/editor-core

import { Editor } from '@sciflow/editor-core';

const editor = await Editor.create({
  docId: 'draft-42',
  sync: mySyncStrategy,
  initialDoc,
  initialVersion: 0,
});

editor.mount(document.querySelector('#editor-root'));

Key APIs:

  • editor.getCommands() → immediate, flow, and availability checks.
  • editor.onDoc(handler) / editor.onSelection(handler) → push-style subscriptions.
  • SyncStrategy interface → plug your persistence/collaboration layer.

Sharing commands between runtimes

Both the web component and the core editor expose the same command runner. Recipes in the User Guide work in either environment—the only difference is how you access the runner (element.commands vs. editor.getCommands()).

@sciflow/schema-prosemirror

  • Exports the manuscript schema as well as helper functions such as nodeFromJSON.
  • Useful when validating documents on the server, writing migration scripts, or generating previews outside the editor.

Where to Go Next