pnpm add @mdxld/html

import { toHTML, fromHTML, toJSONLDScript } from '@mdxld/html'
 
const customer = {
  name: 'Acme Corp',
  description: 'A leading software company',
  email: 'hello@acme.com'
}
 
const html = toHTML(customer, { itemtype: 'Organization' })

<article itemscope itemtype="https://schema.org/Organization">
  <h1 itemprop="name">Acme Corp</h1>
  <p itemprop="description">A leading software company</p>
  <dl>
    <dt>email</dt>
    <dd itemprop="email">hello@acme.com</dd>
  </dl>
</article>

function toHTML<T extends Record<string, unknown>>(
  object: T,
  options?: ToHTMLOptions
): string
 
interface ToHTMLOptions {
  /** Include microdata attributes (default: true) */
  microdata?: boolean
  /** Use HTML5 semantic elements (default: true) */
  semantic?: boolean
  /** Schema.org @type for root element */
  itemtype?: string
  /** Wrap in full HTML document */
  document?: boolean
  /** Pretty print with indentation */
  pretty?: boolean
  /** Indentation string (default: '  ') */
  indent?: string
}

// Minimal output without microdata
const html = toHTML(data, { microdata: false, pretty: false })
 
// Full HTML document
const page = toHTML(data, { document: true, itemtype: 'Article' })

function fromHTML<T = Record<string, unknown>>(
  html: string,
  options?: FromHTMLOptions
): T
 
interface FromHTMLOptions {
  /** Extract microdata */
  microdata?: boolean
  /** Strict mode - throw on parse errors */
  strict?: boolean
}

const html = `
<article>
  <h1>My Product</h1>
  <p>A great product</p>
  <ul>
    <li>Feature 1</li>
    <li>Feature 2</li>
  </ul>
</article>
`
 
const data = fromHTML(html)
// {
//   name: 'My Product',
//   description: 'A great product',
//   items: ['Feature 1', 'Feature 2']
// }

function toJSONLDScript<T extends Record<string, unknown>>(
  object: T,
  options?: { type?: string }
): string

const script = toJSONLDScript(article, { type: 'Article' })
// <script type="application/ld+json">
// {
//   "@context": "https://schema.org",
//   "@type": "Article",
//   ...
// }
// </script>

const doc = {
  name: 'Main Title',           // → <h1>
  sections: [
    { name: 'Section 1' },      // → <h2>
    { name: 'Section 2' },      // → <h2>
  ]
}

<article itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Widget</h1>
  <p itemprop="description">A useful widget</p>
  <dl>
    <dt>price</dt>
    <dd itemprop="price">$9.99</dd>
  </dl>
</article>

const entity = {
  name: 'User',
  properties: [
    { name: 'id', type: 'string', required: true, description: 'Unique ID' },
    { name: 'email', type: 'string', required: true, description: 'Email' },
  ]
}
 
toHTML(entity)

<article>
  <h1>User</h1>
  <table>
    <thead>
      <tr>
        <th>Property</th>
        <th>Type</th>
        <th>Required</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><code>id</code></td>
        <td><code>string</code></td>
        <td>✓</td>
        <td>Unique ID</td>
      </tr>
      <tr>
        <td><code>email</code></td>
        <td><code>string</code></td>
        <td>✓</td>
        <td>Email</td>
      </tr>
    </tbody>
  </table>
</article>

import { toHTML } from '@mdxld/html'
 
app.get('/product/:id', async (req, res) => {
  const product = await db.Product.get(req.params.id)
  const html = toHTML(product, {
    document: true,
    itemtype: 'Product'
  })
  res.send(html)
})

import { toHTML } from '@mdxld/html'
 
const email = {
  name: 'Order Confirmation',
  description: 'Your order has been confirmed',
  items: ['Widget x2', 'Gadget x1']
}
 
const html = toHTML(email, { semantic: false, microdata: false })
// Send via email service

import { toHTML, toJSONLDScript } from '@mdxld/html'
 
for (const page of pages) {
  const body = toHTML(page)
  const seo = toJSONLDScript(page, { type: 'WebPage' })
 
  const html = `<!DOCTYPE html>
<html>
<head>
  <title>${page.name}</title>
  ${seo}
</head>
<body>
  ${body}
</body>
</html>`
 
  await Bun.write(`dist/${page.slug}.html`, html)
}

import { fromHTML } from '@mdxld/html'
 
// Scrape and structure
const response = await fetch('https://example.com/product')
const html = await response.text()
const product = fromHTML(html)

// Semantic only
import { toHTML } from '@mdxld/html'
const html = toHTML(data)  // Clean semantic HTML
 
// With styling
import { toHTML } from '@mdxui/html'
const html = toHTML(data, { theme: 'modern' })  // Styled HTML