very-small-parser

very-small-parser

• JavaScript parser for Markdown, HTML, and inline CSS.
• Tiny, just over 4KB.
• Runs in browser and Node.js.
• No dependencies.
• Markdown is parsed into MDAST (Markdown Abstract Syntax Tree).
• HTML is parsed into HAST (Hypertext Abstract Syntax Tree).

Usage

Live demo

On the web you can simply import the module using a script tag.

Using ESM.sh:

<script type="module">
  import { markdown } from '//esm.sh/very-small-parser';

  const ast = markdown.block.parsef('Hello __world__!');
  console.log(ast);
</script>

Using jsDelivr:

<script type="module">
  import { markdown } from '//esm.run/very-small-parser';

  const ast = markdown.block.parsef('Hello __world__!');
  console.log(ast);
</script>

To use TypeScript types or import into a Node.js project, you can install the package from npm:

npm install very-small-parser

Reference

Markdown

Parse Markdown document (block elements):

import { markdown } from 'very-small-parser';

const ast = markdown.block.parsef('Hello __world__!');

Parse Markdown inline markup only:

const ast = markdown.inline.parse('Hello __world__!');

Detect if text is likely to be a Markdown document:

import { is } from 'very-small-parser/lib/markdown/is';

is('Hello __world__!');     // true
is('<b>Hello</b>!');        // false

Pretty-print MDAST back to text:

import { markdown } from 'very-small-parser';
import { toText } from 'very-small-parser/lib/markdown/block/toText';

const mdast = markdown.block.parse('Hello __world__!');
const text = toText(mdast); // Hello __world__!

Convert MDAST to HAST (Markdown AST to HTML AST):

import { markdown } from 'very-small-parser';
import { toHast } from 'very-small-parser/lib/markdown/block/toHast';
import { toText } from 'very-small-parser/lib/html/toText';

const mdast = markdown.block.parse('Hello __world__!');
const hast = toHast(mdast);
const html = toText(hast); // <p>Hello <strong>world</strong>!</p>

HTML

Parse HTML to HAST (Hypertext Abstract Syntax Tree):

import { html } from 'very-small-parser';

const ast = html.parse('<b>Hello</b> <i>world</i>!');

Pretty-print HAST to HTML:

import { html } from 'very-small-parser';
import { toText } from 'very-small-parser/lib/html/toText';

const hast = html.parse('<b>Hello</b> <i>world</i>!');
const html = toText(hast); // '<b>Hello</b> <i>world</i>!'

Specify tabulation size for indentation when pretty-printing:

import { html } from 'very-small-parser';
import { toText } from 'very-small-parser/lib/html/toText';

const tab = '  ';
const hast = html.parse('<div><b>Hello</b><i>world</i>!</div>', tab);
const html = toText(hast);
// <div>
//   <b>Hello</b>
//   <i>world</i>
//   !
// </div>

Convert HAST to MDAST (HTML AST to Markdown AST):

import { html } from 'very-small-parser';
import { toMdast } from 'very-small-parser/lib/html/toMdast';
import { toText } from 'very-small-parser/lib/markdown/block/toText';

const hast = html.parse('<p><b>Hello</b> <i>world</i>!</p>');
const mdast = toMdast(hast);
const text = toText(mdast); // __Hello__ _world_!

JSON-ML

JSON-ML is a simple way to represent HTML as JSON. For example, the HTML <b>Hello</b> is represented as ['b', null, 'Hello']. The first element is the tag name, the second is the attributes, and the rest are children.

This package contains converters for JSON-ML to HAST and back. See the /src/html/json-ml directory.