Project

CodeSnap

AI-powered code screenshot tool

CodeSnap project preview

Overview

CodeSnap was born from observing developers struggling to present code professionally. Whether for social media, blog posts, or presentations, developers needed a fast way to generate clean, highlighted code images without manual formatting.

The Problem

Developers spend hours manually formatting code for social media posts, presentations, and blog articles — needing syntax highlighting, clean layouts, and export options.

The Solution

Live code editor with CodeMirror, highlight.js syntax highlighting, one-click PNG export at 2x resolution, and AI explain feature using GPT-4o-mini for instant code understanding.

Results

Four themes (Dark, Light, Nord, Monokai) cover major presentation styles developers actually use. AI explain feature helps developers quickly understand or present someone else's code in seconds.

Tech Stack

Next.jsTypeScriptCodeMirrorAIhtml-to-image

Metrics

Syntax Highlighting
4 Themes
AI Explain