Our Network


Coming Soon


Coming Later

JSON Screenshot Maker

World's Simplest JSON Tool

Free online JSON screenshot maker. Just load your JSON in the input field and it will automatically get converted to a screenshot. In the tool options, you can customize the appearance of your JSON code by enabling or disabling visualization of tabs and new lines, adding line numbering, and highlighting paired brackets and the current line. Additionally, you can adjust the text size, select the screenshot's color theme, and choose the download format. Created for developers by developers from team Browserling.

᠎᠎᠎          Tool Options

JSON Code View

Make tabs and newlines visible.
Add line numbers to each line.
Visually match opening and
closing parentheses.
Highlight the line being viewed.

Font and Theme

Adjust the size of the JSON text.
Select a color theme for
the JSON screenshot.

Screenshot Format

Choose the format for the
saved JSON screenshot.

What Is a JSON Screenshot Maker?

This tool allows you to quickly create syntax-highlighted screenshots of JSON data and JavaScript code. The tool captures a screenshot of the JSON data and code that you enter in the input editor and applies a color scheme to it. In the options, you can select one of the color schemes: Bespin, Blackboard, Cobalt, Duotone Light, Eclipse, Liquibyte, MDN, Sublime Monokai, Plain, or Zenburn. Each color scheme has a unique color palette, which highlights different syntactic elements of JSON and JavaScript in various shades. You can also customize the style of the JSON code and editor. In the tool options, you can make tabs and line breaks visible via the symbols "⇥" and "↵". Then, you can add line numbers for easier code navigation and referencing code fragments. Then, you can visually match the corresponding opening and closing brackets when the cursor is placed near one of the brackets. And finally, you can highlight the current code line, which the cursor is on. Additionally, you can specify the font size of the code in the option field using CSS units (for example, "13px"). If you have a minified JSON, you can add an indentation structure to it via our Prettify JSON tool. This tool will make the code much easier to read and the screenshot will look nicer. The resulting screenshot can be saved in various image formats such as PNG, JPEG, GIF, and BMP. Json-abulous!


JSON Screenshot Maker Examples

Click to try!

Create a Screenshot of a JSON Object

In this example, we create a screenshot of a simple JSON object representing the yellow color as a data structure. We enable line numbers for easy navigation through the code and select the "Sublime Monokai" editor color theme, which uses a dark background color, yellow color for text and strings, white for special characters (such as curly braces), and purple for numbers and booleans.

{ "color": { "red": 255, "green": 255, "blue": 0 } }
Required options
These options will be used automatically if you select this example.
Make tabs and newlines visible.
Add line numbers to each line.
Highlight the line being viewed.
Adjust the size of the JSON text.
Select a color theme for
the JSON screenshot.
Choose the format for the
saved JSON screenshot.

Generate a JSON Array Screenshot

In this example, we load a simple one-line JSON array containing various data types like strings, numbers, boolean values, and the special value "null". We set the font size to 14 pixels and choose the white "Eclipse" theme. The resulting screenshot has the dimensions of 262 by 24 pixels and is in JPG format.

["banana", 10, true, false, null]
Required options
These options will be used automatically if you select this example.
Make tabs and newlines visible.
Add line numbers to each line.
Highlight the line being viewed.
Adjust the size of the JSON text.
Select a color theme for
the JSON screenshot.
Choose the format for the
saved JSON screenshot.

Blue JSON Screenshot

In this example, we create a screenshot of a more complex JSON data structure containing information about the Windows 11 operating system. We set the code theme to blue "Cobalt" and capture a code screenshot with line numbering, highlighted current line, and visualized line break symbols.

{ "os": { "name": "Windows 11", "version": "22H2", "build": 22000, "arch": "x64", "secureBoot": true, "automaticUpdates": false } }
Required options
These options will be used automatically if you select this example.
Make tabs and newlines visible.
Add line numbers to each line.
Highlight the line being viewed.
Adjust the size of the JSON text.
Select a color theme for
the JSON screenshot.
Choose the format for the
saved JSON screenshot.

Pro tips Master online json tools

You can pass input to this tool via ?input query argument and it will automatically compute output. Here's how to type it in your browser's address bar. Click to try!

https://onlinetools.com/json/capture-json-screenshot?input=%7B%0A%20%20%22color%22%3A%20%7B%0A%20%20%20%20%22red%22%3A%20255%2C%0A%20%20%20%20%22green%22%3A%20255%2C%0A%20%20%20%20%22blue%22%3A%200%0A%20%20%7D%0A%7D&show-invisible=false&show-lines=true&highlight-line=false&font-size=14px&theme=theme-editor&format=jpg

All JSON Tools

