html2any

Example

Input

HTML
<div>
  <h1>Getting Started</h1>
  <p>Welcome to html2any documentation!</p>
  <h3>Install</h3>
  <p>html2any is a dependency free library can be used in any JS runtime.</p>
  <pre><code>npm install --save html2any</code></pre>
  <h3>Usage</h3>
  <p>Map each parsed node to whatever output shape your app needs.</p>
</div>
Transformer
function rule(node, children, index) {
  if (typeof node === 'string') {
    return node
  }
  const Tag = node.name
  const key = typeof node.index === 'number' ? node.index : undefined
  if (['h1', 'h2', 'h3'].includes(Tag)) {
    return <Tag key={key} className="title">{children}</Tag>
  }
  if (Tag === 'pre') {
    return <pre key={key} className="pre">{children}</pre>
  }
  return <Tag key={key}>{children}</Tag>
}

Preview

Getting Started

Welcome to html2any documentation!

Install

html2any is a dependency free library can be used in any JS runtime.
npm install --save html2any

Usage

Map each parsed node to whatever output shape your app needs.
https://
Example HTML

Parsed Tags

  1. - div
  2. - h1
  3. - p
  4. - h3
  5. - p
  6. - pre
  7. - code
  8. - h3
  9. - p

Preview

Getting Started

Welcome to html2any documentation!

Install

html2any is a dependency free library can be used in any JS runtime.
npm install --save html2any

Usage

Map each parsed node to whatever output shape your app needs.