# @sanity/block-content-to-hyperscript

> Function for transforming Sanity block content to HyperScript

Latest version **3.0.1** (published 2025-09-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sanity/block-content-to-hyperscript
pnpm add @sanity/block-content-to-hyperscript
yarn add @sanity/block-content-to-hyperscript
bun add @sanity/block-content-to-hyperscript
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2025-09-09 |
| First published | 2017-10-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 130.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18 |
| Author | Sanity |
| Maintainers | kmelve, bjoerge, rexxars, skogsmaskin, tonina, mattcraig, joneidejohnsen, rubioz, robinpyon, mariuslundgard, sanity-io, evenw, radhe_sanity, rbotten, danielsgroves, judofyr, ryanblock, obliadp, dcilke, madken, fredcarlsen, hermanw, tambet, sgulseth, atombender, simeonsanity, stipsan, snorreeb, rankers, rdunk, michael-sanity, vincentquigley, ritasdias, kenjonespizza, josh_sanity_io, cngonzalez-sanity, jjburbridge, tdfka_rick, ryanbonial-sanity, indrek.karner, ash, sergeisarviro, refiito, drewsanity, kaspar.lippmaa.sanity, dam, simen.svale, tbeseda, daniel.malmer, jordanl17, colepeters, armandocerna, joan_miralles_paez, christianhg, pedro-sanity, jwoods-sanity, tiit.kass.saity, binoy14, pauloborgesf, ausha, chrislarocquesanity, rostimelk, mattlewine.sanity, msfragala, adoprog, tonysanity, betson, georgedoescode, macdonst, eoinsanity, dashedstripes, jmswrnr, snocorp_sanity, mmgj, filmaj, samhem, gu-stav, patricksanity, mads.mogenshoj, sanitytom, sanity-cb, sanitykev, victor.ayogu, ryanbethel_sanity, brianleroux, johnsicili, p10e, krlund, jonahsnider, mwritter, torbratsbergsanity, evelinawahlstrom, jw-sanity |

## Links

- npm: https://www.npmjs.com/package/@sanity/block-content-to-hyperscript
- Repository: https://github.com/sanity-io/block-content-to-hyperscript
- Homepage: https://github.com/sanity-io/block-content-to-hyperscript#readme
- Issues: https://github.com/sanity-io/block-content-to-hyperscript/issues
- npm.io page: https://npm.io/package/@sanity/block-content-to-hyperscript

## Dependencies (4)

- [hyperscript](https://npm.io/package/hyperscript.md) ^2.0.2
- [object-assign](https://npm.io/package/object-assign.md) ^4.1.1
- [@sanity/image-url](https://npm.io/package/@sanity/image-url.md) ^0.140.15
- [@sanity/generate-help-url](https://npm.io/package/@sanity/generate-help-url.md) ^0.140.0

## Recent versions

- 3.0.1 (latest) — 2025-09-09
- 3.0.0 — 2021-05-15
- 2.0.10 — 2019-09-19
- 2.0.9 — 2019-09-19
- 2.0.8 — 2019-05-23
- 2.0.7 — 2019-01-06
- 2.0.6 — 2018-10-23
- 2.0.5 — 2018-08-29
- 2.0.4 — 2018-08-29
- 2.0.3 — 2018-08-29
- 2.0.2 — 2018-07-29
- 2.0.1 — 2018-07-09
- 2.0.0 — 2018-07-04
- 1.3.7 — 2018-07-04
- 1.3.6 — 2018-07-04
- … 16 more at https://npm.io/package/@sanity/block-content-to-hyperscript/versions

## README

# block-content-to-hyperscript

Render an array of [block text](https://www.sanity.io/docs/schema-types/block-type) from Sanity with [HyperScript](https://github.com/hyperhype/hyperscript).

## Installing

```
npm install --save @sanity/block-content-to-hyperscript
```

## Usage

```js
const h = require('hyperscript')
const blocksToHyperScript = require('@sanity/block-content-to-hyperscript')
const client = require('@sanity/client')({
  projectId: '<your project id>',
  dataset: '<some dataset>',
  useCdn: true
})

const serializers = {
  types: {
    code: props => h('pre', {className: props.node.language}, h('code', props.node.code))
  }
}

client.fetch('*[_type == "article"][0]').then(article => {
  const el = blocksToHyperScript({
    blocks: article.body,
    serializers: serializers
  })

  document.getElementById('root').appendChild(el)
})
```

## Options

- `className` - When more than one block is given, a container node has to be created. Passing a `className` will pass it on to the container. Note: see `renderContainerOnSingleChild`.
- `renderContainerOnSingleChild` - When a single block is given as input, the default behavior is to not render any container. If you always want to render the container, pass `true`.
- `serializers` - Specifies the functions to use for rendering content. Merged with default serializers.
- `serializers.types` - Serializers for block types, see example above
- `serializers.marks` - Serializers for marks - data that annotates a text child of a block. See example usage below.
- `serializers.list` - Function to use when rendering a list node
- `serializers.listItem` - Function to use when rendering a list item node
- `serializers.hardBreak` - Function to use when transforming newline characters to a hard break (default: `<br/>`, pass `false` to render newline character)
- `serializers.container` - Serializer for the container wrapping the blocks
- `serializers.unknownType` - Override the default serializer for blocks of unknown type, if `ignoreUnknownTypes` is set to `false` (the default).
- `serializers.unknownMark` - Override the default serializer for marks of unknown type. Defaults to a span without any styling.
- `imageOptions` - When encountering image blocks, this defines which query parameters to apply in order to control size/crop mode etc.
- `ignoreUnknownTypes` - By default (or when setting this property explicitly to `true`) it will output a hidden `<div>` with a warning. By setting this property to `false`, the renderer will throw an error when encountering unknown block types. The behavior of the unknown type rendering can be customized by specifying a serializer with `serializers.unknownType`.

In addition, in order to render images without materializing the asset documents, you should also specify:

- `projectId` - The ID of your Sanity project.
- `dataset` - Name of the Sanity dataset containing the document that is being rendered.

## Examples

### Rendering custom marks

```js
const input = [
  {
    _type: 'block',
    children: [
      {
        _key: 'a1ph4',
        _type: 'span',
        marks: ['s0m3k3y'],
        text: 'Sanity'
      }
    ],
    markDefs: [
      {
        _key: 's0m3k3y',
        _type: 'highlight',
        color: '#E4FC5B'
      }
    ]
  }
]

const highlight = props => h('span', {style: {backgroundColor: props.mark.color}}, props.children)

const content = blocksToHyperScript({
  blocks: input,
  serializers: {marks: {highlight}}
})
```

### Specifying image options

```js
blocksToHyperScript({
  blocks: input,
  imageOptions: {w: 320, h: 240, fit: 'max'},
  projectId: 'myprojectid',
  dataset: 'mydataset'
})
```

### Customizing default serializer for `block`-type

```js
const BlockRenderer = props => {
  const style = props.node.style || 'normal'

  if (/^h\d/.test(style)) {
    const level = style.replace(/[^\d]/g, '')
    return h('h2', {className: `my-heading level-${level}`}, props.children)
  }

  return style === 'blockquote'
    ? h('blockquote', {className: 'my-block-quote'}, props.children)
    : h('p', {className: 'my-paragraph'}, props.children)
}

blocksToHyperScript({
  blocks: input,
  serializers: {types: {block: BlockRenderer}}
})
```

## License

MIT-licensed. See LICENSE.

---
_Source: https://npm.io/package/@sanity/block-content-to-hyperscript · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._