{"id":104201,"date":"2026-07-14T19:20:21","date_gmt":"2026-07-14T19:20:21","guid":{"rendered":"https:\/\/youzum.net\/meet-blume-an-open-source-zero-config-documentation-framework-that-ships-ai-ready-docs-from-a-markdown-folder\/"},"modified":"2026-07-14T19:20:21","modified_gmt":"2026-07-14T19:20:21","slug":"meet-blume-an-open-source-zero-config-documentation-framework-that-ships-ai-ready-docs-from-a-markdown-folder","status":"publish","type":"post","link":"https:\/\/youzum.net\/fr\/meet-blume-an-open-source-zero-config-documentation-framework-that-ships-ai-ready-docs-from-a-markdown-folder\/","title":{"rendered":"Meet Blume: An Open-Source, Zero-Config Documentation Framework That Ships AI-Ready Docs From a Markdown Folder"},"content":{"rendered":"

Hayden Bleasel<\/a>, an expert developer from OpenAI, released Blume<\/a><\/strong>, an open-source documentation framework. Blume shipped to npm as version 1.0.3 the same day. It is as simple as Drop Markdown into a folder and ship a docs site. No app boilerplate is written or maintained afterward. The project is MIT-licensed and open sourced. <\/p>\n

What is Blume?<\/strong><\/h2>\n

Blume<\/a><\/strong> is a command-line tool paired with a component library for docs. It reads a folder of Markdown or MDX files. From that folder, it produces a production-grade documentation site. That output ships navigation, search, theming, and Open Graph images. Configuration stays optional and is added one file at a time. The code is a TypeScript monorepo; the published package sits at packages\/blume<\/code>. Blume\u2019s own documentation, under apps\/docs<\/code>, is built with Blume itself. It requires Node.js 22.12 or newer. It runs with Bun, pnpm, npm, or yarn.<\/p>\n

How Blume Works<\/strong>?<\/h2>\n

Under the surface, Blume generates and drives a hidden Astro project. First, the CLI loads blume.config.ts<\/code> and scans your content into a graph. Next, it writes an Astro project into a .blume\/<\/code> directory. Astro then renders every page through a single catch-all route. That route imports Blume\u2019s shipped components, the generated data, and your overrides. On each run, .blume\/<\/code> regenerates, and only changed files are rewritten. As a result, hot reload stays fast during editing. The core theme ships no client framework JavaScript. Consequently, pages score well on Core Web Vitals by default. When you need full control, blume eject<\/code> promotes the runtime into a standalone Astro app. That ejected project still depends on the blume<\/code> package. <\/p>\n


\n Run blume dev<\/button>
\n <button id=”prevBtn” disabled>\u2039 Prev<\/button>
\n <button id=”nextBtn”>Next \u203a<\/button>
\n <button id=”resetBtn”>\u21ba Reset<\/button>
\n <div class="”spacer”"><\/div>
\n <label class="”toggle" on” id="”aiToggle”"><span class="”dot”"><\/span> Show AI outputs<\/label>
\n <\/div><\/p>\n

<div class="”foot”">
\n <span>Blume v1.0.3 · MIT · Node.js 22.12+ · Astro + Vite<\/span>
\n <span>Interactive explainer by <a class="”mtp”" href="\/fr\/”https:\/\/www.marktechpost.com”\/" target="”_blank”" rel="”noopener”">Marktechpost<\/a><\/span>
\n <\/div>
\n<\/div><\/p>\n

<script>
\n(function () {
\n var root = document.getElementById(“blume-explainer”);
\n var token = root.querySelector(“#token”);
\n var nodes = root.querySelectorAll(“.node[data-stage]”);
\n var aiNodes = root.querySelectorAll(“.ai-node”);
\n var aiBranches = root.querySelectorAll(“.ai-branch”);
\n var stepLabel = root.querySelector(“#stepLabel”);
\n var stepTitle = root.querySelector(“#stepTitle”);
\n var stepText = root.querySelector(“#stepText”);
\n var termText = root.querySelector(“#termText”);
\n var runBtn = root.querySelector(“#runBtn”);
\n var prevBtn = root.querySelector(“#prevBtn”);
\n var nextBtn = root.querySelector(“#nextBtn”);
\n var resetBtn = root.querySelector(“#resetBtn”);
\n var aiToggle = root.querySelector(“#aiToggle”);<\/p>\n

\/\/ token positions per stage (cx, cy)
\n var pos = [
\n [85, 90], [250, 90], [470, 90], [700, 70], [700, 163], [842, 90]
\n ];<\/p>\n

var steps = [
\n { label: “Stage 1 \/ 6”, title: “A folder of Markdown”, term: “docs\/ index.mdx guide.mdx api.mdx”,
\n text: “You start with .md or .mdx files in a folder. There is no starter to clone and no app boilerplate to maintain.” },
\n { label: “Stage 2 \/ 6”, title: “The CLI loads your config”, term: “blume dev \u2713 loaded blume.config.ts”,
\n text: “blume dev loads blume.config.ts. It reads your content sources, theme tokens, and options, all type-checked by a schema.” },
\n { label: “Stage 3 \/ 6”, title: “Content is scanned into a graph”, term: “scanning content \u2026 \u2713 3 pages, nav inferred”,
\n text: “Blume scans every page into a content graph. Navigation is inferred from your files, so you rarely hand-write it.” },
\n { label: “Stage 4 \/ 6”, title: “A hidden Astro project is generated”, term: “writing .blume\/ \u2713 only changed files”,
\n text: “Blume writes a hidden Astro project into .blume\/. It regenerates each run, rewriting only changed files, so hot reload stays fast.” },
\n { label: “Stage 5 \/ 6”, title: “Astro + Vite render the pages”, term: “rendering via catch-all route \u2713”,
\n text: “Astro renders every page through one catch-all route. It imports Blume’s components, the generated data, and any overrides you add.” },
\n { label: “Stage 6 \/ 6”, title: “Static HTML ships to dist\/”, term: “blume build \u2713 dist\/ + search index”,
\n text: “The build outputs static HTML and a local search index into dist\/. The core theme ships no client framework JS, helping Core Web Vitals.” }
\n ];<\/p>\n

var current = -1;
\n var playing = false;
\n var playTimer = null;<\/p>\n

function paintNodes(active) {
\n nodes.forEach(function (n) {
\n var s = parseInt(n.getAttribute(“data-stage”), 10);
\n var rect = n.querySelector(“rect”);
\n if (s === active) {
\n rect.setAttribute(“stroke”, “#ff7000”);
\n rect.setAttribute(“stroke-width”, “2.5”);
\n rect.setAttribute(“fill”, “#241108”);
\n } else if (s < active) {
\n rect.setAttribute(“stroke”, “#7a4a1e”);
\n rect.setAttribute(“stroke-width”, “1.5”);
\n rect.setAttribute(“fill”, “#1a120b”);
\n } else {
\n rect.setAttribute(“stroke”, “#33281f”);
\n rect.setAttribute(“stroke-width”, “1.5”);
\n rect.setAttribute(“fill”, “#17120e”);
\n }
\n });
\n }<\/p>\n

function moveToken(i) {
\n if (i < 0) { token.style.opacity = 0; return; }
\n token.style.opacity = 1;
\n token.style.transition = “cx .55s cubic-bezier(.4,0,.2,1), cy .55s cubic-bezier(.4,0,.2,1)”;
\n token.setAttribute(“cx”, pos[i][0]);
\n token.setAttribute(“cy”, pos[i][1]);
\n }<\/p>\n

function render(i) {
\n current = i;
\n if (i < 0) {
\n stepLabel.textContent = “Ready”;
\n stepTitle.textContent = “Press Run to watch the build”;
\n stepText.textContent = “Blume needs only a folder of Markdown. Everything below is generated for you and thrown away on each run, unless you eject.”;
\n termText.textContent = “npx blume init”;
\n paintNodes(-1); moveToken(-1);
\n } else {
\n var s = steps[i];
\n stepLabel.textContent = s.label;
\n stepTitle.textContent = s.title;
\n stepText.textContent = s.text;
\n termText.textContent = s.term;
\n paintNodes(i); moveToken(i);
\n }
\n prevBtn.disabled = (i <= 0);
\n nextBtn.disabled = (i >= steps.length – 1);
\n reportHeight();
\n }<\/p>\n

function next() { if (current < steps.length – 1) render(current + 1); }
\n function prev() { if (current > 0) render(current – 1); }<\/p>\n

function play() {
\n playing = true;
\n runBtn.textContent = “\"\u23f8\" Pause”;
\n if (current >= steps.length – 1) render(0); else next();
\n playTimer = setInterval(function () {
\n if (current >= steps.length – 1) { stop(); return; }
\n next();
\n }, 1700);
\n }
\n function stop() {
\n playing = false;
\n runBtn.textContent = current >= steps.length – 1 ? “\u21ba Replay” : “\"\u25b6\" Run blume dev”;
\n if (playTimer) { clearInterval(playTimer); playTimer = null; }
\n }<\/p>\n

runBtn.addEventListener(“click”, function () {
\n if (playing) { stop(); }
\n else { if (current >= steps.length – 1) render(-1); play(); }
\n });
\n nextBtn.addEventListener(“click”, function () { stop(); next(); });
\n prevBtn.addEventListener(“click”, function () { stop(); prev(); });
\n resetBtn.addEventListener(“click”, function () { stop(); render(-1); });<\/p>\n

aiToggle.addEventListener(“click”, function () {
\n var on = aiToggle.classList.toggle(“on”);
\n aiNodes.forEach(function (n) {
\n n.style.opacity = on ? 1 : 0.18;
\n var r = n.querySelector(“rect”);
\n r.setAttribute(“stroke”, on ? “#7a4a1e” : “#33281f”);
\n });
\n aiBranches.forEach(function (b) {
\n b.style.opacity = on ? 1 : 0.15;
\n b.setAttribute(“stroke”, on ? “#7a4a1e” : “#33281f”);
\n });
\n reportHeight();
\n });<\/p>\n

\/\/ auto-resize for WordPress embed (component offsetHeight + buffer)
\n function reportHeight() {
\n try {
\n var h = root.offsetHeight + 40;
\n if (window.parent) {
\n window.parent.postMessage({ type: “blume-explainer-height”, height: h }, “*”);
\n }
\n } catch (e) {}
\n }
\n window.addEventListener(“load”, reportHeight);
\n window.addEventListener(“resize”, reportHeight);<\/p>\n

render(-1);
\n})();
\n<\/script>
\n<\/body>
\n<\/html>
\n“><\/p>\n

\n

Getting Started<\/strong><\/h2>\n<\/p>

Setup takes a single command, so onboarding is short.<\/p>\n

\n
\n
\n
\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n
Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div>\n<\/div>\n
npx blume init<\/code><\/pre>\n<\/div>\n<\/div>\n
Afterward, blume dev<\/code> starts a hot-reloading server. Meanwhile, blume build<\/code> writes static HTML and a local search index into dist\/<\/code>. The config file is real TypeScript, validated by a schema.<\/p>\n
\n
\n
\n
\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n
Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div>\n<\/div>\n
\/\/ blume.config.ts\nimport { defineConfig } from \"blume\";\n\nexport default defineConfig({\n  content: {\n    sources: [\n      { type: \"filesystem\", root: \"docs\" },\n      { type: \"notion\", database: process.env.NOTION_DB },\n    ],\n  },\n});<\/code><\/pre>\n<\/div>\n<\/div>\n
Because the config is typed, editors catch mistakes before a build runs. The CLI covers the full lifecycle beyond those basics:<\/p>\n
\n\n\n\n\n\n\n\n\n\n\n\n\n
Command<\/th>\nPurpose<\/th>\n<\/tr>\n<\/thead>\n
blume init<\/code><\/td>\nScaffold a project, interactive by default<\/td>\n<\/tr>\n
blume dev<\/code><\/td>\nStart the dev server with hot reload<\/td>\n<\/tr>\n
blume build<\/code><\/td>\nBuild the static or server site<\/td>\n<\/tr>\n
blume add<\/code><\/td>\nInstall a source component from the registry<\/td>\n<\/tr>\n
blume sync<\/code><\/td>\nRe-fetch remote content sources<\/td>\n<\/tr>\n
blume eject<\/code><\/td>\nPromote the runtime into a standalone Astro app<\/td>\n<\/tr>\n
blume validate<\/code><\/td>\nCheck internal, anchor, asset, and external links<\/td>\n<\/tr>\n
blume doctor<\/code><\/td>\nDiagnose config and content problems<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
AI-Ready by Design<\/strong><\/h2>\n
Beyond human readers, Blume targets agents too. Every page returns raw Markdown when you append .md<\/code> to its URL. A single flag emits llms.txt<\/code> and llms-full.txt<\/code> for agents. Each page can be copied as Markdown or opened in ChatGPT, Claude, or v0. An optional in-page Ask AI assistant answers reader questions directly. It runs on the AI SDK through the Vercel AI Gateway, OpenRouter, Inkeep, or any OpenAI-compatible endpoint. Blume can also host a Model Context Protocol (MCP) server. Through it, Claude Code, Cursor, and VS Code read docs directly.<\/p>\n
\n
\n
\n
\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n
Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div>\n<\/div>\n
claude mcp add --transport http your-docs https:\/\/docs.example.com\/mcp<\/code><\/pre>\n<\/div>\n<\/div>\n
That server exposes four read-only tools: search_docs<\/code>, get_page<\/code>, list_pages<\/code>, and get_navigation<\/code>.<\/p>\n
Use Cases With Examples<\/strong><\/h2>\n
Those capabilities map to concrete jobs. For an API product, drop in an OpenAPI or AsyncAPI spec. Blume then renders an interactive reference with schemas, auth, and a request playground via Scalar. For a library, point Blume at your GitHub Releases. Each release rolls up into a generated changelog timeline with an RSS feed. For a global audience, add translated files per locale. Blume supports 36 locales, locale-aware routing, and right-to-left layouts. For mixed content, combine local files with remote MDX, Notion, or Sanity. All sources render through the same components. <\/p>\n
\n
\n
\n
\n
Introducing Blume \"\ud83e\udeb7\"<\/p>\n
A world-class docs framework for everything you ship. Drop Markdown into a folder and ship a full docs site with no app boilerplate.<\/p>\n
\u2192 zero-config setup
\u2192 automatic SEO and AEO
\u2192 30+ components
\u2192 powered by astro + vite
\u2192 open source, free forever pic.twitter.com\/fQSwLd9BM9<\/a><\/p>\n
\u2014 Hayden Bleasel (@haydenbleasel) July 13, 2026<\/a><\/p><\/blockquote>\n<\/div>\n<\/div>\n<\/figure>\n
How Blume Compares<\/strong><\/h2>\n
For context, here is Blume against three common documentation approaches. Features change quickly, so verify current details before you adopt.<\/p>\n
\n\n\n\n\n\n\n\n\n\n\n\n\n
Dimension<\/th>\nBlume<\/th>\nMintlify<\/th>\nDocusaurus<\/th>\nAstro Starlight<\/th>\n<\/tr>\n<\/thead>\n
Type<\/td>\nOpen-source CLI + framework<\/td>\nHosted commercial platform<\/td>\nOpen-source SSG<\/td>\nOpen-source Astro theme<\/td>\n<\/tr>\n
License<\/td>\nMIT, free<\/td>\nProprietary; paid Pro tier<\/td>\nMIT, free<\/td>\nMIT, free<\/td>\n<\/tr>\n
Setup<\/td>\nZero-config Markdown folder<\/td>\nConfig-driven, managed<\/td>\nScaffold + React config<\/td>\nAstro project + theme<\/td>\n<\/tr>\n
Engine<\/td>\nHidden Astro + Vite<\/td>\nProprietary hosted<\/td>\nReact<\/td>\nAstro<\/td>\n<\/tr>\n
Core-theme client JS<\/td>\nNone (static HTML)<\/td>\n\u2014<\/td>\nReact runtime<\/td>\nMinimal (islands)<\/td>\n<\/tr>\n
llms.txt<\/code> \/ llms-full.txt<\/code><\/td>\nBuilt-in flag<\/td>\nAuto-generated<\/td>\nCommunity plugin<\/td>\nCommunity plugin<\/td>\n<\/tr>\n
Built-in MCP server<\/td>\nYes (four read-only tools)<\/td>\nYes (auto-hosted)<\/td>\nNot built-in<\/td>\nNot built-in<\/td>\n<\/tr>\n
Eject path<\/td>\nStandalone Astro app<\/td>\nNot applicable (hosted)<\/td>\n\u2014<\/td>\nAlready Astro<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
Strengths and Weaknesses<\/strong><\/h2>\n
Strengths<\/strong><\/h4>\n