- the testing environment setup,
- configuration for Yarn,
- translation management tools,
- documentation generator,
- and release tools.
The main package’s GitHub repository also hosts all other CKEditor5 sub-packages.
You can find all the official packages listed in the CKEditor 5 repository’s README.
Prior to version 19.0.0 CKEditor 5 was developed in a multi-repository architecture. If you would like to work with an older multi-repository release, please refer to the older Development environment guide for multi-repository oriented instructions.
In order to start developing CKEditor 5 you will require:
# Setting up the CKEditor development environment
First, you need to install Yarn that will be used for dependency management.
It is best to install it globally in your system for an easier use later on:
npm install -g yarn
Note: Read how to avoid using
sudo to install packages globally or use nvm.
Then clone the CKEditor 5 repository:
git clone https://github.com/ckeditor/ckeditor5.git cd ckeditor5
And install all CKEditor 5 packages from the npm registry.
# Running tests
In order to run tests, you need to use the
yarn run test --watch --coverage --source-map --files=engine
yarn run test -- -wcs --files=engine
This command will run the
ckeditor5-engine package’s tests.
Note: It is not possible to run tests of all packages with code coverage at once because the size of the project (the number of test files and source modules) exceeds webpack’s capabilities (it runs out of memory).
To create a server for manual tests use the
yarn run manual
To help test localized editors, the task accepts two optional configurations:
--additionalLanguages="ar,pl,...". The former sets the main language used by test editors. By default it is
"en" and in most scenarios you do not need to change it. The latter brings more languages to manual tests, which is helpful e.g. when working with right–to–left languages in the user interface.
You can read more about the Testing environment.
# Generating documentation
To build the documentation, you need to run the
yarn run docs
The documentation will be available in
This task accepts the following arguments:
--skip-api– Skips building the API documentation (which takes the majority of the total time).
--skip-snippets– Skips building live snippets.
--snippets=snippet-name– Snippets to build (accepts glob patterns). If a snippet that you want to build uses another snippet as a source that provides an editor instance, you need to specify both snippets. See examples:
--snippets=features/*- all snippets that starts with
features/in their names will be built,
--snippets=classic-editor,build-classic-source- all snippets that contains the specified strings in their names will be built.
--skip-validation– Skips the final link validation.
--watch– Runs the documentation generator in a watch mode. It covers guides but it does not cover API docs.
--production– Minifies the assets and performs other actions which are unnecessary during CKEditor 5 development.
--verbose– Prints out more information.
Note: These arguments must be passed after additional
yarn run docs --skip-api
After building documentation, you can quickly start an HTTP server to serve them:
yarn run docs:serve
# Generating content styles
It is possible to generate a stylesheet containing content styles brought by all CKEditor 5 features. In order to do that, execute:
The stylesheet will be saved in the
To learn more, refer to the Content styles guide.
# Additional information for contributors
# SVG icons
By default, CKEditor 5 supports SVG icons found in the
ckeditor5-*/theme/icons folders. Unfortunately, most of the SVG editing software produces the output with comments, obsolete tags, and complex paths, which bloats the DOM and makes the builds heavy for no good reason.
To remove the excess data and prevent certain issues, all new icons should be optimized before joining the code base. To do that, you can use the
clean-up-svg-icons script in the root of the project, a wrapper for the SVGO tool:
cd path/to/ckeditor5 # Optimize all SVG files in the folder. npm run clean-up-svg-icons path/to/icons/*.svg # Optimize a single SVG file. npm run clean-up-svg-icons path/to/icon/icon.svg
The script reduces the icon size up to 70%, depending on the software used to create it and the general complexity of the image.
Note: You may still need to tweak the source code of the SVG files manually after using the script:
- The icons should have the
viewBoxattribute (instead of
removeDimensionsSVGO plugin will not remove
heightif there is no
viewBoxattribute so make sure it is present.
- Sometimes SVGO leaves empty (transparent) groups
<g>...</g>. They should be removed from the source.
- Make sure the number of
<path>elements is minimal. Merge paths whenever possible in the image processor before saving the file.