HyperMDX

HyperMDX is an MDX-like library to enhance markdown with Hyperapp.

Features

• Custom components for HTML elements
• Embed Hyperapp components inside a page
• Async and sync modes
• Remark plugins support

Install

pnpm i hypermdx

Example

import { App } from '@tinyhttp/app'
import { h, text } from 'hyperapp'
import { renderToStream } from 'hyperapp-render'
import { hypermdx } from 'hypermdx'

const Component = (children: string) => h('h3', { style: { color: 'red' } }, text(children))

const md = hypermdx({
  components: {
    h1: (n, p, c) => h(n, { style: { color: 'blue' }, ...p }, c)
  }
})

const content = md`
# This is a custom heading defined in components

- this is a list
- yet another list

${Component('custom component')}
    `

new App().get(async (_, res) => renderToStream(content).pipe(res)).listen(3000)

Output:

<div>
  <div>
    <h1 style="color:blue">This is a custom heading defined in components</h1>
    <ul>
      <li>
        <p>this is a list</p>
      </li>
      <li>
        <p>yet another list</p>
      </li>
    </ul>
  </div>
  <h3 style="color:red">custom component</h3>
</div>

API

hypermdx(options)

Creates an function to render markdown and components.

const mdx = hypermdx()

md('Hello World', Component('hello'))

Additionally it supports template strings.

const mdx = hypermdx()

md`
# Hello World
${Component('hello')}
`

Options

components

• Default: {}

Custom components to be used instead of default HTML tags.

const md = hypermdx({
  components: {
    h1: (name, props, children) => h(name, { style: { color: 'blue' }, ...props }, children)
  }
})

h

• Default: hyperapp.h

Hyperscript function.

import { hyperscript2 } from 'my-own-lib'

const md = hypermdx({ h: hyperscript2 })

md`
# Hello World
`

remarkPlugins

• Default: []

Additional Remark plugins.

import hypermdx from 'hypermdx'
import capitalize from 'remark-capitalize'
import emoji from 'remark-emoji'

const md = hypermdx({ remarkPlugins: [emoji, capitalize] })

async(options)

Same as hypermdx but instead, it returns an async function.

import { async as hypermdx } from 'hypermdx'

const md = hypermdx()

await md`
# Hello World
`