{"slug": "fusuma-write-markdown-get-slides-pdfs-and-a-self-made-social-card", "title": "Fusuma: Write Markdown, Get Slides, PDFs, and a Self-Made Social Card", "summary": "Maneshwar, a developer building git-lrc, discovered that the Markdown-to-slides tool fusuma generates social preview cards by launching a headless Chrome via Puppeteer and taking a real screenshot of the first slide. The tool, created by hiroppy, allows users to write slides in plain Markdown with directives in HTML comments, and outputs static HTML, PDFs, or deploys to GitHub Pages. Maneshwar explored the source code after noticing the CLI mentioned generating og:images.", "body_md": "*Hello, I'm Maneshwar. I'm building git-lrc, a Micro AI code reviewer that runs on every commit. It is free and source-available on Github. Star git-lrc to help devs discover the project. Do give it a try and share your feedback.*\n\nA fusuma (襖), if you didn't grow up around one, is the sliding door in a traditional Japanese house.\n\nNo hinges, no swinging into someone's face, you just slide it and the room becomes a different room.\n\nSo when hiroppy named his Markdown-to-slides tool `fusuma`\n\n, the pun was already built into the product: you write one flat file, and sliding between sections turns it into a presentation.\n\nI see what you did there, and I respect it.\n\nI hadn't used fusuma before this week.\n\nI installed it, scaffolded a real project, wrote actual slides explaining fusuma using fusuma, ran the build pipeline, and then went spelunking through `node_modules`\n\nbecause the CLI output during `build`\n\nsaid something that made me stop and go \"wait, it's doing *what*.\"\n\nWe'll get to that. First, the basics.\n\nYou install it, run one command, and you have a deck:\n\n```\nnpm install fusuma -D\nnpx fusuma init\n```\n\nThat scaffolds a `slides/`\n\nfolder, a `style.css`\n\n, and a `.fusumarc.yml`\n\nconfig.\n\nYour actual content lives in plain Markdown, and every `---`\n\non its own line starts a new slide.\n\nThat's the entire authoring model.\n\nNo slide objects, no proprietary file format, no clicking \"insert text box\" forty times.\n\n``` php\n<!-- classes: title -->\n\n# Hello😃\n\n---\n\n<!-- section-title: Bye👋 -->\n\n## Bye👋\n```\n\nThat HTML-comment syntax above `# Hello😃`\n\nisn't decoration, it's a directive fusuma's parser reads to apply a `.title`\n\nCSS class to that slide, and `section-title`\n\nsets what shows up in the sidebar navigation.\n\nIt's a clever trick: keep the file valid, renderable Markdown for anyone viewing it on GitHub, while smuggling presentation metadata through comments a plain Markdown renderer just ignores.\n\nHere's that exact idea rendered for real, from a four-slide deck I built (using fusuma) to explain fusuma, running the `pop`\n\ntheme:\n\nOnce you're happy with the content, `npx fusuma start`\n\ngets you a dev server on `:8080`\n\nthat hot reloads on every save, no full page refresh, no build step in the way of your edit loop:\n\n``` bash\n$ npx fusuma start\n  fusuma  Compiled successfully\n  fusuma  Server running at http://localhost:8080/\n```\n\nThen, when you're actually done, the same file turns into whatever you need next:\n\n```\nnpx fusuma build   # optimized static HTML/JS bundle\nnpx fusuma pdf     # the deck as a single PDF\nnpx fusuma deploy  # pushes build/ straight to GitHub Pages\n```\n\nOne Markdown source, sliding into whichever output you need. There's the pun again. I promise I'll ease up.\n\nEvery screenshot above came out of that same real project, not a mockup: a four-slide deck (`slides/0-slide.md`\n\n) that explains fusuma using fusuma, with the built-in `pop`\n\ntheme enabled through one CSS import, `@import '@fusuma/client/assets/style/themes/pop.css';`\n\n.\n\nThat's the entire theming API.\n\nThe code blocks you see highlighted are running through Prism via `@fusuma/prism-loader`\n\n, and the whole thing is bundled with webpack 5 underneath.\n\nHere's what actually made me open the source. I ran `npx fusuma build`\n\nin a folder that had no git remote configured, and got this:\n\n```\n- Fetching the remote origin url...\n build  The remote origin url of this repo isn't found.\n build  If you want to generate og:image, please set fusumarc.meta.url\n```\n\nFine, minor warning, no big deal. But \"generate og:image\" made me curious about *how* it generates that image, because most tools either template it with a canvas library or just skip it.\n\nSo I went digging in `packages/fusuma/src/server/dynamicRenderingServer.js`\n\n, and it turns out fusuma doesn't template the social preview card.\n\nIt launches an actual headless Chrome via Puppeteer, points it at your freshly built deck on a throwaway local server, and takes a real screenshot of your real first slide to use as the `og:image`\n\n.\n\nThen, using that same open browser tab, it runs [pa11y](https://github.com/pa11y/pa11y) (not Lighthouse, despite what you'd guess) against the live page for an accessibility audit, filtering out a couple of known-noisy rules and anything inside a `<code>`\n\nblock.\n\nSo the \"build\" step isn't only a bundler running.\n\nIt's a bundler, and then a whole disposable browser opening your own presentation and taking its own picture before anyone else sees it.\n\nThat one got me.\n\nWhile I was in the `@fusuma/mdx-loader`\n\nsource, I found three directive-driven features that never came up in the docs I'd already read.\n\nFusuma parses your Markdown as MDX, which means fenced blocks and HTML comments can get swapped for actual JSX components at build time:\n\n`chart ` or ``\n\n`mermaid`\n\ngets swapped for a `<div class=\"mermaid\">`\n\nthat renders as a live Mermaid diagram in the deck itself.`<!-- executable-code -->`\n\ncomment and fusuma adds an \"execute\" button next to it that runs your snippet live, in the browser, in front of your audience. Actual runtime demos, no separate tab.`<!-- qr: https, some-url -->`\n\ndrops in an inline SVG QR code generated at build time, presumably so people can scan your slide instead of squinting at a URL.None of that is advertised anywhere near the top of the README.\n\nYou'd only find it by writing the comment syntax from memory of some other tool and hoping, or by reading `mdxPlugin.js`\n\nlike I did.\n\nFor a quick, versionable, git-diffable slide deck, yes, honestly.\n\nThe zero-config setup is real, the hot reload loop for `start`\n\nis fast, and the fact that your accessibility audit and your og:image both fall out of the same Puppeteer pass is a genuinely clever bit of engineering, not just marketing copy.\n\nI'd stop short of building a 200-slide conference keynote in it since there's no visual editor for anyone who isn't comfortable in Markdown, but for internal tech talks, this-is-how-our-service-works decks, or documenting a tool by making slides about the tool (see above), it's a solid, honest little door to slide open.\n\nIf you want to try it yourself, the source is at [hiroppy/fusuma](https://github.com/hiroppy/fusuma), and if you're curious about the self-screenshotting build step, the exact file is right here: [ dynamicRenderingServer.js](https://github.com/hiroppy/fusuma/blob/v2.8.4/packages/fusuma/src/server/dynamicRenderingServer.js). Slide responsibly.\n\nThanks to [about_hiroppy](https://x.com/about_hiroppy) for such a smooth software.\n\nAI agents write code fast. They also silently remove logic, change behavior, and introduce bugs — without telling you. You often find out in production.\n\ngit-lrc fixes this. It hooks into git commit and reviews every diff before it lands. 60-second setup. Completely free.\n\nAny feedback or contributors are welcome! It's online, source-available, and ready for anyone to use.\n\n⭐ Star it on GitHub:\n\n| [🇩🇰 Dansk](https://github.com/HexmosTech/git-lrc/readme/README.da.md) | [🇪🇸 Español](https://github.com/HexmosTech/git-lrc/readme/README.es.md) | [🇮🇷 Farsi](https://github.com/HexmosTech/git-lrc/readme/README.fa.md) | [🇫🇮 Suomi](https://github.com/HexmosTech/git-lrc/readme/README.fi.md) | [🇯🇵 日本語](https://github.com/HexmosTech/git-lrc/readme/README.ja.md) | [🇳🇴 Norsk](https://github.com/HexmosTech/git-lrc/readme/README.nn.md) | [🇵🇹 Português](https://github.com/HexmosTech/git-lrc/readme/README.pt.md) | [🇷🇺 Русский](https://github.com/HexmosTech/git-lrc/readme/README.ru.md) | [🇦🇱 Shqip](https://github.com/HexmosTech/git-lrc/readme/README.sq.md) | [🇨🇳 中文](https://github.com/HexmosTech/git-lrc/readme/README.zh.md) | [🇮🇳 हिन्दी](https://github.com/HexmosTech/git-lrc/readme/README.hi.md) |\n\nGenAI today is a **race car without brakes**. It accelerates fast -- you describe something, and large blocks of code appear instantly. But AI agents *silently break things*: they remove logic, relax constraints, introduce expensive cloud calls, leak credentials, and change behavior -- without telling you. You often find out in production.\n\n** git-lrc is your braking system.** It hooks into\n\n`git commit`\n\nand runs an AI review on every diff In short, git-lrc helps **Prevent Outages, Breaches, and Technical Debt Before They Happen**\n\n**At a glance:** [10 risk categories](https://github.com/HexmosTech/git-lrc#what-git-lrc-checks-for) · [100+ failure patterns tracked](https://github.com/HexmosTech/git-lrc#what-git-lrc-checks-for) · every commit…", "url": "https://wpnews.pro/news/fusuma-write-markdown-get-slides-pdfs-and-a-self-made-social-card", "canonical_source": "https://dev.to/lovestaco/fusuma-write-markdown-get-slides-pdfs-and-a-self-made-social-card-4b2k", "published_at": "2026-07-13 12:22:29+00:00", "updated_at": "2026-07-13 12:46:08.872616+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["Maneshwar", "hiroppy", "fusuma", "git-lrc", "Puppeteer", "GitHub"], "alternates": {"html": "https://wpnews.pro/news/fusuma-write-markdown-get-slides-pdfs-and-a-self-made-social-card", "markdown": "https://wpnews.pro/news/fusuma-write-markdown-get-slides-pdfs-and-a-self-made-social-card.md", "text": "https://wpnews.pro/news/fusuma-write-markdown-get-slides-pdfs-and-a-self-made-social-card.txt", "jsonld": "https://wpnews.pro/news/fusuma-write-markdown-get-slides-pdfs-and-a-self-made-social-card.jsonld"}}