Contribute to this guide

guideExamples

Check out these examples of different editor integrations. See the predefined builds in action, witness the unharnessed power of a full-featured editor, and find out amazing, custom-tailored implementations using the CKEditor 5 Framework.

Use the main menu button in the upper-left corner to navigate through the documentation.

# Predefined builds

Predefined CKEditor 5 builds are a set of ready-to-use rich text editors. Every “build” provides a single type of editor with a set of features and a default configuration. They cover the most common editing use cases, and you can install them easily. See all of them in action: classic, inline, balloon, balloon block, document, and multi-root editors! Learn their differences by using our examples and analyzing the source code of the builds.

# Advanced custom builds

CKEditor 5 is a configurable framework created with collaboration in mind. It lets you build a custom editor of any type, with a wide set of features and the toolbar type that you need where multiple authors can easily work on the same rich text documents. Check out our feature-rich editor that sports as many plugins as possible to put together. Want to invite some friends? Try the collaborative document editor that brings the experience of the most popular online editing solutions to the table. And witness the flexibility of the UI in the toolbar-oriented example.

# Framework examples

CKEditor 5 Framework is a highly flexible and universal platform that provides a set of components allowing you to create any kind of rich text editor. It enables the integrators to build different, custom-tailored editing solutions with custom UI or a theme that suit their specific needs. It also provides tools for the creating and integrating of some user-made, custom features and for customizing existing ones. See how CKEditor 5 can integrate a React library to enrich both the contents and the editing experience.

# Experimental solutions

If you need even more, try our experimental plugins, like the integration of the Mermaid library that can be used to display flowcharts and diagrams.

# How-tos

There come times when you do not need deep-dive guides, elaborate solutions, and complicated examples. Sometimes, you just need to know how to set the height of CKEditor 5. Or, maybe you want to learn how to focus the editor? This is what the How-to section is for!

Related links

  • CKEditor 5 tutorials – A set of easy-to-follow, clear, and informative guides that will help you tailor the editor to your needs.
  • CKEditor 5 features – Learn more about the available CKEditor 5 features.
  • CKEditor 5 Framework – Learn how to work with CKEditor 5 Framework, customize it, create your own plugins and custom editors, change the UI, or even bring your own UI to the editor.