HN Showcase
Back to browse
GitHub Repository

A tool to convert Markdown into simple and rich web pages.

41 starsTypeScript

Lobster.js – Extended Markdown with layout blocks and footnotes

by Kyome22·Mar 8, 2026·7 points·6 comments
Visit ProjectView on HN

AI Analysis

●●SolidCozyShip ItBig Brain

Markdown layout primitives (:::warp, silent tables) enable multi-column pages without HTML.

Strengths
  • •Zero build-step friction—single script tag in HTML, Markdown file loaded at runtime.
  • •Layout-in-Markdown via warp blocks and silent tables is a genuinely clever syntax innovation.
  • •CSS-first styling (lbs-* class names) gives authors full control without bundled theme lock-in.
Weaknesses
  • •Extended syntax is proprietary to lobster.js; Markdown portability lost if you ever need to migrate.
  • •No obvious advantage over Hugo/Jekyll for GitHub Pages—setup is equally simple, but Hugo gains speed + ecosystem.
Target Audience

Static site builders, GitHub Pages users, documentation authors

Similar To

marked.js · markdown-it · Hugo

Post Description

lobster.js 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: ![alt](url =800x).

---

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/

Similar Projects