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.

Maud depends on lustre and mork. Add all three packages to your project:

gleam add maud@1
gleam add lustre@5
gleam add mork@1

Quick start

Render Markdown to Lustre elements with the default HTML components:

import maud
import maud/components
import mork

pub fn main() {
  let elements =
    maud.render_markdown(
      "# Hello, world!\n\nThis is **maud**.",
      mork.configure(),
      components.default(),
    )
  // `elements` is a `List(lustre/element.Element(a))` ready to use in your Lustre app
}

Custom components

Override individual components to apply your own styling via piping:

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

pub fn main() {
  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,
    )
}

Every Markdown construct has a matching setter on Components (a, blockquote, checkbox, code, del, em, footnote, h1–h6, hr, img, li, mark, ol, p, pre, strong, table, tbody, td, th, thead, tr, ul), so you can customize exactly what you need while keeping the defaults for everything else.

Further documentation can be found at https://hexdocs.pm/maud.

Development

gleam build   # Build the project
gleam test    # Run the tests
gleam format  # Format source files

License

Maud is licensed under the MIT License