A new way to build custom web editing experiences with EditContext

One of the biggest challenges that developers face when working with advanced text editing capabilities in web apps is the limitation of existing elements like <input> and <textarea>. Custom text editors are often created by using a complex DOM structure or even a <canvas> element that often require using a hidden contenteditable element, adding more complexity, and negatively impacting accessibility.

To address this issue, the Microsoft Edge team, in collaboration with Chrome engineers, has specified and implemented the EditContext API.

The EditContext API enables web developers to access text and composition input through the API surface instead of relying on the DOM. The API is available with the release 121 of both Microsoft Edge and Chrome. For now, it’s only available in Chromium-based browsers, but you can read Mozilla‘s and WebKit‘s positions on the EditContext API.

To read documentation, use cases, and code examples, please check out:

• Our blog post on the Chrome for Developers website.
• The EditContext explainer document.
• The API’s MDN documentation.
• A basic usage example of the API: the HTML editor demo.

We would love to hear what you think about the API. To submit feedback about the design of the API, please open an issue on the EditContext API’s Github repository, and to report bugs, use issues.chromium.org.