> From the [Strife developer docs](https://strife.app/docs/reference/live-preview/web-components). Every page is listed in [llms.txt](https://strife.app/docs/llms.txt).

# Web Components

The Strife Web Components are a collection of custom elements that elevate standard HTML tags, enabling them to respond to real-time updates, without the need to reload the page.

> [!NOTE]
> Prior to utilizing Strife Web Components, please ensure that you've followed the [setup guide for installing Live Preview](https://strife.app/docs/reference/live-preview.md).

Utilizing Strife Web Components is a straightforward process that doesn't demand extra markup on your page. Use the attributes below in your existing markup where you want to display your content.

<table><thead><tr><th width="182">Attribute</th><th>Description</th></tr></thead><tbody><tr><td><code>is</code></td><td>The name of the Strife Web Component to use, see below for a complete list.</td></tr><tr><td><code>data-field</code></td><td>The field name that corresponds to the property name storing the value in the database.</td></tr><tr><td><code>data-type</code></td><td>Sopecifies the field type, e.g. 'chapters', 'html', ...</td></tr></tbody></table>

Basically, you 'enhance' your standard HTML tag by merely adding the "str-" prefix to the tag name and utilizing it in the 'is' attribute.

This is an example using the `H1` tag:

```html
<h1 is="str-h1" data-field="heading">Hello, world!</h1>
```

Explore the comprehensive list of Web Components grouped into _Text_, _Container_, and _Custom_ categories. Our aim is to provide a web component for every tag used in content rendering.

> [!NOTE]
> Also ensure that Strife Web Components are compatible with the field used in the template. For more information, refer to the [Field reference page](https://strife.app/docs/reference/fields.md).

### Text Components

The Strife Web Components in this category exclusively replace the `textContent` of the corresponding HTML element. Below is a compilation of Strife Web Components falling under the 'text' category:

```
'str-address', 'str-p', 'str-span', 'str-strong', 'str-h1', 'str-h2', 'str-h3', 'str-h4', 'str-h5', 'str-h6', 'str-abbr', 'str-b', 'str-button', 'str-cite', 'str-code', 'str-dfn', 'str-em', 'str-i', 'str-label', 'str-mark', 'str-q', 'str-sub', 'str-sup'
```

### Container Components

Container components replace the `innerHTML` of their corresponding HTML element. Here is a list of all available container Strife Web Components.

```
'str-div', 'str-ul', 'str-ol', 'str-section', 'str-header', 'str-footer', 'str-nav', 'str-article', 'str-main', 'str-aside', 'str-blockquote'
```

### Custom Components

Some Strife Web Components are tailored to work exclusively with specific fields in the template and are not compatible with others. These specialized components include:

```
'str-anchor', 'str-img', 'str-picture', 'str-time'
```

Some of them come with additional attributes beyond the `is` and `data-field` attributes. Explore these below.

<table><thead><tr><th width="152.33333333333331">Component</th><th width="159">Attribute</th><th>Description</th></tr></thead><tbody><tr><td><code>str-time</code></td><td><code>data-format</code></td><td>Specifies the date format for displaying the date. E.g. <code>yyyy-MM-dd</code></td></tr></tbody></table>