Json Beautifier Convert JSON Strings to a Friendly Readable Format
Support Development
PayPal ● 
Bitcoin Address: bc1qc5y3l35wu00seltc887zakpwp3e22atk7ty3e5
 ● 
Lightning Address: [email protected]
Your Input Matters
Review
Advertisement
Extension Screenshot
The "JSON Beautifier" extension is a helpful tool that makes it easy to view, edit, format, validate, and export JSON pages. The extension does not require any setup to function. It seamlessly converts JSON pages whenever the page's mime type corresponds to a valid JSON format. Once a page is loaded, the JSON viewer checks the page is JSON compatible. If the parser successfully returns an object (or an array), the content is displayed in an editable user interface. Otherwise, the data is shown in its raw format.

Features

FAQs

  1. What is "JSON Beautifier" extension and how does it work?

    The extension sets up a monitoring system for top-frame page loading. A small code snippet is injected into the page if a frame contains a mime type associated with a JSON object. The page's content is parsed once the page finishes loading (indicating that the complete JSON object has been fetched). If the object parsing is successful, a JSON editor instance is loaded, and the entire object is provided to this instance. This enables you to effortlessly access and review all available keys and their corresponding values. Moreover, you can modify them or perform searches across the keys and values. Additionally, there is a convenient built-in tool for dragging and dropping objects to different locations in the JSON tree.

    This extension use tulios/json-viewer project for displaying JSON objects.

    The extension uses a non-persistent background page (starting from version 0.1.3), ensuring that the background script unloads itself when the extension is inactive. So, the extension does not affect the browser's performance when not in use.

  2. recommended The "OCR - Image Reader" extension for Chrome, Edge, Opera and Firefox browsers.

    The "OCR - Image Reader" extension makes OCR easy within your browser. After installing, a toolbar button lets you select a region on the page, captures the image, and uses "Tesseract.js" to extract text. This extension supports over 100 languages, and conversion progress is shown in a popup. Language files download only once and are cached for future use. Read more here.

  3. How does the extension identify JSON pages?

    One of the headers that the server returns when a web page loads is the "content-type" header. This header provides information to the browser about how to handle the request. The extension installs an observer specifically for tracking this header in the top-frame requests. A script is added to the page when a matching mime type is detected. The script then waits with a loading animation until all the necessary data is available. Once the data transfer is complete, the script attempts to parse and validate the contents. After successful validation, the data is sent to a JSON editor instance to display the resulting output.

  4. What are the available editing features in the editor?

    You can adjust the node types to either "Auto," "Array," "Object," or "String" formats. The "Auto" format allows the extension to determine the appropriate format automatically. Additionally, you can sort the children of a node in ascending or descending order. These editing operations can be accessed through the selector box located on the left side of each object (node). You can also change the position of nodes by using the drag-and-drop feature.

  5. What's new in this version?

    Please check the Logs section.

  6. Is there a way to expand or collapse all JSON keys in the editor at once?

    Certainly! You can find two action buttons on the top left side within the editor. These buttons enable you to expand or collapse all nodes at once. Once a JSON object is fully loaded, only the keys on the first level are expanded by default. Using these two buttons, you can expand the entire JSON object to the deepest level or collapse the entire node hierarchy to the top level.

  7. How can I test JSON Beautifier extension?

    Here is a list of sample JSON files. Open these files in your browser after the extension is installed to see the editor in action.

    And use these two large JSON objects to see how extension performs on large input data:

  8. Does this extension support beautifying local JSON files (file:///)?

    Not only can the extension beautify server files, but it can also beautify local JSON files (starting from version 0.1.3). Please make sure that the "allow access to file URLs" option is enabled for this extension on the "chrome://extensions" page. This step is necessary if you are on a Chromium-based browser such as Chrome, Edge, or Opera.

  9. Supported shortcut keys?

    List of supported shortcut keys for the "Tree" view:

    Alt+Arrows
    Move the caret up/down/left/right between fields
    Ctrl+Shift+Arrow Up/Down
    Select multiple fields
    Shift+Alt+Arrows
    Move current field or selected fields up/down/left/right
    Ctrl+D
    Duplicate field
    Ctrl+Del
    Remove field
    Ctrl+Enter
    Open link when on a field containing an url
    Ctrl+Ins
    Insert a new field with type auto
    Ctrl+Shift+Ins
    Append a new field with type auto
    Ctrl+E
    Expand or collapse field
    Alt+End
    Move the caret to the last field
    Ctrl+F
    Find
    F3, Ctrl+G
    Find next
    Shift+F3, Ctrl+Shift+G
    Find previous
    Alt+Home
    Move the caret to the first field
    Ctrl+M
    Show actions menu
    Ctrl+Z
    Undo last action
    Ctrl+Shift+Z
    Redo

    List of supported shortcut keys for the "Code" view:

    Ctrl+\
    Format JSON data, set proper indentation
    Ctrl+Shift+\
    Compact JSON data, remove all whitespace

    List of supported shortcut keys for changing mode:

    Ctrl + Shift + R
    Switch to "Tree" mode
    Ctrl + Shift + C
    Switch to "Code" mode
    Ctrl + Shift + E
    Switch to "Text" mode

  10. Can I use this editor to open and modify embedded JSON objects on a page while benefiting from syntax highlighting?

    Certainly! You can achieve this by using your mouse to select the entire JSON string. Once the JSON is selected, right-click and choose the appropriate context menu item to open the selected JSON in a new editor instance, which will open in a browser tab. From there, you can easily modify and view the JSON in the syntax highlighting view provided by the editor.

  11. Can this extension be used to generate a new JSON object from scratch?

    Click the action button on the browser toolbar to open a new editor instance. The editor will contain a sample JSON structure. You can adjust the view mode according to your preference. Once you have finished editing the JSON, click the save button to export the results to your local disk. It's important to note that the JSON objects in this editor are not persistent, meaning they are not permanently stored or retained.

  12. Is it possible to extract a specific portion of a JSON object using this tool?

    When viewing a JSON object in the "Tree" view, the "Actions" menu offers three convenient options. Firstly, you can use the "Copy Object Path" item to copy the current path to the clipboard. Additionally, you can copy a particular segment of the entire object in the JSON formatted string. You can accomplish this by selecting "Copy Inner JSON" or "Copy Outer JSON" based on your specific needs.

  13. How does the extension handle displaying JSON files containing large numbers, considering that JavaScript does not natively support them?

    In versions before 0.3.7, the extension relied on the native JSON parser, which resulted in the truncation of large numbers. However, starting from version 0.3.7, the extension employs a different approach. It converts large numbers into read-only objects, represented in the format "{type: 'Big Number', value: '###n'}". The 'value' field is a string that ends with the character 'n', indicating it represents a large number (such as BigInt or BigFloat). This approach allows users to modify the value within these objects. Once the user exports the data, these objects are converted back into their respective large-number formats.

  14. What is the "Transform" button on the v0.5.2 interface? How can I use it?

    The "Transform" button opens the transform interface, allowing you to write a JavaScript function to modify the existing data. The function must return new data that will replace the old data. The data is presented as an object in the interface, where you can append keys and values or modify existing keys. It is recommended to use the browser console to inspect the actual input data (use "console.log(data)" for instance). This extension uses the LosslessJSON object for handling out-of-range numbers. Since browsers do not allow running user commands, currently the extension uses "Sval" javascript interpreter inside a sandbox to run the user function. Make sure to backup your data before using the transform feature. Examples:

    Overwrite the input with a custom output:

    function query (data) {
      return [1, 2, 3];
    }

    Add a custom key to the data:

    function query (data) {
      data.newKey = 'new value';
      return data;
    }

    Debug the input data:

    function query (data) {
      console.log(data);
      return data;
    }

  15. Despite installing this JSON viewer extension in Firefox, the browser still defaults to its built-in JSON viewer. How can I make Firefox use the extension instead?

    To ensure that Firefox uses your installed JSON viewer extension, you need to disable Firefox's built-in JSON viewer. This allows the extension to handle JSON MIME requests instead of Firefox's default viewer.

    Steps:

    • Open a new tab in Firefox and type about:config in the address bar.
    • Press Enter. You'll see a warning. Accept this warning to proceed.
    • In the search bar on the about:config page, type devtools.jsonview.enabled.
    • When the preference appears, double-click on it or use the toggle button to set it to false. This action disables the built-in JSON viewer.

    Now, when you open a JSON address in Firefox, the extension should handle it instead of the default viewer.

Matched Content

Preview

Reviews

Please keep reviews clean, avoid improper language, and do not post any personal information. Also, please consider sharing your valuable input on the official store.

What's new in this version

Version--
Published--/--/--
Change Logs:
    Last 10 commits on GitHub
    Hover over a node to see more details

    Need help?

    If you have questions about the extension, or ideas on how to improve it, please post them on the  support site. Don't forget to search through the bug reports first as most likely your question/bug report has already been reported or there is a workaround posted for it.

    Open IssuesIssuesForks

    Editorial Review

    JSON Beautifier is a browser extension to automatically view and edit JSON (JavaScript Object Notation) pages. It also allows to format and validate the JSON pages. JSON Beautifier is very easy to use and does not require any activation. This browser extension automatically converts JSON pages when a page matches to a valid JSON format.

    The extension installs an observer for top frame loads. When a frame has a mime type that may belong to a JSON object, a small code is injected into the page. When page loading is finished, the content will be parsed. On successful object parsing, an editor instance is created automatically and the entire object is fed to the editor instance. You can see all the available keys and their values and edit them or search through all the keys or values if you want. There is a built-in tool to drag and drop objects to different places as well. The extension has a beautiful easy to use the editor to give you complete access to change and modify JSON pages.

    JSON Beautifier also allows you to edit different types of nodes to Auto, Array, Object and String format. You can use Auto format to let the extension decide the format. You can also drag and drop nodes to change their place.

    Currently, the browser extension is available for Mozilla Firefox, Google Chrome, and Opera but the developers intend to make this available for other browsers as well. Working with JSON pages was never this easy and credit goes to JSON Beautifier for making it easy for everyone to enter the world of JavaScript Object Notation. This is a lite extension and does not consume a lot of memory. You can simply install it and if you are not satisfied, it can be removed also.

    Permissions are explained

    PermissionDescription
    storageTo save and get local preferences like version number
    tabsTo update JSON tab content once it is loaded
    <all_urls>To be able to act on both local and server-side pages

    Recent Blog Posts