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.
A fusuma (襖), if you didn't grow up around one, is the sliding door in a traditional Japanese house.
No hinges, no swinging into someone's face, you just slide it and the room becomes a different room.
So when hiroppy named his Markdown-to-slides tool fusuma
, the pun was already built into the product: you write one flat file, and sliding between sections turns it into a presentation.
I see what you did there, and I respect it.
I hadn't used fusuma before this week.
I installed it, scaffolded a real project, wrote actual slides explaining fusuma using fusuma, ran the build pipeline, and then went spelunking through node_modules
because the CLI output during build
said something that made me stop and go "wait, it's doing what."
We'll get to that. First, the basics.
You install it, run one command, and you have a deck:
npm install fusuma -D
npx fusuma init
That scaffolds a slides/
folder, a style.css
, and a .fusumarc.yml
config.
Your actual content lives in plain Markdown, and every ---
on its own line starts a new slide.
That's the entire authoring model.
No slide objects, no proprietary file format, no clicking "insert text box" forty times.
<!-- classes: title -->
---
<!-- section-title: Bye👋 -->
## Bye👋
That HTML-comment syntax above # Hello😃
isn't decoration, it's a directive fusuma's parser reads to apply a .title
CSS class to that slide, and section-title
sets what shows up in the sidebar navigation.
It'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.
Here's that exact idea rendered for real, from a four-slide deck I built (using fusuma) to explain fusuma, running the pop
theme:
Once you're happy with the content, npx fusuma start
gets you a dev server on :8080
that hot reloads on every save, no full page refresh, no build step in the way of your edit loop:
$ npx fusuma start
fusuma Compiled successfully
fusuma Server running at http://localhost:8080/
Then, when you're actually done, the same file turns into whatever you need next:
npx fusuma build # optimized static HTML/JS bundle
npx fusuma pdf # the deck as a single PDF
npx fusuma deploy # pushes build/ straight to GitHub Pages
One Markdown source, sliding into whichever output you need. There's the pun again. I promise I'll ease up.
Every screenshot above came out of that same real project, not a mockup: a four-slide deck (slides/0-slide.md
) that explains fusuma using fusuma, with the built-in pop
theme enabled through one CSS import, @import '@fusuma/client/assets/style/themes/pop.css';
.
That's the entire theming API.
The code blocks you see highlighted are running through Prism via @fusuma/prism-
, and the whole thing is bundled with webpack 5 underneath.
Here's what actually made me open the source. I ran npx fusuma build
in a folder that had no git remote configured, and got this:
- Fetching the remote origin url...
build The remote origin url of this repo isn't found.
build If you want to generate og:image, please set fusumarc.meta.url
Fine, 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.
So I went digging in packages/fusuma/src/server/dynamicRenderingServer.js
, and it turns out fusuma doesn't template the social preview card.
It 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
.
Then, using that same open browser tab, it runs 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>
block.
So the "build" step isn't only a bundler running.
It's a bundler, and then a whole disposable browser opening your own presentation and taking its own picture before anyone else sees it.
That one got me.
While I was in the @fusuma/mdx-
source, I found three directive-driven features that never came up in the docs I'd already read.
Fusuma parses your Markdown as MDX, which means fenced blocks and HTML comments can get swapped for actual JSX components at build time:
chart or ``
mermaid
gets swapped for a <div class="mermaid">
that renders as a live Mermaid diagram in the deck itself.<!-- executable-code -->
comment 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 -->
drops 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.
You'd only find it by writing the comment syntax from memory of some other tool and hoping, or by reading mdxPlugin.js
like I did.
For a quick, versionable, git-diffable slide deck, yes, honestly.
The zero-config setup is real, the hot reload loop for start
is 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.
I'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.
If you want to try it yourself, the source is at hiroppy/fusuma, and if you're curious about the self-screenshotting build step, the exact file is right here: dynamicRenderingServer.js. Slide responsibly.
Thanks to about_hiroppy for such a smooth software.
AI agents write code fast. They also silently remove logic, change behavior, and introduce bugs — without telling you. You often find out in production.
git-lrc fixes this. It hooks into git commit and reviews every diff before it lands. 60-second setup. Completely free.
Any feedback or contributors are welcome! It's online, source-available, and ready for anyone to use.
⭐ Star it on GitHub:
| 🇩🇰 Dansk | 🇪🇸 Español | 🇮🇷 Farsi | 🇫🇮 Suomi | 🇯🇵 日本語 | 🇳🇴 Norsk | 🇵🇹 Português | 🇷🇺 Русский | 🇦🇱 Shqip | 🇨🇳 中文 | 🇮🇳 हिन्दी |
GenAI 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.
** git-lrc is your braking system.** It hooks into
git commit
and runs an AI review on every diff In short, git-lrc helps Prevent Outages, Breaches, and Technical Debt Before They Happen
At a glance: 10 risk categories · 100+ failure patterns tracked · every commit…