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: import { loadMarkdown } from "https://hacknock.github.io/lobsterjs/lobster.js"; loadMarkdown("./content.md", document.getElementById("content")); 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.…
What it does
In the maker’s words, at launch
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: <script type="module"> import { loadMarkdown } from "https://hacknock.github.io/lobsterjs/lobster.js"; loadMarkdown("./content.md", document.getElementById("content")); </script> 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 <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/
Does the same job
all alternatives →
- MPMarkdown page – Create a web page with just markdown2018 · github.com · ▲169
More dev tools this month
the category →
Open-source GTM skills for technical founders
Dev tools · 29d ago · gtmcofounder.com
OpenTrailPaper is open-source bike computer firmware for the LilyGO T5S3 4.7" E-Paper PRO. It supports offline maps, GPX routes, FIT recording and Bluetooth sensors.
Dev tools · 1d ago · opentrailpaper.com
Launched alongside, March 2026
the whole month →
Switch from ChatGPT to Claude with import memory feature
AI · Mar 2026 · claude.com
