---
title: Components


---
The components config is an array of document design components.
For details how to create and customize a design please refer to
[Document Design](/reference/document/document-design/llms.txt).

Example with a title and a paragraph component:

```js
components: [
  {
    name: 'title',
    label: 'Title',
    iconUrl: 'https://livingdocs-assets.s3.amazonaws.com/magazine-design/assets/images/icons-components/icon_header_simple.svg',
    directives: [
      {
        type: 'editable',
        name: 'title',
        maxLength: 5
      }
    ],
    html: '<h2 doc-editable="title">\n  Title\n</h2>'
  },
  {
    name: "p",
    label: "Paragraph",
    iconUrl: 'https://livingdocs-assets.s3.amazonaws.com/magazine-design/assets/images/icons-components/icon_text.svg',
    html: '<p class="text" doc-editable="text">\n  Paragraph\n</p>'
  }
]
```