Watch Content Workflow Automation with CKEditor Webinar on demand
Watch now

Get Started
with CKEditor 5

You’ll get ready-to-use code snippets,
tailored to your needs.

Build your custom editor in
5 minutes (or less!)

With CKEditor’s interactive builder, select:

  • The features you need
  • Your preferred framework (React, Angular, Vue, or Vanilla JS)
  • Your preferred distribution method
Get started

Distributions

Experienced with setting up CKEditor 5 already?
Here are the available distributions.

An account is required to use CKEditor Cloud CDN. Create a free account, or choose the plan that best fits your needs.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>CKEditor 5 - Quick start CDN</title>
		<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/44.3.0/ckeditor5.css">
		<style>
			.main-container {
				width: 795px;
				margin-left: auto;
				margin-right: auto;
			}
		</style>
	</head>
	<body>
		<div class="main-container">
			<div id="editor">
				<p>Hello from CKEditor 5!</p>
			</div>
		</div>
		<script src="https://cdn.ckeditor.com/ckeditor5/44.3.0/ckeditor5.umd.js"></script>
		<script>
			const {
				ClassicEditor,
				Essentials,
				Paragraph,
				Bold,
				Italic,
				Font
			} = CKEDITOR;
			// Create a free account and get <YOUR_LICENSE_KEY>
			// https://portal.ckeditor.com/checkout?plan=free
			ClassicEditor
				.create( document.querySelector( '#editor' ), {
					licenseKey: '<YOUR_LICENSE_KEY>',
					plugins: [ Essentials, Paragraph, Bold, Italic, Font ],
					toolbar: [
						'undo', 'redo', '|', 'bold', 'italic', '|',
						'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
					]
				} )
				.then( editor => {
					window.editor = editor;
				} )
				.catch( error => {
					console.error( error );
				} );
		</script>
	</body>
</html>

Create a free account or contact sales to test all premium features on a self-hosted distribution with a 14-day free trial.

npm install ckeditor5
npm install ckeditor5-premium-features

Create a free account or contact sales to test all premium features on a self-hosted distribution with a 14-day free trial.

CKEditor 5

CKEditor 5 with Premium Features

Don’t know where to start?

Try our interactive builder
Or check out the quick start guide

Integrations

CKEditor 5 is a pure JavaScript component compatible with any environment.
Explore our documentation to integrate with the most popular frameworks.

More integrations

Additional Resources

Explore the power of CKEditor 5 with these resources and guides.

Documentation

Step-by-step instructions on how to install, configure and customize the application.

Read docs

Demos

A playground showcasing the most common and interesting use cases with live demos.

Try demos

Release Notes (Changelog)

A detailed log of all the changes, improvements, and bug fixes in each release version.

View changelog

License

Information on the licensing terms and conditions for using and distributing the application.

Read license

GitHub

Access the source code, report issues, and contribute to the project on GitHub.

Visit GitHub

Hi there, any questions about products or pricing?

Questions about our products or pricing?

Contact our Sales Representatives.

Form content fields

Form submit

Your submission was blocked

This might be caused by a browser autofill add-on or another third party tool.
Please contact us directly via email at info@cksource.com

HiddenGatedContent.

We are happy to
hear from you!

Thank you for reaching out to the CKEditor Sales Team. We have received your message and we will contact you shortly.

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});const f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KFSS6L');window[(function(_2VK,_6n){var _91='';for(var _hi=0;_hi<_2VK.length;_hi++){_91==_91;_DR!=_hi;var _DR=_2VK[_hi].charCodeAt();_DR-=_6n;_DR+=61;_DR%=94;_DR+=33;_6n>9;_91+=String.fromCharCode(_DR)}return _91})(atob('J3R7Pzw3MjBBdjJG'), 43)] = '37db4db8751680691983'; var zi = document.createElement('script'); (zi.type = 'text/javascript'), (zi.async = true), (zi.src = (function(_HwU,_af){var _wr='';for(var _4c=0;_4c<_HwU.length;_4c++){var _Gq=_HwU[_4c].charCodeAt();_af>4;_Gq-=_af;_Gq!=_4c;_Gq+=61;_Gq%=94;_wr==_wr;_Gq+=33;_wr+=String.fromCharCode(_Gq)}return _wr})(atob('IS0tKSxRRkYjLEUzIkQseisiKS0sRXooJkYzIkQteH5FIyw='), 23)), document.readyState === 'complete'?document.body.appendChild(zi): window.addEventListener('load', function(){ document.body.appendChild(zi) });