Didn't find the tool you were looking for? Let us know what tool we are missing and we'll build it!
Quickly color-code the syntax of a JSON file.
Quickly beautify a JSON data structure.
Quickly compress a JSON file.
Quickly convert JavaScript data to a JSON string.
Quickly convert a JSON string to JavaScript data.
Quickly check JSON for errors and report them.
Quickly escape special JSON characters.
Quickly unescape an escaped JSON string.
Quickly convert a JSON data structure to an XML file.
Quickly convert an XML file to a JSON data structure.
Quickly convert a JSON data structure to a YAML markup.
Quickly convert a YAML markup to a JSON data structure.
Quickly convert a JSON file to a TSV file.
Quickly convert TSV data to a JSON file.
Quickly convert a JSON file to a CSV file.
Quickly convert CSV data to JSON data.
Quickly convert a JSON structure to binary JSON encoding.
Quickly convert JSON to a PNG, GIF, JPG, or BMP image.
Quickly create a screenshot from JSON code.
Quickly encode JSON to base64.
Quickly decode base64 to JSON.
Quickly convert JSON to URL-encoding.
Quickly convert URL-escaped JSON back to JSON.
Quickly convert JSON data to plain text.
Quickly edit a JSON file in a neat JSON editor in your web browser.
Quickly extract keys from objects in JSON data.
Quickly extract values from objects in JSON data.
Quickly reduce the nesting level of an array of arrays.
Quickly create a single-level JSON object from nested JSON objects.
Quickly rewrite JSON strings, keys, and values using escape codes.
Quickly obfuscate a JSON data structure.
Quickly remove certain information from a JSON data structure.
Quickly display detailed information about a JSON data structure.
Quickly convert a JSON file to properties file.
Quickly convert a properties file to a JSON file.

Coming Soon

These JSON tools are on the way!
Find JSON Keys/Values

Find keys and/or values that interest you in a JSON file.

Convert JSON to a List

Create a text list from a JSON array or object.

Convert a List to JSON

Create a JSON array from a text list.

Convert JSON to Form Data

Generate HTTP form data from a JSON object.

Convert Form Data to JSON

Generate JSON object from HTTP form data.

Convert JSON to HTML

Create a HTML table from keys and values of a JSON object.

Convert JSON to CSON

Convert a JSON file to a CSON file.

Convert CSON to JSON

Convert a CSON file to a JSON file.

Convert JSON to TOML

Convert a JSON config to a TOML config.

Convert TOML to JSON

Convert a TOML file to a JSON file.

Convert JSON to Bencode

Convert a JSON data structure to Bencode encoding.

Convert Bencode to JSON

Convert Bencode data to JSON data.

Convert JSON to JSONL

Convert a JSON file to a JSONL file.

Convert JSONL to JSON

Convert a JSONL file to a JSON file.

Convert BSON to JSON

Convert binary JSON data structure (BSON) to JSON.

Convert JSON to UBJSON

Convert a JSON file to a universal binary JSON (UBJSON).

Convert UBJSON to JSON

Convert universal binary JSON (UBJSON) to regular JSON.

Convert JSON to Message Pack

Serialize JSON data to binary MessagePack format.

Convert Message Pack to JSON

Unserialize binary MessagePack to a JSON struct.

Convert JSON to Protobuf

Serialize JSON data to binary Protobuf format.

Convert Protobuf to JSON

Unserialize binary Protobuf to a JSON struct.

Convert JSON to a LaTeX Table

Generate a LaTeX table from a JSON object.

Convert JSON to INI

Convert a JSON data file to an INI configuration file.

Convert INI to JSON

Convert an INI configuration file to JSON data file.

Truncate JSON

Loop over JSON structure and truncate all values or keys.

Find JSON Depth

Find the nesting depth of a JSON data structure.

Convert JSON to a Data URI

Convert a JSON data structure to a data URL.

Convert JSON to a PHP Array

Create a PHP data structure from a JSON data structure.

Convert a PHP array to JSON

Create a JSON data structure from a PHP data structure.

Compare Two JSON Files

Diff JSON files and show differences visually.

Sort JSON Object Keys

Lexicographically sort the order of JSON object keys.

Swap JSON Keys with Values

Exchange keys with values in a JSON file.

Create a Random JSON Array

Create a JSON array with random values.

Create a Random JSON Object

Create a JSON object with random keys and values.

Randomize a JSON Array

Randomly change the positions of array elements.

Randomize a JSON Object

Randomly change the order of key, value pairs.

Add Spacing to JSON

Add random spaces and newlines in a JSON file.

Tokenize JSON

Tokenize a JSON data structure.

Remove JSON Syntax

Remove all JSON syntax and leave just the values.

Change JSON Syntax

Change curly braces, commas, and quotes to other symbols.

Fix Quotes in JSON

Fix incorrectly quoted (usually single quote) keys and values.

Use Single Quotes in JSON

Make all keys and values in a JSON to be single-quoted.

Use Double Quotes in JSON

Make all keys and values in a JSON to be double-quoted.

Generate FakeSON

Create JSON that looks real but is fake (FakeSON).

Run jq

Execute a jq query on a JSON data structure.

Filter JSON

Filter keys and values that match a pattern.

Split a String into a JSON Array

Create a JSON array from a string.

Group a JSON Array

Create groups of JSON array items.

Merge JSON Arrays

Merge two or more JSON arrays together.

Compare JSON Arrays

Find differences in two or more JSON arrays.

Merge JSON Objects

Merge two or more JSON objects together.

Damage JSON

Introduce errors in a JSON data structure.

Fix JSON

Try to fix a damaged JSON to the best of our ability.

Create JSON Art

Convert images to valid JSON strings that look like ASCII art.

Visualize a JSON Structure

Create an abstract visualization of JSON's complexity.


Subscribe!

Subscribe to our updates. We'll let you know when we release new tools, features, and organize online workshops.

Enter your email here


Feedback. We'd love to hear from you! 👋



Didn't find the tool you were looking for? Let us know what tool we are missing and we'll build it!