Imports in the legacy setup

Starting with CKEditor 5 v42.0.0, we introduced new installation methods. We changed the way plugins are shipped and hence the format of the import paths. This guide will help you learn how to import packages using legacy methods.

# Old vs new import methods

Before version 42.0.0, the plugins were imported from individual packages, like this:

// Each individual feature has its own package.
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Bold, Code } from '@ckeditor/ckeditor5-basic-styles';
import { AIAssistant } from '@ckeditor/ckeditor5-ai';

Please note, that some packages contain more than one feature, like in the case of the basic-styles package above.

The new installation methods introduced two main packages, namely ckeditor5 for open-source plugins, and ckeditor5-premium-plugins for premium features. Now, all plugins are only imported from the corresponding packages, like this:

import { Autoformat, Bold, Code } from 'ckeditor5'; 		// Open-source features.
import { AIAssistant } from 'ckeditor5-premium-plugins';	// Premium features.

Our documentation now primarily shows the new method for simplicity. If you do not wish to migrate to new installation methods yet, you can still use individual imports to load CKEditor 5 plugins. Check the section below for instructions.

# Finding individual packages

If you need to find the package name in the legacy methods to import plugins from it, follow the steps below:

1. Look for the feature in our features section.
2. There are two options:
   1. Via the plugins’ documentation:
      1. Go to the plugins and HTML output guide.
      2. Find the plugin name there.
      3. The source file path will show you the package name.
         
   2. Or via the API documentation:
      1. Go to the API documentation.
      2. Search for the plugin’s name and navigate to its pages.
      3. On the page of the package, you will see a chip with the link to the npm repository.
         
      4. On any other page of this package, you will see the path, which also contains the name of the npm package.