Skip to content

README.md

Latest commit

 

History

History
75 lines (55 loc) · 2.73 KB

README.md

File metadata and controls

75 lines (55 loc) · 2.73 KB

CodeShot

Beautiful code screenshots — right in your browser.

No installs. No accounts. Just paste, style, and export.

Try it live →  ·  Support the project ☕

Features

  • Syntax highlighting for 40+ languages via highlight.js — JavaScript, TypeScript, Python, Rust, Go, SQL, and more
  • Plain text align
  • 8 code themes — One Dark, Monokai, Dracula, Nord, Tokyo Night, GitHub Dark/Light, Solarized
  • 9 monospace fonts — JetBrains Mono, Fira Code, Source Code Pro, Space Mono, and more
  • Plain text mode with custom font and color picker
  • Backgrounds — solid color, animated gradient (10 presets + custom), or transparent PNG
  • Window chrome — macOS, Windows, GNOME, or none
  • Window title — set a custom title displayed in the window chrome
  • Window offset — adjust X/Y position of the window within the frame
  • 3D transform — rotate Z, depth X/Y perspective
  • Trapezoid distortion — warp the frame edges independently
  • Gradient blur — directional blur fade from any edge
  • Filters — B&W, Sepia, Cool, Warm, Faded, Vivid, Cinematic, Noir, Amber
  • Textures - Paper, Grain, Linen, Wood, Metal-Shiny, Metal-Brushed, Carbon, Scanlines, Glitter
  • Drop shadow with adjustable blur
  • Selection highlight with custom color and opacity
  • Line numbers toggle with configurable first line number and font color
  • Zoom from 50% to 300%
  • Window opacity
  • Copy to clipboard or Export to one of 5 formats
  • Settings auto-saved to localStorage — your config persists across sessions
  • Settings presets — save current settings under a name, load or delete saved presets
  • Light/dark UI toggle
  • Resizable editor/preview split pane
  • Zero dependencies, zero backend — runs entirely in the browser

Usage

  1. Paste or type your code (or plain text) in the left panel
  2. Pick a language for syntax highlighting
  3. Customize appearance using the settings panel — theme, font, background, effects
  4. Preview updates live in the right panel
  5. Export PNG or Copy PNG to clipboard

Tech Stack
Rendering HTML5 Canvas
Syntax highlighting highlight.js 11.9
Fonts Google Fonts
Storage Browser localStorage
Backend None

License

MIT

Development

This service is 99.9% vibecoded. My code is much more beautiful and readable.