CKEditor 5 Package Generator

The ckeditor5-package-generator is a tool dedicated for developers. It creates a working package with the development environment that allows for developing plugins for CKEditor 5.

Table of contents

• Requirements
• Creating a package
  • Modifiers
• What's next?

Requirements

The minimal version of Node.js required by CKEditor 5 is 18.

While not necessary, it is also nice to have the latest version of yarn 1.x or pnpm installed globally.

Creating a package

To create a new package without installing the tool, simply execute the following command:

npx ckeditor5-package-generator [packageName] [--package-manager <npm|yarn|pnpm>] [--plugin-name <...>] [--lang <js|ts>] [--global-name <...>] [--verbose]

If packageName is omitted, the generator will ask for it interactively.

The package name must use one of these formats:

• @scope/ckeditor5-[name], where @scope is the package owner.
• ckeditor5-[name].

In both cases, the name must start with the ckeditor5- prefix and may only contain numbers (0-9), lowercase letters (a-z), and these symbols: - . _.

If you want the plugin name to be different from the package name, you can use the --plugin-name modifier that must follow these rules:

• It cannot start with a number.
• The only allowed characters are numbers (0-9), lowercase and uppercase letters (A-z) and the underscore (_).

As a result of executing the command, a new directory with a package in it will be created. The directory's name will be equal to the specified package name without the @scope part, and it will contain an example plugin and the development environment.

Modifiers

• --package-manager – (values: npm | yarn | pnpm) choose the package manager used to install dependencies in a newly created package. If omitted, the script will ask the user to choose one manually.
• --global-name – define a global name of the package to be used in UMD build.
• --plugin-name – define a class name to be different from the package name.
• --lang – (values: js | ts) choose whether the created package should use JavaScript or TypeScript. If omitted, the script will ask the user to choose it manually.
• --verbose – (alias: -v) print additional logs about the current executed task.

What's next

Once the package is created, you are ready to start developing new CKEditor 5 features. You can check out these helpfull guides, too:

• Find out what is available inside your package depending on the language you used:
  • JavaScript.
  • TypeScript.
• How to create a simple plugin for CKEditor 5.
• Introduction to CKEditor 5 architecture.