# HeadingConfig

interface

The configuration of the heading feature. The option is used by the [`HeadingEditing`](module_heading_headingediting-HeadingEditing.md) feature.

```typescript
ClassicEditor
  .create( {
	heading: ... // Heading feature config.
  } )
  .then( ... )
  .catch( ... );
```

See [all editor options](module_core_editor_editorconfig-EditorConfig.md).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-heading/src/headingconfig.ts#L28)

<a id="properties">

## Properties

<a id="member-options">

### `options?: Array<HeadingOption>`

The available heading options.

The default value is:

```typescript
const headingConfig = {
  options: [
	{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
	{ model: 'heading1', view: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
	{ model: 'heading2', view: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
	{ model: 'heading3', view: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' }
  ]
};
```

It defines 3 levels of headings. In the editor model they will use `heading1`, `heading2`, and `heading3` elements. Their respective view elements (so the elements output by the editor) will be: `h2`, `h3`, and `h4`. This means that if you choose "Heading 1" in the headings dropdown the editor will turn the current block to `<heading1>` in the model which will result in rendering (and outputting to data) the `<h2>` element.

The `title` and `class` properties will be used by the `headings` dropdown to render available options. Usually, the first option in the headings dropdown is the "Paragraph" option, hence it's also defined on the list. However, you don't need to define its view representation because it's handled by the [`Paragraph`](module_paragraph_paragraph-Paragraph.md) feature (which is required by the [`HeadingEditing`](module_heading_headingediting-HeadingEditing.md) feature).

You can **read more** about configuring heading levels and **see more examples** in the [Headings](../features/headings.md) guide.

Note: In the model you should always start from `heading1`, regardless of how the headings are represented in the view. That's assumption is used by features like [`Autoformat`](module_autoformat_autoformat-Autoformat.md) to know which element they should use when applying the first level heading.

The defined headings are also available as values passed to the `'heading'` command under their model names. For example, the below code will apply `<heading1>` to the current selection:

```typescript
editor.execute( 'heading', { value: 'heading1' } );
```

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-heading/src/headingconfig.ts#L70)

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)