Show HN: Lobster.js – Extended Markdown with layout blocks and footnotes

I built lobster.js which is an extended Markdown parser that renders directly in the browser — no build tool, no framework, no configuration.

The entire setup is a single script tag:

  <script type="module">
    import { loadMarkdown } from "https://hacknock.github.io/lobsterjs/lobster.js";
    loadMarkdown("./content.md", document.getElementById("content"));
  </script>

---

What makes it different from marked.js or markdown-it:

Standard parsers convert Markdown to HTML — that's it. lobster.js adds layout primitives to the Markdown syntax itself:

- :::warp id defines a named content block; [~id] places it inside a silent table cell. This is how you build multi-column layouts entirely in Markdown, without touching HTML. - :::details Title renders a native <details>/<summary> collapsible block. - :::header / :::footer define semantic page regions. - Silent tables (~ | ... |) create borderless layout grids. - Cell merging: horizontal (\|) and vertical (\---) spans. - Image sizing: .

---

CSS-first design:

Every rendered element gets a predictable lbs-* class name (e.g. lbs-heading-1, lbs-table-silent). No default stylesheet is bundled — you bring your own CSS and have full control over appearance.

---

The showcase site is itself built with lobster.js. The sidebar is nav.md, and each page is a separate Markdown file loaded dynamically via ?page= query parameters — no JS router, no framework.

Markdown is the one format that humans and LLMs both write fluently. If you want a structured static site without a build pipeline, lobster.js lets that Markdown become a full web page — layout and all.

GitHub: https://github.com/Hacknock/lobsterjs Showcase: https://hacknock.github.io/lobsterjs-showcase/