// Import Micron Parser (requires modules)
import MicronParser from 'micron-parser';

// Create a new parser (darkTheme = true/false | defaults to true, forceMonospace = true/false | defaults to true)
const parser = new MicronParser(true, true);

// Input Micron markup
const micronMarkup = `
> Example Heading
-∿
This is a simple line in Micron.
# This line is a comment and won't appear in the output.
`;

// Convert Micron to an HTML string
const htmlOutput = parser.convertMicronToHtml(micronMarkup);

// Insert it into your page
document.getElementById('yourElement').innerHTML = htmlOutput;

// Or create a DocumentFragment from Micron
const domFragment = parser.convertMicronToFragment(micronMarkup);
// and append it to the DOM
document.body.appendChild(domFragment);

Partials

Micron-parser-js supports embedded partials. The syntax is `{url`refresh`fields} where refresh is the seconds between reloads (must be >= 1) and fields is a |-separated list. A pid=<id> field gives the partial a stable identity for tracking across refreshes.

The parser emits a placeholder <div class="Mu-partial">⧖</div> with all the parsed metadata as data-* attributes. Wire it up with MicronParser.bindPartials(root, fetcher, options?) in your application logic:

const root = document.getElementById('output');
root.innerHTML = parser.convertMicronToHtml(micronMarkup);

const cleanup = MicronParser.bindPartials(root, async ({ destination, fields, id, signal }) => {
    const res = await fetch(`/proxy?path=${encodeURIComponent(destination)}`, { signal });
    return await res.text(); // returned as innerHTML; may also return a Node or { markup: string }
});

// when the view is torn down:
cleanup();

Accessibility

Pass { accessibility: true } as the third constructor argument to add screen reader semantics to the output. Headings get role="heading" with aria-level, text dividers get role="separator", text inputs get an aria-label from their Micron field name, table headers get scope="col", partial placeholders get role="status" with aria-live and aria-busy, and any text that forceMonospace split into per-glyph spans is paired with a visually hidden plain-text copy so it is read as normal words. Output is unchanged when the option is off.

const parser = new MicronParser(true, true, { accessibility: true });

Serif output

Pass { serif: true } to render prose in a proportional serif face while literal blocks stay monospaced, so ASCII art and code inside `= blocks still line up. The output container gets the class Mu-serif and literal lines get Mu-literal. The parser injects font rules that read two CSS variables, which you set on any ancestor of the output:

#output {
    --mu-serif-font: 'Noto Serif Nerd Font', Georgia, serif;
    --mu-mono-font: 'Roboto Mono Nerd Font', monospace;
}

const parser = new MicronParser(true, true, { serif: true });

With forceMonospace on, the per-glyph alignment cells are applied only inside literal blocks in serif mode. Output is unchanged when the option is off.

Best practices

For optimal display of Micron content in the browser it's recommended to use a monospaced font with NerdFont icon support, such as the ones provided here.