Custom widgets and components
CKEditor 5’s widget system allows developers to create custom interactive components that integrate with the editor’s content model. Widgets provide a structured way to embed complex content blocks, inline elements, data-driven components, and framework integrations within the editor.
The examples below demonstrate the functionality and implementation approaches for each widget type.
# Block widgets: self-contained content components
Developers can build block widgets that create structured content blocks functioning as independent units within documents. The demo below shows a created from scratch simple block widget with title and description slots. You can learn how to build block widgets in our framework section.
This is a simple box:
Box title
The description goes here.
- It can contain lists,
- and other block elements like headings.
Example components developers can build:
- Product displays with images, pricing, and purchase options,
- Team member profiles with photos and contact information,
- Content cards for articles, case studies, and news items,
- Data visualization components and interactive charts,
- Alert boxes, callouts, and feature highlights.
# Inline widgets: dynamic elements within text
Developers can create inline widgets as interactive elements that integrate seamlessly within text content without disrupting document flow. The demo below shows a simple and custom build placeholder feature. We have more advanced version of this feature, Merge fields, but this serves as a good example of what’s possible. You can learn how to build inline widgets in our framework section.
Hello {first name} {surname}!
Example components developers can build:
- Dynamic data displays for pricing, stock information, or weather,
- User mentions and employee directory references,
- Status indicators for project phases and workflows,
- Badge elements for ratings, certifications, and labels,
# External data widgets: live updating components
Developers can build widgets that connect to external APIs and data sources to display real-time information directly within editor content. The editor below contains a widget that fetches data from an external source and updates all its instances in a set interval of time. In this particular example, the widget shows the current Bitcoin rate. You can learn how to build widgets with external data in our framework section.
Current exchange rate fetched from Binance (updates every 10 seconds):
Bitcoin rate:
Example components developers can build:
- Financial data including stock prices and market indicators,
- Business metrics and KPI dashboards,
- Live feeds from social media, news sources, and events,
- Inventory systems with product availability and pricing,
- API integrations for CRM data and system notifications,
- Analytics displays with traffic and conversion metrics.
# React (and other frameworks) components in widgets: modern UI integrations
Developers can integrate components from popular UI frameworks like React, Vue, Angular, and others into CKEditor 5, enabling reuse of existing component libraries and business logic. The editor below presents integration between React library and a block widget from the CKEditor ecosystem. You can learn how to build widgets with React in our framework section.
Example applications developers can build:
- Design system component integration across frameworks,
- Complex multi-step forms and configuration panels that streamline content creation workflows.
While CKEditor 5 provides an example React integration, similar patterns can be applied to other frameworks when building custom widgets.
# More complex features: components and editor’s UI
Developers can build sophisticated features that go beyond simple content widgets to include rich interactive UI elements like balloons, dropdowns, and contextual panels. These features combine content modeling, conversion pipelines, commands, and custom UI components to create seamless editing experiences. The demo below shows an abbreviation feature that presents a balloon panel for user input when adding abbreviations to text. You can learn how to build features with balloon UI in our framework section.
Abbreviation plugin
CKEditor 5 is a modern, feature-rich, world-class WYSIWYG editor.
# Architecture overview
CKEditor 5’s architecture provides a comprehensive framework for building complex features that integrate content handling with sophisticated user interfaces:
Schema system – Defines content structure, validation rules, and element relationships to ensure data integrity and feature compatibility.
Conversion pipeline – Transforms data between the model, editing view, and data view, enabling seamless integration with external formats and real-time collaboration.
Command architecture – Implements user actions, business logic, and state management with built-in undo/redo support and collaboration-ready operation handling.
UI integration – Supports toolbar buttons, contextual balloons, dropdowns, and custom panel elements with automatic focus management and accessibility features.
Event system – Provides a robust foundation for inter-component communication, user interaction handling, and plugin coordination through observable patterns.
Plugin architecture – Enables modular feature development with dependency management, lifecycle hooks, and seamless integration with existing editor functionality.
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.
With the release of version 42.0.0, we have rewritten much of our documentation to reflect the new import paths and features. We appreciate your feedback to help us ensure its accuracy and completeness.