codeframe

Create beautiful, shareable code screenshots with custom themes, backgrounds, and window frames.

Features

• Syntax highlighting — 10 languages via highlight.js (TypeScript, Python, Rust, Go, and more)
• 4 editor themes — One Dark, GitHub Dark, Nord, Dracula
• 6 gradient backgrounds — or set your own
• macOS-style window frame — with customizable title
• Line numbers — toggle on/off
• Adjustable padding — 16px to 64px
• Export to PNG — 2x resolution for crisp screenshots
• Copy to clipboard — paste directly into tweets, docs, or slides
• Fully client-side — no server, no tracking, your code stays on your machine

Getting Started

git clone https://github.com/CatherineALSKFF/codeframe.git
cd codeframe
npm install
npm run dev

Open http://localhost:3000 to start creating screenshots.

Tech Stack

• Next.js — React framework with static export
• TypeScript — strict mode
• Tailwind CSS — utility-first styling
• highlight.js — syntax highlighting
• html-to-image — DOM-to-PNG export

Project Structure

src/
├── app/
│   ├── layout.tsx       # Root layout with metadata
│   ├── page.tsx         # Main app — state management + composition
│   └── globals.css      # Tailwind + custom styles
├── components/
│   ├── preview-frame.tsx # Code display with window frame + syntax highlighting
│   ├── toolbar.tsx       # Controls for theme, language, background, padding
│   └── export-button.tsx # PNG export + clipboard copy
└── lib/
    ├── gradients.ts      # Theme + gradient definitions
    └── constants.ts      # Languages, defaults, types

Deploy

Codeframe exports as a static site. Deploy anywhere:

npm run build  # outputs to /out

Works with Vercel, Netlify, GitHub Pages, or any static host.

License

MIT