Beautiful code screenshots — right in your browser.
No installs. No accounts. Just paste, style, and export.
Try it live · Node.js API · Support the project ☕
Alternative host and Node.js API: https://codeshot-u1ol.onrender.com
- Syntax highlighting for 40+ languages via highlight.js — JavaScript, TypeScript, Python, Rust, Go, SQL, and more
- Plain text align
- Markdown mode
- 21 code themes — 7 light (GitHub Light, One Light, Solarized Light, VS Code Light, Gruvbox Light, Rosé Pine Dawn, Quiet Light), 13 dark (One Dark, Monokai, Dracula, Nord, Tokyo Night, GitHub Dark, Solarized Dark, Material, Synthwave, Night Owl, Catppuccin, Ayu Dark, Gruvbox Dark), and 1 custom
- Custom theme editor — edit any theme's colors directly in the UI; save per-theme color overrides (persisted in
localStorage); reset any theme back to its defaults - 15 monospace fonts — JetBrains Mono, Fira Code, Source Code Pro, Space Mono, and more
- Ligatures toggle — enable or disable font ligatures for code fonts (JetBrains Mono, Fira Code, etc.)
- Letter spacing — adjustable letter spacing from −2px to 10px
- Tab size — configurable tab width from 1 to 10 spaces
- 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
- Lens effect — convex (+) barrel or concave (−) pincushion distortion that physically curves the window shape
- 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
- Screen glare — simulated light source with configurable X/Y position (can exceed canvas bounds by 50%), distance from screen (controls spread), horizontal/vertical angle (physically-based ellipse elongation — 0°/0° = circle, angled = elongated in the direction of incidence), blur, intensity, and color
- 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%
- Export scale — 1×, 2×, 3×, 4× output multiplier for high-DPI images
- Aspect ratio — lock the output canvas to 16:9, 4:3, 1:1, 9:16, and more; background is padded to fit
- Window opacity
- Copy to clipboard or Export to one of 6 formats (PNG, JPG, WebP, GIF, TIFF, Base64) — JPG export prompts a quality slider (1–100 %, default 92 %)
- Settings auto-saved to
localStorage— your config persists across sessions - Settings presets — save current settings under a name, load or delete saved presets
- Randomize parameters — generate a random combination of all visual settings with one click
- Light/dark UI toggle
- Resizable editor/preview split pane
- Zero backend — runs entirely in the browser
- Paste or type your code, text, or Markdown in the left panel
- Pick a mode — Code (with syntax highlighting), Plain Text, or Markdown
- Customize appearance using the settings panel — theme, font, background, effects
- Preview updates live in the right panel
- Export PNG or Copy PNG to clipboard
| Rendering | HTML5 Canvas |
| Syntax highlighting | highlight.js 11.9 |
| Fonts | Google Fonts |
| Storage | Browser localStorage |
| Backend | None |
This service is 99.9% vibecoded. My code is much more beautiful and readable.