Announcing Quill 2.0

We are thrilled to announce the release of Quill 2.0 — a significant milestone in moving forward web editing experiences for millions of users.

Since the initial 1.0 release, Quill has seen numerous success stories from fast-growing startups, well-known brands, and established Fortune 500 companies, who have incorporated Quill into some of the most important and core parts of their user-facing products.

As we build upon this legacy, this new 2.0 version is mindful of the importance of a seamless upgrade for our developer community while also advancing Quill's functionality, reliability, and developer experience.

What's New

Our GitHub repository has grown from 23k stars at the last release of Quill 1.3.7 to over 38k stars today with the official release of Quill 2.0. Here are a few of the biggest changes we've made during this journey. At the same time, if you can’t wait to upgrade your project, head to our 2.0 migration guide for full details.

Official TypeScript Declaration

Quill's source has fully transitioned to TypeScript, enjoying all of its benefits in earlier error detection, improved maintainability, and better tooling support. The result is a more robust codebase for both Quill and our developer community.

Previously, developers would have to install @types/quill as a separate package to get TypeScript definitions. This may not have been as specific or sometimes even match Quill's actual types since our wider community maintains it. Updates also did not synchronize with the core Quill package.

With Quill 2.0, this hassle and opportunity for errors is gone, and you'll get types straight from the source. To upgrade, simply remove the @types/quill package from your project, and TypeScript will automatically pick the declarations directly from Quill.

Multiple Registries

As Quill's prevalence and use grew, we started seeing use cases more often to where it was sometimes on the same page.

For example, a blogging product might use Quill to power the full-featured editing surface for the post itself, complete with headings, images, and code blocks, while on the same page, Quill is also powering the comment input with just bold, italic, and link formats supported.

Quill 2.0's new registry feature enables this use case, allowing multiple editors with their own formatting configurations to coexist on the same page without any conflicts. Learn more about registries in our documentation.

Auto Scrolling Container Detection

Previously, developers needed to specify the editor's scrolling container when creating a Quill instance so the user's cursor or selection could be scrolled into view if needed.

But we found that this configuration was often overlooked or confusing, so this scrolling container was either incorrectly specified or not at all. Additionally, it's not always easy in larger applications and codebases to track down the correct scrolling container for a reusable editor component that might appear in different contexts.

In 2.0, Quill will automatically find the right scrolling container, so you no longer have to. This makes using Quill for longer-form text easier and enables more complex interactions, such as nested scrolling containers and horizontal scrolling, for free.

Using InputEvent

One of Quill's key advantages is an internally managed document model that doesn't rely on the DOM as the single source of truth. This offers a closer mapping to developers' mental models for rich text state and enables simpler APIs for text editing, ultimately resulting in more numerous and more powerful uses.

Quill does this by listening to DOM changes and normalizing them back into its internal document model. However, browsers can inconsistently or incorrectly handle users' actions, causing the wrong DOM changes to be generated. For example, when a user selects text in red and replaces it by typing, browsers sometimes replace it with a font element that includes the red color in its style attribute, even though the editor uses span elements to represent colors.

In Quill 2.0, we use a modern and now common browser feature to progress forward with InputEvent. Users' actions are now captured first to update the internal document model before syncing the resulting changes to the DOM.

This approach provides a more consistent and reliable editing experience, particularly with complex content and formats. This capability currently focuses on the most problematic source in text replacement interactions, with wider use planned for the future.

Behind Quill 2.0

Behind the scenes of Quill 2.0's exciting new features is also a natural evolution in its development and support.

An important and long-standing problem for the open-source ecosystem is sustainability. While this unfortunately remains an open problem for the wider industry, Quill is supported by a profitable company where the key people are the same and the incentives are aligned.

Jason Chen, the original creator of Quill, is also the founder and CEO of Slab, building the best knowledge management solution for teams. I myself am the Frontend Engineering Lead at Slab and contributed the major updates and enhancements being released today in Quill 2.0.

For Slab, content creation and collaboration are pillars of our product, and we strive to be the best in both capability and ease of use, values with roots from Quill. Our post editor continues pushing Quill's limits, while our more limited formatting is necessary for our comment input and search bar. In part, lessons from these use cases motivated the foundational and expanded functionality in 2.0.

We continue to develop and support Quill's underlying model in Parchment and its data format in Delta. Slab has further open-sourced our backend Elixir implementation of Delta and other libraries for the Elixir ecosystem. We are organizing Quill, Parchment, and Delta under Slab's GitHub account to better manage and reinforce our commitment to open-source.

What's Next

We welcome your contribution and feedback as we continue to enhance Quill beyond 2.0. We hope you'll be part of our journey in extending and maintaining the most powerful and user-friendly rich text editor on the web.

Thank you for being part of our Quill community and please star the project on GitHub 🙏