@openstage/glyph-element

The <glyph-editor> Web Component — Glyph's framework-agnostic block / rich-text editor. JSON is the canonical document format; the editing engine is fully hidden behind a stable element API. Ships as a self-contained ESM bundle (no peer dependencies).

npm i @openstage/glyph-element

Quick start

import '@openstage/glyph-element'; // registers <glyph-editor> as a side effect

<glyph-editor id="editor" placeholder="Write your article…"></glyph-editor>

const editor = document.querySelector('glyph-editor')!;

editor.setContent(savedDocument); // load (e.g. fetched from your backend)

editor.addEventListener('content-change', (e) => {
  const doc = (e as CustomEvent).detail; // an EditorDocument (plain JSON)
  saveToBackend(doc);
});

editor.getJSON() returns the current document as plain JSON, safe to JSON.stringify and store verbatim.

Frameworks

It is a normal DOM element, so any framework can consume it. Two rules:

1. Set rich values (objects/arrays) as JS properties, not HTML attributes.
2. Listen for the custom events (content-change, selection-change, ready, focus, blur).

Configuration

Assign editor.config once per mount (assigning rebuilds the instance; content is preserved):

editor.config = {
  showHeader: true, // false = headless
  floatingHeader: true, // sticky toolbar
  bordered: true, // false = transparent outer border (seamless embed)
  maxHeight: '70vh', // bounded internal scroll
  enableSlashCommands: true, // the "/" menu
  toolbar: ['bold', 'italic', 'link', 'spacer', 'status'],
  icons: { bold: (d) => myIconNode(d, 'bold') },
};

Configurable/orderable toolbar with custom icons, slash commands, CSS-variable theming (light/dark), floating header, bounded height, and headless mode. Overlays (slash menu, link UI) are positioned with Floating UI so they stay anchored even inside transform/filter/contain ancestors.

To register under a different tag:

import { defineGlyphEditor, GlyphEditor } from '@openstage/glyph-element';
defineGlyphEditor('my-editor');

The public API exposes no third-party types.

Documentation

Full configuration, theming, events, keyboard, and backend-integration reference: https://codeberg.org/open-stage/glyph#readme

License

MIT © Gabriel Bornea