maud

An MDX-inspired Markdown renderer for Lustre and Gleam.

Maud turns Markdown text into a Lustre component tree, giving you full control over how each Markdown construct is rendered. It uses mork for parsing and lustre for the element model.

Both lustre and mork are required peer dependencies and must be added to your project alongside maud.

Quick start

import maud
import maud/components
import mork

// Render with default HTML components
let elements =
  maud.render_markdown(
    "# Hello, world!\n\nThis is **maud**.",
    mork.configure(),
    components.default(),
  )

Custom components

Override individual components to apply your own styling:

import lustre/attribute
import lustre/element/html
import maud
import maud/components
import mork

let my_components =
  components.default()
  |> components.h1(fn(_id, children) {
    html.h1([attribute.class("text-4xl font-bold")], children)
  })
  |> components.p(fn(children) {
    html.p([attribute.class("leading-relaxed")], children)
  })

let elements =
  maud.render_markdown(
    "# Styled heading\n\nStyled paragraph.",
    mork.configure(),
    my_components,
  )

Values

render_document

</>

pub fn render_document(
  document: document.Document,
  components: components.Components(a),
) -> List(element.Element(a))

Render a pre-parsed mork Document into a list of Lustre elements using the given components configuration.

Children are rendered bottom-up: each leaf is converted first, then passed to its parent component function from Components(a).

Examples

import maud
import maud/components
import mork

let doc =
  mork.configure()
  |> mork.parse_with_options("# Hi")
let elements = maud.render_document(doc, components.default())

render_markdown

</>

pub fn render_markdown(
  markdown: String,
  render_options: document.Options,
  components: components.Components(a),
) -> List(element.Element(a))

Parse a Markdown string and render it into a list of Lustre elements.

This is a convenience function that combines mork.parse_with_options and render_document in a single call. Use render_document directly when you need to inspect or transform the parsed document before rendering.

Examples

import maud
import maud/components
import mork

let elements =
  maud.render_markdown(
    "Hello **world**",
    mork.configure(),
    components.default(),
  )