# datocms-structured-text-to-html-string

> Convert DatoCMS Structured Text field to HTML string

Latest version **6.0.0** (published 2026-05-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install datocms-structured-text-to-html-string
pnpm add datocms-structured-text-to-html-string
yarn add datocms-structured-text-to-html-string
bun add datocms-structured-text-to-html-string
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 6.0.0 |
| Published | 2026-05-25 |
| First published | 2021-01-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 51.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 26 |
| Author | Stefano Verna |
| Maintainers | marcelofinamorvieira, stefanoverna, delphaber, mat_jack1, souljuse, sistrall_, datoroger |
| Keywords | datocms, structured-text |

## Links

- npm: https://www.npmjs.com/package/datocms-structured-text-to-html-string
- Repository: https://github.com/datocms/structured-text
- Homepage: https://github.com/datocms/structured-text/tree/master/packages/to-html-string#readme
- Issues: https://github.com/datocms/structured-text/issues
- npm.io page: https://npm.io/package/datocms-structured-text-to-html-string

## Dependencies (3)

- [vhtml](https://npm.io/package/vhtml.md) ^2.2.0
- [datocms-structured-text-utils](https://npm.io/package/datocms-structured-text-utils.md) ^6.0.0
- [datocms-structured-text-generic-html-renderer](https://npm.io/package/datocms-structured-text-generic-html-renderer.md) ^6.0.0

## Recent versions

- 6.0.0 (latest) — 2026-05-25
- 4.1.0-alpha.0 (next) — 2025-01-17
- 5.1.16 — 2026-05-03
- 5.1.15 — 2026-04-28
- 5.1.14 — 2026-04-28
- 5.1.13 — 2026-04-28
- 5.1.11 — 2026-04-27
- 5.1.9 — 2026-04-24
- 5.1.7 — 2025-12-05
- 5.1.6 — 2025-10-01
- 5.1.5 — 2025-10-01
- 5.1.4 — 2025-09-21
- 5.1.3 — 2025-09-20
- 5.1.2 — 2025-09-19
- 5.1.1 — 2025-09-10
- … 53 more at https://npm.io/package/datocms-structured-text-to-html-string/versions

## README

![Node.js CI](https://github.com/datocms/structured-text/workflows/Node.js%20CI/badge.svg)

# datocms-structured-text-to-html-string

HTML renderer for the DatoCMS Structured Text field type.

## Installation

Using [npm](http://npmjs.org/):

```sh
npm install datocms-structured-text-to-html-string
```

Using [yarn](https://yarnpkg.com/):

```sh
yarn add datocms-structured-text-to-html-string
```

## Usage

```javascript
import { render } from 'datocms-structured-text-to-html-string';

render({
  schema: 'dast',
  document: {
    type: 'root',
    children: [
      {
        type: 'paragraph',
        children: [
          {
            type: 'span',
            value: 'Hello world!',
          },
        ],
      },
    ],
  },
}); // -> <p>Hello world!</p>

render({
  type: 'root',
  children: [
    {
      type: 'paragraph',
      content: [
        {
          type: 'span',
          value: 'Hello',
          marks: ['strong'],
        },
        {
          type: 'span',
          value: ' world!',
          marks: ['underline'],
        },
      ],
    },
  ],
}); // -> <p><strong>Hello</strong><u> world!</u></p>
```

You can pass custom renderers for nodes and text as optional parameters like so:

```javascript
import { render, renderNodeRule } from 'datocms-structured-text-to-html-string';
import { isHeading } from 'datocms-structured-text-utils';

const structuredText = {
  type: 'root',
  children: [
    {
      type: 'heading',
      level: 1,
      content: [
        {
          type: 'span',
          value: 'Hello world!',
        },
      ],
    },
  ],
};

const options = {
  renderText: (text) => text.replace(/Hello/, 'Howdy'),
  customNodeRules: [
    renderNodeRule(
      isHeading,
      ({ adapter: { renderNode }, node, children, key }) => {
        return renderNode(`h${node.level + 1}`, { key }, children);
      },
    ),
  ],
  customMarkRules: [
    renderMarkRule('strong', ({ adapter: { renderNode }, children, key }) => {
      return renderNode('b', { key }, children);
    }),
  ],
};

render(document, options);
// -> <h2>Howdy world!</h2>
```

Last, but not least, you can pass custom renderers for `itemLink`, `inlineItem`, `block` as optional parameters like so:

```javascript
import { render } from 'datocms-structured-text-to-html-string';

const graphqlResponse = {
  value: {
    schema: 'dast',
    document: {
      type: 'root',
      children: [
        {
          type: 'paragraph',
          children: [
            {
              type: 'span',
              value: 'A ',
            },
            {
              type: 'itemLink',
              item: '344312',
              children: [
                {
                  type: 'span',
                  value: 'record hyperlink',
                },
              ],
            },
            {
              type: 'span',
              value: ' and an inline record: ',
            },
            {
              type: 'inlineItem',
              item: '344312',
            },
          ],
        },
        {
          type: 'block',
          item: '812394',
        },
      ],
    },
  },
  blocks: [
    {
      id: '812394',
      image: { url: 'http://www.datocms-assets.com/1312/image.png' },
    },
  ],
  links: [{ id: '344312', title: 'Foo', slug: 'foo' }],
};

const options = {
  renderBlock({ record, adapter: { renderNode } }) {
    return renderNode('figure', {}, renderNode('img', { src: record.image.url }));
  },
  renderInlineRecord({ record, adapter: { renderNode } }) {
    return renderNode('a', { href: `/blog/${record.slug}` }, record.title);
  },
  renderLinkToRecord({ record, children, adapter: { renderNode } }) {
    return renderNode('a', { href: `/blog/${record.slug}` }, children);
  },
};

render(document, options);
// -> <p>A <a href="/blog/foo">record hyperlink</a> and an inline record: <a href="/blog/foo">Foo</a></p>
//    <figure><img src="http://www.datocms-assets.com/1312/image.png" /></figure>
```

---
_Source: https://npm.io/package/datocms-structured-text-to-html-string · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._