DEV Community

Cover image for Introducing CodeSnap: A Code-to-PNG Tool in Progress ✨
Abhinav
Abhinav

Posted on

Introducing CodeSnap: A Code-to-PNG Tool in Progress ✨

CodeSnap is a project aimed at transforming how developers share their code. Inspired by tools like Carbon.sh and Snapify, CodeSnap allows you to turn your code snippets into visually stunning PNG images. Although it’s still a work in progress, the vision is clear: to create a simple, fast, and customizable tool for developers. ⚡️

codeSnap

What’s CodeSnap About? 🔧

CodeSnap focuses on these key features:

  • Real-Time Preview: Edit and see how your styled code snippet looks instantly. 📈
  • Customizable Themes: Pick your favorite fonts, themes, and background colors. 🎨
  • Export as PNG: Download high-quality images of your code. 💾

The project uses modern web technologies like Vite, TypeScript, and Tailwind CSS to ensure a fast, smooth, and visually appealing experience. ⚙️

Known Bugs 🚫

As with any project under development, there are a few hiccups:

  1. Viewport Limitation: Currently, only the text visible in the viewport is exported. 🕵️

What’s Next? 🚀

Try CodeSnap live.
While there’s still a lot to refine, CodeSnap is shaping up to be a valuable tool for developers. If you’re excited about this idea or have feedback, I’d love to hear from you. Let’s build something amazing together! ✨

Stay tuned for updates, and happy coding! 💻

Top comments (1)

Collapse
 
abhivyaktii profile image
Abhinav

Hello Devs issue with the viewport is fixed.

  • the ui is breaking in phone view. Will fix and update