Skip to content
alpaca.tools

JSON to PNG

Loading JSON to PNG...
5.01 rating50 uses
Your rating for JSON to PNGYour rating
JSON Tools

Popular JSON Tools

JSON FormatterFormat, validate, minify, sort, and safely inspect JSON in your browser.5.0100 usesOpen toolTXT to JSON ConverterConvert TXT files to JSON: lists, key: value lines, CSV/TSV tables, records, and JSON Lines, detected automatically.5.061 usesOpen tool

About JSON to PNG

Paste JSON or open a .json file and get an image of it as you type. Code view draws the pretty-printed JSON with syntax colors, line numbers and a window frame with the file name. Table view turns an array of objects into rows and columns. Pick a theme and a gradient, solid or transparent background, then download a PNG or JPG at 1x, 2x or 3x, or copy the image.

Convert JSON to an image

The code image shows your JSON pretty-printed with 2 or 4 spaces, with keys, strings, numbers, booleans and null in different colors. Line numbers and a window frame with three dots and a title are on by default and can be turned off. The title starts as the file name and is also used for the download, so users.json saves as users.png.

Numbers are drawn exactly as written: 1.50 stays 1.50 and a 20-digit ID is not rounded. Sort keys orders keys A to Z at every level. Lines longer than 80 characters wrap onto an indented continuation row, so a long string makes the image taller instead of very wide; the wrap width can be set to 60, 100 or 120.

JSON to PNG online: themes and backgrounds

Each theme colors the code view and the table view the same way, so a set of images made from different JSON files looks consistent.

  • Themes: GitHub Dark, GitHub Light, Night Owl, Dracula, Solarized Light and High Contrast.
  • Backgrounds: five gradients, any solid color, or transparent.
  • Padding from none to large, and font sizes from 12 to 18 px.
  • Export at 1x, 2x or 3x; the exact pixel size is shown next to the download button.

JSON array to table image

An array of objects, such as an API list response or a database export, can be drawn as a table instead of code. Columns come from every key in the order they first appear, with a # column for row numbers, alternating row shading and a header row. Values keep their type colors, so true, false, null and numbers stand out from text.

Long cell text is cut with an ellipsis at a fixed column width so one long description doesn't stretch the whole table. An object whose values are objects, like {"ada": {...}, "alan": {...}}, gets a key column with the property names.

JSON to JPG

Click JPG to save the same image as a .jpg file. JPG is smaller for large images with gradient backgrounds, and some upload forms only take JPG. Because JPG can't store transparency, a transparent background becomes white. For everything else PNG is the better format: text edges stay sharp and the file is lossless.

FAQ

Paste the JSON into the box or click Open file, choose Code or Table, pick a theme and background, then click Download PNG. The preview redraws as you type. The 2x scale is selected by default, so an image that is 420 px wide on screen is saved 840 px wide and stays sharp on high-density displays.

Yes. Click JPG next to Download PNG. JPG has no transparency, so a transparent background is filled with white, and the file is saved at 92% quality. PNG keeps the transparency and gives crisper text, so it is the better choice for docs, slides and README files.

Yes, when the JSON is an array of objects or an object whose values are all objects. The Table button then shows the row count. Every key becomes a column, a key missing from a row shows a dash, numeric columns are right-aligned, and nested objects and arrays are written as one-line JSON. Tables stop at 250 rows and 16 columns, and a footer row says how many were left out.

Files up to 5 MB can be opened. A code image stops at 500 lines (wrapped lines count), and its last line says where it stopped, for example "stops at line 500 of 2,002". Canvas images can't be larger than 16,384 px on a side, so when 2x or 3x would be too big the tool says so and suggests 1x, a smaller font or less data.

The JSON is checked strictly, the same way JSON.parse checks it. The first problem is shown with its line and column and the line is highlighted in red; Go to line moves the cursor there. Common causes are trailing commas, single quotes, unquoted keys and comments. The last valid image stays in the preview while you fix it.

Yes. Choose the checkered Transparent swatch under Background. The PNG keeps a soft shadow around the window so it sits well on any slide or page color. Set Padding to None to crop the image to the window itself.