Convert JSON to Image
Render JSON as a syntax-highlighted PNG/JPEG with 6 themes, custom fonts, line numbers. Free, offline, client-side.
Render JSON as a syntax-highlighted PNG or JPEG image. Real tokenizer - keys, strings, numbers, booleans, null, and punctuation each get their own color. Six themes (Light, Dark, Solarized, Monokai, GitHub Dark). Auto-sized canvas, DPR-scaled for Retina, no truncation.
How to Use Convert JSON to Image
- Paste your JSON - any valid JSON value works: object, array, primitive. Invalid JSON shows the
JSON.parseerror position so you can find issues quickly. - Pick a theme - Light is the default. Dark and GitHub Dark are great for technical documentation embeds. Solarized variants are gentle on the eyes. Monokai is the classic syntax-highlighting theme.
- Adjust font size and indent - 14 px is the default. Bump to 18-24 for slide decks. Indent picks how nested structures are formatted (2 / 4 spaces or tab).
- Toggle line numbers - useful when sharing snippets in code reviews where you need to reference specific lines. A subtle gutter is added on the left.
- Choose PNG or JPEG - PNG is lossless and preserves crisp text (recommended for documentation). JPEG is smaller but adds compression artifacts to text; use only when file size matters more than clarity.
- Read the stats line - line count, longest line in chars, output dimensions in pixels (auto-sized to fit, never truncated), and final file size.
- Copy or download - Copy uses the ClipboardItem API to paste the image directly into Slack, Discord, or image-aware editors. Download saves the file with theme + extension in the name (
json-monokai.png).
Frequently Asked Questions
What’s the syntax highlighting actually doing?
A regex-based tokenizer walks the pretty-printed JSON output and classifies each token as key (string before a colon), string (any other string), number, boolean (true/false), null, or punctuation ({}[],:). Each class gets its own color per the active theme.
Why is the image auto-sized instead of fixed-dimension?
To prevent silent truncation. Many JSON-to-image tools clip content that doesn’t fit a preset canvas, which is the worst kind of error (no message, but the image lies). We measure the widest line and tallest column count, then build a canvas to fit. Big JSON produces a big image – easy to scale down for display, impossible to fix if it was clipped.
What’s DPR scaling for?
Device Pixel Ratio. Retina displays have 2× the physical pixels of CSS pixels. We render the canvas at dpr × CSS dimensions so text stays crisp when zoomed or displayed on a high-DPI screen. The result: a 14-px JSON line renders at ~28 actual pixels on a Retina laptop.
What’s the difference between the themes?
Light: GitHub-flavored bright background, typical for docs. Dark: a neutral dark theme. Solarized Light/Dark: Ethan Schoonover’s well-known pair – eye-friendly with carefully balanced contrast. Monokai: the iconic warm-dark Sublime/TextMate theme. GitHub Dark: matches GitHub’s dark mode for cohesive embeds.
Why include line numbers?
For code-review screenshots and tutorials where you need to reference “line 17 – that key is misspelled.” The gutter is rendered in the theme’s lineNum color (a muted variant of the text color) and sized to fit the widest line number.
PNG vs JPEG for JSON images – which should I pick?
Almost always PNG. JSON is text, and JPEG’s lossy compression creates visible ringing around the strokes of small letters. Use JPEG only when uploading to a platform with strict file-size limits. PNG of a 50-line JSON is usually under 30 KB.
Why does my JSON look truncated in the preview?
It’s not – the preview img is CSS-scaled to fit the container. The actual canvas is full-size. Right-click → “Save image as” or click Download to get the full-resolution file. Stats line shows the true dimensions.
Can I render non-object JSON like a single number?
Yes. A JSON value can be a number, string, boolean, null, object, or array per the spec. We render whatever you paste as long as it parses. 42 renders as a single line; "hello" renders as the quoted string with the string color.
Is my JSON uploaded anywhere?
No. Tokenizing, layout, Canvas 2D drawing, and toDataURL/toBlob all run locally in your browser. Open DevTools → Network and watch zero requests fire after the page loads. Safe for proprietary data, API payloads, or anything sensitive.
Does it work offline?
Yes. Total bundle is under 20 KB (HTML + CSS + JS, no libraries). Once loaded, disconnect and keep rendering – useful for documentation work without internet.