Skip to content

Mansiper/CodeShot

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

Take a screenshot of your code. Like no other

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors