DEV Community

Antonio Mares
Antonio Mares

Posted on

How a frustrating school project led me to build my first CLI tool.

We’ve all been there. You have a project completely finished, beautifully structured into folders, and at the very last minute, the requirements say: "Please attach code screenshots to the final report." 🙄

I went online to find a tool, and every single option required the same tedious loop:

  1. Open a website.
  2. Copy the code from file #1.
  3. Paste it.
  4. Generate the image.
  5. Download it.
  6. Repeat for file #2, file #3, file #4...

Even the local tools I found simply spun up a local GUI to make you do the exact same manual copy-paste routine. It felt so incredibly inefficient that I decided to automate it.

That’s how SyntaxShot was born a CLI tool that generates beautiful, syntax-highlighted code screenshots straight from your terminal. With a single command, you can capture a single file, multiple specific files, or recursively scan entire folders while preserving your directory structure.

A quick note on honesty: Yes, I used AI to help build this, but I made sure to read, understand, and double-check every single line of code it generated. Ultimately, my goal isn't to get rich (in fact, the free tier is very generous and I don't expect anyone to pay) it’s about learning how to build, launch, and maintain a real-world service.

It's built using Vite, React, Shiki, and @napi-rs/canvas (which means absolutely zero painful native dependencies to compile!). Feel free to try it out. I'm completely open to all kinds of feedback—constructive criticism, brutal honesty, or technical pointers. It all helps me learn!

👉 https://syntaxshot.dev
📦 npm i syntaxshot-cli

Single file.
Full folder

Top comments (0)