(Legacy) TypeScript support in CKEditor 5

CKEditor 5 is built using TypeScript and has native type definitions. All the official packages and builds distributed using NPM and CDN contain type definitions. Custom builds produced by the online builder and DLL versions of packages provided by CKEditor 5 do not provide built-in types yet.

Using TypeScript comes with some advantages:

• It helps produce clean and maintainable code
• It introduces code autocompletion and type suggestions for CKEditor 5 APIs
• If you are developing custom plugins and using CKEditor 5 Framework intensively, the TypeScript compiler will help you catch common type errors and increase the code quality

Running CKEditor 5 does not differ much when using TypeScript compared to the JavaScript environment. You may consider using type assertion or type casting to satisfy the TypeScript compiler.

Here is an example of the classic editor build initialization:

import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

const editorPlaceholder = document.querySelector( '#editor' ) as HTMLElement;

ClassicEditor.create( editorPlaceholder ).catch( error => {
    console.error( error );
} );

When using TypeScript you need to import all modules provided by CKEditor 5 using a package entry point instead of a path to a module.

// Instead of:
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';

// Do:
import { Bold } from '@ckeditor/ckeditor5-basic-styles';

This approach ensures that TypeScript correctly loads all module augmentation code necessary to make certain types work. The previous method (importing via @ckeditor/ckeditor5-*/src/*) still works in most cases, but it may randomly break.

If you want to integrate CKEditor 5 directly in your TypeScript project, follow the instructions for integrating from source using webpack and Vite:

• Integration from source using webpack
• Integration from source using Vite

The latest versions of our official components for Angular, React, and Vue 3 were migrated to TypeScript and use native CKEditor 5’s type definitions. You do not need to provide custom definitions anymore. You can use the following guides:

• Angular component
• React component
• Vue.js 3+ component

CKEditor 5’s API is extensive and complex, but using TypeScript can make it easier to work with.

You can use package generator to scaffold TypeScript-based plugins.