ToolsForcebeta

$ run --tool

Code Screenshot Beautifier

Turn any code snippet into a beautiful, shareable screenshot — pick a theme, background and font size, then export as PNG.

Language
Theme
Background
Font size
Padding
Radius
Export @
Options
Window title

Preview

index.js
1import { useState, useEffect } from 'react';
2 
3export function useFetch(url) {
4 const [data, setData] = useState(null);
5 const [loading, setLoading] = useState(true);
6 const [error, setError] = useState(null);
7 
8 useEffect(() => {
9 let cancelled = false;
10 setLoading(true);
11 
12 fetch(url)
13 .then(res => {
14 if (!res.ok) throw new Error(res.statusText);
15 return res.json();
16 })
17 .then(json => {
18 if (!cancelled) {
19 setData(json);
20 setLoading(false);
21 }
22 })
23 .catch(err => {
24 if (!cancelled) {
25 setError(err.message);
26 setLoading(false);
27 }
28 });
29 
30 return () => { cancelled = true; };
31 }, [url]);
32 
33 return { data, loading, error };
34}

Features

  • ✓8 professional themes — One Dark, Dracula, GitHub Light, Monokai, Night Owl, Nord, Solarized, Catppuccin
  • ✓Syntax highlighting for 14+ languages
  • ✓Auto-formatter for JSON, SQL, JavaScript and TypeScript
  • ✓Customisable background, padding, font size and corner radius
  • ✓Export at 1×, 2× or 3× resolution — full code, nothing cropped
  • ✓Line numbers and macOS window dots toggle
  • ✓Runs entirely in your browser — nothing is uploaded

How to use

  1. 1Paste your code into the editor
  2. 2Pick a language, theme and background
  3. 3Optionally click Auto Format to beautify the code first
  4. 4Click Download PNG to save the screenshot

Frequently asked questions

Is any code sent to a server?+

No — highlighting, formatting and image export all happen in your browser using client-side libraries.

Why does Auto Format only work for some languages?+

JSON uses the built-in JSON.parse, SQL uses sql-formatter, and JS/TS uses a lightweight auto-indent. Full Prettier support would require a server round-trip.

The export cuts off my code — what do I do?+

The exporter captures the full scroll height of the preview, so the entire code block is always included. Try exporting at 2× for sharper images.

Related tools

code

JSON Formatter

Format, validate and minify JSON instantly, with clear error messages.

code

Console Color Code Generator

Pick colors and styles per line and get ready-to-paste console.log statements with ANSI escape codes.

code

SQL Visualizer

Paste any SQL query, get it formatted, highlighted, and broken down into its logical clauses.

Need a tool that isn't here yet?

ToolsForce is growing every week. Tell us what to build next.

Request a tool