> From the [Strife developer docs](https://strife.app/docs/reference/fields/rich-content). Every page is listed in [llms.txt](https://strife.app/docs/llms.txt).

# Rich Content

The Rich Content field empowers editors to create dynamic and visually appealing content, which is then stored in the database as HTML.

<figure><img src="https://strife.app/docs/assets/Screenshot%202023-10-18%20at%2010.47.57.png" alt="" width="375"><figcaption><p>Strife Studio screenshot of a Rich Content field</p></figcaption></figure>

### Settings

In addition to the basic settings, this section provides information about unique settings and configurations specific to this field.

> [!NOTE]
> You can find a comprehensive list of all basic settings in the ['Overview' section](https://strife.app/docs/reference/fields.md).

<table><thead><tr><th width="232">Option</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Menu buttons</td><td>Selects which buttons appear in the slash-menu and which heading levels (H1–H6) are enabled. See <a href="https://strife.app/docs/reference/fields/rich-content.md#menu-button-values">Menu button values</a></td><td></td></tr><tr><td>Placeholder Document<strong>~</strong></td><td>Specifies a node scheme that the document must follow.</td><td></td></tr><tr><td>Lock Placeholder Document<strong>~</strong></td><td>Specifies whether the user should be prevented to add more nodes after what's specified under the <code>placeholder-document</code>.</td><td></td></tr></tbody></table>

> [!WARNING]
> A tilde (**\~**) denotes that a setting is available in developer preview only.

#### Menu button values

Pass `menuButtons` as an array of strings. Heading values (`heading1` through `heading6`) control which heading levels the editor accepts. Other values enable the corresponding slash-menu items.

<table><thead><tr><th width="150">Value</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td><code>heading1</code>…<code>heading6</code></td><td>Enable the corresponding heading level. Include only the levels you want available.</td><td></td></tr><tr><td><code>bulletList</code></td><td>Unordered list slash-menu entry.</td><td></td></tr><tr><td><code>orderedList</code></td><td>Numbered list slash-menu entry.</td><td></td></tr><tr><td><code>checkList</code></td><td>Task list with checkboxes.</td><td></td></tr><tr><td><code>image</code></td><td>Image insert slash-menu entry.</td><td></td></tr><tr><td><code>video</code></td><td>Video insert slash-menu entry.</td><td></td></tr><tr><td><code>table</code></td><td>Table insert slash-menu entry.</td><td></td></tr></tbody></table>

> [!NOTE]
> Inline formatting (bold, italic, underline, strikethrough, link, blockquote, details) is always available from the text-selection menu, independent of `menuButtons`.

### Define with JSON

When defining templates using JSON, this field is represented using:

* **Component Name:** `str-textarea`
* **Type:** `html`
* Reference ID: `str-textarea|html`

The settings above map into the `editor.attributes` object inside the JSON definition.

```json
{
  ...
  "editor": {
    "name": "str-textarea",
    "type": "html",
    "propertyName": "...",
    "attributes": {
      "menuButtons": ["heading1", "heading2", "bulletList"],
      "placeholderDocument": "{\"content\":\"heading paragraph+\",\"placeholders\":{\"heading\":\"Enter title\",\"paragraph\":\"Start writing…\"}}"
    }
  },
  ...
}
```

#### Placeholder Document

> [!WARNING]
> Developer preview. API may change.

`placeholderDocument` takes a JSON string with two optional keys:

* **`content`** — a ProseMirror content expression that constrains which node types the document contains and in what order. Examples: `"heading"` (exactly one heading), `"heading paragraph+"` (one heading followed by one or more paragraphs), `"heading paragraph*"` (heading with optional paragraphs).
* **`placeholders`** — an object mapping ProseMirror node-type names to placeholder text shown when the node is empty.

Example configuration:

```js
// Rendered as a JSON string in the template attribute:
{
  "content": "heading paragraph+",
  "placeholders": {
    "heading": "Enter title",
    "paragraph": "Start writing…"
  }
}
```

**Valid node-type names** for `placeholders` (and `content`):

* `heading` — all levels use the same node type; the `level` attribute (1–6) is set by the editor. Use `heading`, not `heading1`.
* `paragraph`
* `bulletList`, `orderedList`, `listItem`
* `blockquote`
* `codeBlock`
* `image`, `video`

**To produce the final attribute value**, JSON-stringify your config object — the JSON must be embedded as a string in the `placeholderDocument` attribute. When building templates in code:

```js
attributes: {
  placeholderDocument: JSON.stringify({
    content: "heading paragraph+",
    placeholders: {
      heading: "Enter title",
      paragraph: "Start writing…"
    }
  })
}
```

### Live preview

The compatible Strife Web Components for a Rich Content field are container components only.

> [!NOTE]
> For more information on live preview and Strife Web Components, please refer to the [Live preview documentation](https://strife.app/docs/reference/live-preview.md).