CE
Craft beautiful text editors, just like Notion
Learn how to build advanced rich-text editors using Prosemirror and React.
The Book
400 pages of lovingly-typeset prose, distilled into clear and concise chapters. Avaiable in dark and light mode.
The Code
Build a framework-agnostic library with separate React bindings. Write every line of code from scratch.
The Site
Take advantage of a shared online experience, packed to the brim with author notes and editor cuts.
The Guides
Enjoy 4 additional guides, spanning design notes, cheat sheets, extra challenges and testing.
The future of text needs better editors
The ecosystem has changed. Rich-text editors have now become table stakes in modern web development. Users expect rich formatting options, inline-comments, activity-tracking, spell-checking, collaborative-editing, and more. Despite these needs, there's an upsetting number of resources on how to build these tools. Additionally, most "batteries-included" frameworks are stuck in time and can't respond to changing environments. In this book, we'll use the Prosemirror toolkit to create a custom rich-text editor. We'll write every line of code from scratch to support a user's modern needs. By the end, we'll have a framework-agnostic editor (I've called mine Pine) with performant React-bindings to improve developer productivity. It'll be great! - Isaac Aderogba
Learn everything you need to implement a full-featured rich-text editor.
We'll start with an introduction of Pine, struggle through the depths of Prosemirror, and emerge at our destination with React. Take a look at all of the content that we'll cover:
I. Pine
Begin your journey with a high-level overview of what we'll learn along the way.
II. Prosemirror
Become deeply familiar with Prosemirror, building modules such as history management and editor keymaps from scratch. We'll leave no stone unturned and conclude with a composable library that we can bind to any framework.
III. React
Learn best practices for integrating Prosemirror with React. We'll also tackle advanced functionality such as activity tracking and spell-checking. The last chapter will stitch everything together into a final application.
Thoroughly understand every line of code with step-by-step walkthroughs.
Apart from the boilerplate starter repo, you'll write every line of strongly-typed Typescript from scratch. Take a look at some of the finer details of your editor:
Engage with easter eggs and other learners in a non-linear reading experience.
Not only can you explore related chapters and sections without losing context, you'll find that each paragraph acts as a mini-discussion board that encourages you to communicate with other learners or the author.
Non-linear reading
Freely follow the trail of breadcrumbs to see how certain concepts relate to different chapters.
Editor cuts
While the PDF book is intentionally concise, the interactive site is sprawling with notes on why certain architectural choices were made.
Contextual troubleshooting
With the interactive site, you'll have the ability to leave comments on every single line of text. If you're stuck on a particular concept, I'll do my best to support you.
Progress even further with four accompanying guides.
Each companion guide will either solidify knowledge, offer unique observations, or encourage you to expand the Pine editor in an interesting way.
Cheat sheets
Cheat sheets are one-page summaries attached to every chapter. Great for if you need a refresher on key concepts or code snippets.
Design notes
Design notes accompany each chapter and expand on interesting design directions for the future of text editors.
Challenges
Challenges accompany the code chapters and demonstrate how to expand the editor with new block-level nodes and inline marks.
Testing
TypeScript really is just JavaScript in the end, so we'll write tests to confirm that our editor behaves as expected.
Choose your edition
“Crafting Rich-Text Editors” is available in three different editions with varying features. Pick the one that's right for you.
