# Templates The template feature allows you to insert predefined content structures into the document. Templates can provide both smaller portions of content (like a formatted table) and base structures for entire documents (for example, a formal letter template). Templates are a useful tool to speed up the writing process and maintain compliance with the company’s document and content policy. > **Unlock this feature with selected CKEditor Plans** > > Try all premium features – no credit card needed. > > [Sign up for a free trial ](https://portal.ckeditor.com/checkout?plan=free)[Select a Plan](https://ckeditor.com/pricing/) ## Demo Click the template button to open the dropdown and select the template you want to apply. You can search the templates by their titles. This demo presents a limited set of features. Visit the [feature-rich editor example](../examples/builds-custom/full-featured-editor.md) to see more in action. ## Installation After [installing the editor](../getting-started/installation/cloud/quick-start.md), add the feature to your plugin list and toolbar configuration: **NPM** ```js import { ClassicEditor } from 'ckeditor5'; import { Template } from 'ckeditor5-premium-features'; ClassicEditor .create( { licenseKey: '', plugins: [ Template, /* ... */ ], toolbar: [ 'insertTemplate', /* ... */ ], // Configure the feature. template: { definitions: [ { title: 'The title of the template', description: 'A longer description of the template', data: '

Data inserted into the content

' }, { // ... }, // More template definitions. // ... ] } } ) .then( /* ... */ ) .catch( /* ... */ ); ``` **CDN** ```js const { ClassicEditor } = CKEDITOR; const { Template } = CKEDITOR_PREMIUM_FEATURES; ClassicEditor .create( { licenseKey: '', plugins: [ Template, /* ... */ ], toolbar: [ 'insertTemplate', /* ... */ ], // Configure the feature. template: { definitions: [ { title: 'The title of the template', description: 'A longer description of the template', data: '

Data inserted into the content

' }, { // ... }, // More template definitions. // ... ] } } ) .then( /* ... */ ) .catch( /* ... */ ); ``` > **Note** > > Read more about [installing plugins](../getting-started/setup/configuration.md) and [toolbar configuration](../getting-started/setup/toolbar.md). ### Activating the feature To use this premium feature, you need to activate it with proper credentials. Refer to the [License key and activation](../getting-started/licensing/license-key-and-activation.md) guide for details. ## Configuration > **Note** > > For more technical details, check the [plugin configuration reference](../api/module_template_template-TemplateConfig.md). The configuration of the feature is simply a list of [template definitions](../api/module_template_template-TemplateConfig.md#member-definitions). An example configuration can be as follows: ```js { template: { definitions: [ { title: 'Issue acknowledgement (plain text)', data: 'Dear customer, thank you for your report! The issue is currently being worked on by our development team.' }, { title: 'Signature (multi-line)', data: '

Jane Doe

Marketing Specialist at Example.com

', description: 'Author signature with the link to the website.' }, { title: 'Pricing table', data: '

Feature	Free	Basic	Professional	Custom
Feature #1	✅	✅	✅	✅
Feature #2	❌	✅	✅	✅
Feature #3	❌	❌	✅	✅
Feature #4	❌	❌	❌	✅

Pricing table

', icon: '', description: 'Product pricing table that compares individual plans.' }, // More template definitions. // ... ] } } ``` > **Note** > > Even though the template feature can insert any HTML into the document, some content may be filtered out by the editor if no feature that supports this kind of content is enabled. For instance, if a template inserts `Bold text`, your editor needs the [`Bold`](../api/module_basic-styles_bold-Bold.md) plugin to be loaded to preserve it. > > See the overview of the [plugins’ HTML output](../framework/architecture/plugins.md#plugins-and-html-output) to learn which features you need. You can also use the [General HTML Support feature](html/general-html-support.md) to insert custom HTML into the content. ## Common API The [`Template`](../api/module_template_template-Template.md) plugin registers: * The `'insertTemplate'` UI dropdown component. * The `'insertTemplate'` command implemented by [`TemplateCommand`](../api/module_template_templatecommand-TemplateCommand.md). You can execute the command to insert arbitrary content into the editor at the user selection: ```js editor.execute( 'insertTemplate', '

Content of the template

' ); ``` > **Note** > > We recommend using the official [CKEditor 5 inspector](../framework/development-tools/inspector.md) for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more. --- Full index of the CKEditor 5 documentation: [llms.txt](../../llms.txt)