Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/nuejs/nue/llms.txt

Use this file to discover all available pages before exploring further.

Nuemark is the content authoring format at the heart of Nue. It solves a real problem: standard Markdown is too limited for modern web pages, while MDX entangles content with JavaScript. Nuemark takes a third path — extending Markdown with purpose-built syntax for layouts, media, and interactive components, without requiring authors to write or understand any code.

​
How Nuemark extends Markdown

Standard Markdown handles paragraphs, headings, lists, and links well. Nuemark keeps all of that and adds three layers on top: structural layouts through indentation-based syntax, built-in components for rich media, and a custom tag extension system that developers define and authors use.

Full Markdown compatibility

Everything from CommonMark works, plus tables, footnotes, and syntax-highlighted code blocks.

Layout primitives

Sections, grids, stacks, and columns through clean indentation. No div soup or CSS class strings.

Built-in components

Responsive images with <picture> srcset, video embeds, expandable accordions, and data tables.

Custom tag system

Developers define custom tags once; authors use them everywhere without touching any code.

​
Section and grid layouts

Nuemark uses indentation to create structural layouts. A thematic break (---) inside an indented block creates a new section. The parser detects when a tag body contains multiple ----separated blocks and sectionizes them automatically. 
[grid]
  ## Feature one
  First column content.

  ---

  ## Feature two
  Second column content.

  ---

  ## Feature three
  Third column content.
The [grid], [stack], and [block] tags each render their sectionized content differently. [block] wraps each section in a <div>, while [grid] and [stack] apply CSS layout semantics via class names. Tags can carry HTML attributes directly: 
[grid .hero-features #features]
  ## Fast by default
  ...

  ---

  ## Content-first
  ...

​
Built-in components

Nuemark ships with a library of built-in tags for common content needs. All are invoked with the [tagname] syntax on its own line, with optional inline arguments.

​
Responsive images

The [image] tag (or the [!] shortcut) renders an accessible <figure> with lazy loading. When you provide both a small and a large source, it generates a <picture> element with <source> tags and a max-width media query: 
[image]
  src: /img/hero-large.webp
  small: /img/hero-mobile.webp
  offset: 600
  alt: Dashboard overview
  caption: The Nue development dashboard
This renders to: 
<figure>
  <picture>
    <source srcset="/img/hero-mobile.webp" media="(max-width: 600px)" type="image/webp">
    <source srcset="/img/hero-large.webp" media="(min-width: 600px)" type="image/webp">
    <img alt="Dashboard overview" loading="lazy" src="/img/hero-large.webp">
  </picture>
  <figcaption>The Nue development dashboard</figcaption>
</figure>

​
Video embeds

The [video] tag renders a native <video> element with support for autoplay, controls, loop, muted, and poster attributes: 
[video src="/demo.mp4" autoplay muted loop]

​
Expandable content

The [accordion] tag renders <details>/<summary> elements. Each section (separated by ---) becomes one collapsible panel. Set open: 0 to have the first panel open by default: 
[accordion open: 0]
  ## What is Nue?
  A web framework focused on standards and content.

  ---

  ## How does routing work?
  Files map directly to URLs based on their directory path.

​
Tables

Nuemark supports both inline pipe syntax and the [table] tag. The tag version accepts a YAML data block: 
[table caption="Pricing tiers"]
  rows:
    - [Starter, Free, 1 project]
    - [Pro, $19/mo, Unlimited]
    - [Team, $49/mo, Collaboration]
Alternatively, use inline pipe syntax with a separator row to mark the header: 
| Name    | Price  | Projects  |
| ---     | ---    | ---       |
| Starter | Free   | 1 project |
| Pro     | $19/mo | Unlimited |

​
Definition lists

The [define] tag creates semantic <dl> lists, useful for glossaries and FAQs: 
[define]
  ## Term one {#term-one}
  The definition of the first term.

  ---

  ## Term two {#term-two}
  The definition of the second term.

​
Custom tag extension system

The custom tag system is how Nue bridges the gap between developers and content authors. Developers define tags once in JavaScript; authors use them in Markdown with no code knowledge required. When a tag name is not found in Nuemark’s built-in set, the renderer calls renderIsland, which emits a custom HTML element with a nue attribute and any provided data serialized as an inline JSON <script>: 
// From render-tag.js
export function renderIsland(tag, all_data) {
  const { name, attr } = tag
  const data = extractData(tag.data, all_data)

  const json = !Object.keys(data)[0] ? '' :
    elem('script', { type: 'application/json' }, JSON.stringify(data))
  return elem(name, { 'nue': name, ...attr }, json)
}
A developer might define a [pricing-table] tag as a Nue HTML component. An author uses it in any Markdown file: 
[pricing-table]
  plan: pro
  highlight: true
This approach keeps content files free of import statements and JSX. Authors can safely edit content without risk of breaking component wiring.

​
Passing data to custom tags

Tag arguments come in two forms. Inline values go on the same line as the tag name; YAML data blocks go in the indented body: 
[chart type="bar" title="Monthly visits"]
  data:
    - [Jan, 1200]
    - [Feb, 1450]
    - [Mar, 980]
Arguments prefixed with : resolve against page data rather than taking a literal value. This lets tags reference datasets defined in YAML files: 
[pricing-table :rows="pricing_tiers"]
Here pricing_tiers would be a key in the page’s data context, making the tag render dynamically from an external data source.

​
Front matter metadata

Every Nuemark document can begin with a YAML front matter block. Metadata defined here is merged into the page’s data context and available to layouts and custom tags: 
---
title: "Getting Started with Nue"
date: 2025-01-15
author: Jon Doe
tags: [tutorial, beginner]
---

# Getting Started

Your content begins here.
Front matter values flow into the page <head> for SEO (title, description), into layout components (for page headers and navigation), and into the template data context.

​
Contrast with MDX

MDX lets you use JSX in Markdown, which means import statements and component logic appear inside content files:
import { Chart } from '../components/Chart'
import pricing from '../data/pricing.json'

# Pricing

<Chart data={pricing} type="bar" />
Non-technical editors risk breaking builds when touching these files. Component updates require touching every content file that imports them.
In Nuemark, the same result uses no imports and no code. The tag system handles the bridge between content and components:
# Pricing

[chart :data="pricing" type="bar"]
The pricing dataset comes from a YAML file in @shared/data/. The chart component is defined once by a developer and available everywhere. Authors never touch JavaScript.

​
Parsing and rendering API

The nuemark package exports two primary functions: 
import { nuemark, parseNuemark } from 'nuemark'

// Render Markdown string to HTML
const html = nuemark(content, opts)

// Parse to document AST (headings, meta, blocks)
const doc = parseNuemark(content)
parseNuemark returns a document object with meta (front matter), headings (list of heading objects with level, text, and id), and a render() method that accepts rendering options including custom tags and page data.
Custom tags registered in opts.tags override built-in tags of the same name, letting you replace default rendering for specific elements in your project.

Build docs developers (and LLMs) love

Get started for freeTalk to us