Markdown-to-Slides Tool with a Clever Metadata Trick
--- separator acts as the trigger to switch slides. It’s a weirdly efficient way to handle presentations because you aren't fighting a GUI or dragging text boxes around like you're stuck in 2005.I decided to test the limits of this by actually scaffolding a real project. I wasn't just playing around; I wrote a full deck explaining the tool itself using the tool. The setup is straightforward enough:
npm install fusuma -D
npx fusuma initThis spits out a folder structure with a config file and a CSS file. The clever part—and I really appreciate this from a data structure perspective—is how it handles metadata. If you want to style a specific slide or set a sidebar title, you use HTML comments. This keeps the raw file valid Markdown so GitHub doesn't choke on it, but the parser reads those comments as directives.
# Hello😃
Bye👋
The dev loop is actually decent. Running npx fusuma start kicks up a local server on port 8080 with hot reloading. I was testing the pop theme to see if it looked like a cheap template or something substantial, and it actually holds up for a CLI-driven tool. The whole thing is bundled with webpack 5 and uses Prism for code highlighting, which is a lot more robust than I expected for a niche utility.
The real value is the output flexibility. Once you've finished your Markdown, you aren't stuck with just a web view. You can run:
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 PagesIt's basically one source of truth for a presentation, a PDF, and a hosted site. However, I hit a weird snag during my post-mortem of the build process. I was running a build in a directory that didn't have a git remote configured, and the CLI output threw me for a loop.
I ran npx fusuma build and got this:
- Fetching the remote origin url...
build The remote origin url of this repo isn't fIt felt like the build pipeline was trying to be a bit too smart by inspecting my git configuration before deciding how to handle the deployment phase. It's a bit of a "wait, why is it looking at my git remote just to build a static site?" moment, but it shows the tool is trying to automate the deployment workflow directly. For anyone looking to save time on slide deck formatting without losing the ability to version control their content, this is a solid, high-value approach.