Wordgard: A New Semantic Rich-Text Editor from the Creator of ProseMirror

Wordgard: A New Semantic Rich-Text Editor from the Creator of ProseMirror

Wordgard is an open-source JavaScript library designed for building structured, in-browser rich-text editors. Created by Marijn Haverbeke, the author of ProseMirror, Wordgard provides a framework where developers can precisely control the document structure via a schema, rather than providing a free-form HTML editor.

Core Architecture and Features

Wordgard is built as a semantic editor system, meaning it prioritizes the structure of the content over the raw HTML representation. This approach allows developers to create customized editors that maintain strict document integrity.

Schema-Based Document Control

Wordgard uses a schema to define the exact structure of documents. This allows developers to create custom document elements and ensure that the content adheres to a specific format, preventing the arbitrary nesting or invalid HTML that often plagues free-form editors.

Versatile Programming Interface

The library features what the author describes as a "Deluxe API," designed for generality and versatility. This API is intended to serve as a foundation for complex, demanding editors that require deep customization beyond standard out-of-the-box functionality.

Modular Extension System

Most editor features are implemented as extensions. This modularity allows developers to replace or modify specific behaviors when the default implementations do not meet their requirements.

Advanced Content Support

Wordgard includes native support for several complex editing requirements:

  • Collaborative Editing: The system supports multiple users editing the same document simultaneously, with mechanisms to merge concurrent edits.
  • Structured Content: The editor can handle tables, nested lists, captioned figures, and other custom structures.
  • Right-to-Left (RTL) Support: The library is direction-aware for both the interface and the content, supporting bidirectional text and RTL documents.
  • Accessibility: The editor is designed to work for keyboard-only users, screen reader users, and mobile devices, including support for UI internationalization.

Technical Philosophy

Wordgard is developed using a functional programming style to improve clarity and testability. It is released under the MIT license and is hosted on a self-hosted instance at code.haverbeke.berlin rather than GitHub.

Community Discussion and Perspectives

Community feedback highlights both the excitement and the concerns surrounding the transition from ProseMirror to Wordgard.

The ProseMirror Transition

Because ProseMirror is a foundational tool for many major web applications—including ChatGPT and Gemini—there is significant concern regarding its future development. Users have noted that Wordgard appears to be an evolution of ProseMirror's concepts, but there is no direct upgrade path, meaning switching requires significant manual effort.

Comparison with Other Editors

Developers have questioned how Wordgard compares to other industry standards like Meta's Lexical. Some users have expressed a desire for better integration with statically-typed representations of documents, a pain point previously experienced in ProseMirror where developers often had to define schemas twice (once for the editor and once for validation libraries like Zod).

User Experience and Design

While the technical API is praised, some early testers reported minor bugs in the "Try" demo, such as issues with the Undo function on Android Chrome and keyboard replacement glitches on iOS. Additionally, the website's visual design and custom artwork by Kamila Stankiewicz received widespread praise from the community for its aesthetic appeal.

Sources