Show HN: Lobster.js – Extended Markdown with layout blocks and footnotes Hi HN! 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:
It's particularly useful for GitHub Pages sites where you want Markdown-driven content without pulling in Jekyll or Hugo. --- 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
/
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://ift.tt/iyxN2pm Showcase: https://hacknock.github.io/lobsterjs-showcase/ https://ift.tt/iyxN2pm March 8, 2026 at 09:10PM
0 Comments