Member-only story
Announcing Stylo — Another kind of rich text editor.
So, I developed a new open source WYSIWYG interactive editor for JavaScript. Its goal is to bring great user experience and interactivity to the web, for everyone, with no dependencies. I called it: Stylo.
But Why?
Last year, while migrating our web editor for slides, DeckDeckGo, to DFINITY’s Internet Computer, we started playing around with some new code to support documents as well.
As a very first test, I wrote and published a blog post on our platform. Although I was satisfied with the result, I thought: this can be better.
That’s why I had the idea to extract the rich text editor capabilities of the core of our application — under the assumption that it would be easier to improve and fix the text editor in isolation.
In addition, by publishing the new library as a new open source repo, I was also hoping it would benefit from community feedback and contributions.
What can I add? I am an engineer, I like to code 😉.
Features
Not looking to oversell what Stylo can do — or do differently — but here are in my humble opinion a list of cool things it can do:
Interactive Design 🎯
Unlike other WYSIWYG editors, Stylo has no sticky toolbar. It is inspired by design and user experience of platforms that I like — i.e Notion and Medium.
When writing the document, the user can use different types of paragraph that can be added through a floating menu. These elements can be simple HTML elements — i.e. h1, h2, code etc. — or more complex block — i.e. any Web Component.
For styling purposes, another toolbar gives the user the ability to modify text — e.g. bold, italic, colors, etc. — and add hyperlinks.
Last but not least, for an optimized experience on desktop, many actions can be performed without the mouse. Opening the list of paragraphs can be triggered hitting “/” and bold, italic and mark are accessible through keyboard shortcuts.
