CKEditor 5 - A New Era of Installation Simplicity

CKEditor 5 is a powerful rich-text editor trusted by developers and end users worldwide. Its extensible architecture has enabled countless applications to deliver an amazing content creation experience.

Since CKEditor 5 launched in 2018, the JavaScript ecosystem has changed a lot, and so has CKEditor 5 in terms of size and complexity. We realized our installation methods hadn’t kept up – setting up CKEditor 5 had become too complex, especially when customizing editor builds or integrating with modern frameworks.

That’s why last year, with the release of  CKEditor 5 v42.0.0,  we began offering new installation methods aligned with current JavaScript best practices. These methods removed key friction points, making our rich text editor easier to integrate, customize, and maintain across different environments.

It’s been almost a year since we released the new installation process, and the clear verdict from our users is that it significantly improves the developer experience. We want to share how we got there and what we learned in the process, and encourage you to update to the new installation methods if you haven’t already. Whether you’re upgrading an existing setup or starting fresh, dropping CKEditor 5 into your project is now quicker, cleaner, and easier to set up and keep up to date.

#The History of CKEditor 5 Installation

#Background

When CKEditor 5 launched in 2018, it was a complete rewrite of the editor using modern architecture patterns. At that time, webpack was the dominant build tool, and after suboptimal attempts to stay bundler–agnostic, we made the tough choice to integrate our editor with its ecosystem.

The JavaScript landscape of 2018 is very different from today’s environment. Module bundling was still reaching standardization, ECMAScript modules lacked browser support, and many modern JavaScript features required transpilation. Our initial installation methods reflected these constraints, focusing on pre–built packages and specialized webpack configurations.

This early iteration of our installation approach initially included:

• Pre–built editor bundles with fixed plugin sets

• Custom editor builds requiring specific webpack configuration

• Webpack DLL builds for advanced integrations requiring dynamic linking

As years passed, ECMAScript modules became the standard. Bundlers like Vite, Rollup, and esbuild emerged, offering better performance and developer experience. Modern frameworks like Next.js introduced new build processes that moved away from webpack-centric approaches, making bundler-agnostic strategies necessary.

While DLLs initially brought better build performance and modularity, they also introduced a maintenance burden and complexity. As webpack’s DLL feature stagnated, continuing to use it became a liability rather than an advantage.

Despite incremental improvements, our core installation methods got out of sync with modern development practices and created friction for developers integrating CKEditor 5 into their applications.

#Community Feedback

Our community was very helpful in driving these changes. Through GitHub issues, support tickets, and direct conversations, developers pointed out several pain points:

• “I just want to add one plugin to the editor.” – this simple request often resulted in frustration as developers found out they had to abandon pre-built bundles for complex source builds with webpack configuration.

• “I want to use a different bundler like Vite or Rollup.” – our webpack-centric approach made integration with popular alternative bundlers harder.

• “The documentation is confusing.” – with multiple installation methods and different requirements for each, even our documentation became hard to navigate.

These messages from our community made one thing clear: we needed to fundamentally change our approach to make CKEditor 5 more welcoming and aligned with modern web development practices. This feedback shaped what became the new installation methods in v42.0.0.

#New Installation Methods for CKEditor 5

#Approaching the changes to our installation methods

After analyzing community feedback and recognizing our installation limitations, we wanted to redesign how developers interact with CKEditor 5.

Our goals were:

• Eliminate the need for specialized build configurations

• Deliver intuitive developer experience

• Ensure compatibility with the diverse ecosystem of modern JavaScript tools

We approached this challenge focusing on two key principles:

1. Standards compliance – use ESM modules throughout our codebase and follow modern JavaScript conventions

2. Bundler and framework agnosticism – be compatible with any popular bundler or framework without special plugins

#What We Delivered

#npm Setup

The new npm–based installation method is a major shift in the developer experience. Unlike our previous approach, which required specific webpack configurations, the new method works with any modern bundler – webpack, Vite, Rollup, and esbuild.

Key improvements:

• CSS as separate files – instead of inlining CSS in JavaScript, styles are now separate, improving cache efficiency and making customization easier

• Simplified plugin management – with the consolidated ckeditor5 and ckeditor5-premium-features packages, you no longer have to chase down dozens of individual packages

• Tree-shakable packages – only bundle what you use, with a smaller app size, and better performance

Setup is simple:

import { ClassicEditor, Essentials, Bold, Italic, Paragraph } from 'ckeditor5';
import { FormatPainter } from 'ckeditor5-premium-features';

import 'ckeditor5/ckeditor5.css';
import 'ckeditor5-premium-features/ckeditor5-premium-features.css';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Bold, Italic, Paragraph, FormatPainter ],
        toolbar: [ /* ... */ ],
        licenseKey: '<YOUR_LICENSE_KEY>'
    } );

#CDN (Browser) Setup

Our CDN setup has changed as well. Previously, using the CDN version limited you to pre–built bundles with fixed plugin sets. Now our CDN setup offers more flexibility:

• Dynamic plugin loading: add any CKEditor 5 plugin without a build step

• Two setup options:

  • UMD builds for global variable access: a familiar and battle–tested approach

  • ES modules support: alternatively, native browser ES module imports for clean dependency management

• Simple customization: configure your editor with any combination of plugins

• No build tools required: perfect for prototyping or smaller projects

Here’s how simple it is:

<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/45.0.0/ckeditor5.css" />
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/45.0.0/ckeditor5-premium-features.css" />

<!-- Scripts -->
<script src="https://cdn.ckeditor.com/ckeditor5/45.0.0/ckeditor5.umd.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5-premium-features/45.0.0/ckeditor5-premium-features.umd.js"></script>

<script>
const { ClassicEditor, Essentials, Bold, Italic, Paragraph } = CKEDITOR;
const { FormatPainter } = CKEDITOR_PREMIUM_FEATURES;

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Bold, Italic, Paragraph, FormatPainter ],
        toolbar: [ /* ... */ ],
        licenseKey: '<YOUR_LICENSE_KEY>'
    } );
</script>

This approach is more flexible than our previous CDN setup, so you don’t need additional build tools to customize your editor.

#Results

The new installation methods brought:

• Simplified onboarding – new users can get started with CKEditor 5 in minutes, not hours, without wrestling with webpack config

• Wider framework support – integrations with Next.js, Nuxt, SvelteKit, and other modern frameworks that previously required workarounds

• Smaller bundles – tree-shakable packages mean your app only includes what it needs, has faster load times, and better performance

• Much happier developers – feedback has been overwhelmingly positive. Support questions about setup have gone to near zero

To help developers even more, we’ve also released a new CKEditor 5 Builder, where you can explore features and choose your setup. The builder now includes code samples for both npm and CDN, so it’s easier than ever to get started with the right config. Check out the deep-dive article on our blog about “Customizing Editor Types with the Interactive Builder” to learn more.

#Migration Path and What’s Next

To make the transition smoother, we’ve created migration guides for different scenarios:

• General migration guide: overview and step-by-step instructions

• Framework-specific guides for React, Angular, and Vue integrations

• Migration paths for different installation methods:

  • Migrating from predefined builds

  • Migrating from customized builds

  • Migrating from DLL builds

  • Migrating custom plugins

These guides cover updating dependencies, adapting import statements, and resolving common migration issues.

We’ve also reorganized our documentation to prioritize the new methods while keeping the legacy approaches available for those who still need more time to transition.

#What’s Been Done So Far

Since we introduced these new installation methods, we’ve made progress on our roadmap:

• Icon customization (v45.0.0) – provides icon customization without webpack–specific plugins, much easier to override icons

• Index exports (in progress, as of April 2025) – fixes missing exports to ensure better compatibility with the new installation methods and prevent runtime errors during upgrades.

#Deprecation Timeline

#Already Deprecated (as of v45.0.0 – Q1 2025)

• Predefined builds – ckeditor5-build-classic and other packages are now officially deprecated. No new versions will be published to npm and CDN, and related documentation has been removed. Migrate to aggregated packages with ckeditor5 for all projects.

• ES2015 target support – With our move to ES2022, we’ve ended support for webpack v4. Projects using webpack 4 with custom builds may need additional configuration to work with newer CKEditor versions.

#Upcoming Deprecations (by the end of 2025)

• Custom builds (webpack-dependent builds from source) – By the end of 2025, custom webpack–dependent builds will be fully deprecated. New npm package versions will no longer include the src/ directory, with the dist/ directory being the primary entry point.

• @ckeditor/ckeditor5-dev-translations package – This package will be deprecated as new installation methods allow loading translations through editor configuration without webpack dependency.

• DLL builds – Webpack–dependent DLL builds will be deprecated, and new npm package versions will no longer include the build/ directory.

#Legacy Installation Methods

We’re familiar with migration challenges, especially for complex applications or resource–constrained teams. This is why we came up with several ways of supporting our community during this transition:

• Extended support timeline – We’ll maintain compatibility with legacy methods through 2025, giving teams time to plan and execute migrations.

• Clear deprecation notices – We’ll provide transparent communication in documentation and console warnings about deprecated approaches.

• Comprehensive migration guides – Detailed guides for each legacy installation method to ease your transition to new approaches.

While we strongly recommend migration to benefit from better performance and a better developer experience, we’ll continue to support existing implementations throughout this transition period.

#Conclusion

The new installation methods for CKEditor 5 are a big step forward in our mission to provide a great developer experience. By using modern JavaScript standards, removing special build requirements, and ensuring framework compatibility, we made integrating CKEditor 5 into any web application simpler and more enjoyable.

We encourage all CKEditor 5 users to try out these new installation methods and start planning their migration. The benefits of simplified maintenance, better performance, and future compatibility make it worth the investment, and our documentation will guide you through the transition.

If you have already migrated, let us know how it went. Your feedback is still incredibly important for us and helps us to shape the future of CKEditor.