New features launched for the markup based MyST Editor

Since we launched the open source MyST Editor in 2022, it has been in widespread use at Svevn and its parent company, Antmicro, in a variety of scenarios. Based on those real use cases and user requests, we have been adding a range of useful features, including real-time collaboration, diff view, spellcheck and more, which we will describe in this note. With new features comes even more internal use and excitement for the collaborative markdown-based flow that the reusable component helps support, as well as a vision towards enabling external use cases for our customers so that they can also benefit from the capabilities that the MyST Editor offers.

Lightweight, embeddable and configurable collaborative editing

In essence, the MyST Editor is a web component written in Preact, a very lightweight React-compatible JavaScript UI framework which in itself only takes up 3kB. This helps drive adoption in use cases where the component is embedded in contexts which require keeping the JS overhead to a minimum.

The MyST Editor was always meant to combine the precise nature of (MyST) Markdown, which lets you represent your content exactly as you want it and apply context-dependent transformations, with collaboration features that people know from familiar tools like Google Docs. While at launch the collaboration functionality was not yet in place, it has now been implemented using the excellent open source YJS shared editing framework. A network agnostic library with many convenient integrations, YJS provides users with a wide range of possibilities, including offline and peer-to-peer editing or undo and redo. At the heart of YJS is the CRDT (conflict-free replicated data type) paradigm, which is a proven method for automated syncing with other peers without conflicts.

We are now introducing the MyST Editor internally for collaboration for a variety of purposes beyond the original targets, particularly for documentation and blog writing, while we expect to see a substantial increase in productivity thanks to eliminating the necessity of jumping between Google Docs that we use for drafting and Markdown, which is used for publishing the content. An embeddable, collaborative component available in the browser means that the writing work can be performed in a streamlined way between different contexts, and we can implement extra presentation features as and where needed, while keeping the content uniform between different media.

Setting up the (optional) collaboration feature in the MyST Editor requires an external server which coordinates the editing process, but it’s very easy to do as described in the README. The address of this server is then provided to the embedded MyST instance, allowing all changes to be automatically saved and distributed to the other editors as they are made.

A single solution for the editing process

The MyST Editor is fast and responsive; the very low overhead makes it ideal for use in bandwidth-restricted environments, while it also remains fully usable by lower powered computers and mobile devices.

The component relies on browser-native tagged templates which are the base HTM, so no build step is necessary for embedding it. Style encapsulation is also fully supported with the help of the styled-components library and its StyleSheetManager feature, meaning that the MyST Editor can be seamlessly integrated into a new or existing website design without conflicts with existing CSS of the page it’s included in.

Thanks to the standalone, embeddable nature of the component it is possible to create a range of templates available for specific purposes, such as for blog content creation and collaborative e-mail writing. This can dramatically speed up internal processes, as it provides a way to automate repetitive tasks inside the systems they happen in, without opening new, external documents and copy pasting data around.

New features all around: diffs, spellchecking, more buttons

This release also brings a large number of improvements and enhancements such as the diff view, which allows users to compare a saved revision of the file being worked on with the latest live version.

Spell checking is another very useful improvement, letting users import their own choice of dictionary to catch typos and errors. Many open source dictionaries are available, and users can also add extra entries like industry-specific words and acronyms to these dictionaries for their own specific needs.

A further advantage of using your own spell checker relates to security and other data privacy concerns. With third party spell checking services, users have very limited control over the security and transfer of data, while the use of an internal spellchecker with the chosen dictionary provides assurance that the data stays on the user’s own server, especially important when the component is used to enhance critical internal processes.

On top of the original PDF export capability (which is one way of providing the final output of the editing process in a fixed, transferrable form), the editor now also features a copy button, which allows users to copy text from the editor to the clipboard. Formatting is preserved, and users can easily copy and paste to other applications.

Last but not least, a fullscreen mode is now available, useful for cases where the component is embedded deeply in an external UI, and more screen estate is needed from time to time.

Collaboration at the heart of Svevn

Collaboration is at the heart of everything we do at Svevn and Antmicro, and our experience with implementing collaborative frameworks with the help of open source software allows us to build compelling user experiences for a variety of use cases, both internally and for our customers. For us, workflow improvements are an inherent part of the website and UX design process. The collaborative MyST Editor component is an ideal solution for finding new productivity enhancement capabilities in the most unlikely of places.

Try the MyST Editor demo for yourself, and reach out to us at contact@svevn.com if you have any questions about how we can introduce and improve collaborative processes in your company.