Developer docs
Let readers tidy API responses next to your guide.
Content / widget · Elementor module
JSON Formatter Widget Plugin for Elementor
Let visitors paste JSON and get it indented or minified, with optional sorted keys and the exact line and column of any error, entirely in the browser.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / JSON formatterProduct preview
Text, style and layout controls inside Elementor
01 / Interactive demonstration
Try it
These are the actual published outputs of the widget. Paste or edit JSON in any of them; the result updates as you type.
02 / Inside WordPress
JSON formatter controls in Elementor
Content sets the starting layout, whether keys are sorted, whether visitors can change both, the input limit, and every label and message. The Style tab covers the text areas, labels and messages (including error colours) and the Copy and Clear buttons.
03 / Website use cases
Where to use json formatter
Developers, students and support teams often need to read a long line of JSON or find out why it will not load, but online formatters send the data to someone else's server. JSON formatter runs on your own page: visitors paste JSON and get it indented or minified as they type, with keys sorted if they wish. Errors are explained in plain words with the line, the column and a pointer to the problem. Numbers and strings are kept exactly as written, and nothing is sent anywhere.
Support pages
Help customers find the error in a settings file.
Teaching
Show students what valid JSON looks like.
04 / Installation and setup
How to add a JSON formatter in Elementor
Start with Complementor installed and your license connected. Enable this module in the WordPress library, then configure it in Elementor.
Install Complementor, connect your license and enable JSON formatter in the Complementor library.
Add the widget to a page.
Choose the starting layout and whether keys are sorted.
Decide whether visitors can change the layout and sorting.
Style it and paste some JSON.
05 / Content and style controls
Customize json formatter in Elementor
Configure the settings available for this module to suit the page you are building.
Live formatting while typing.
2 spaces, 4 spaces, tabs or minified.
Optional sorted keys.
Error line, column and reason.
Numbers kept exactly as written.
Copy and Clear buttons.
06 / Choose the right approach
JSON formatter and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
Online formatter sites
They send pasted data to their servers and take visitors off your page.
A code editor
Works well, but visitors must install and open it first.
07 / Requirements and compatibility
JSON formatter compatibility with Elementor
- Requires Elementor; works without WooCommerce.
- Checks JSON syntax; does not check against a schema.
- Comments and trailing commas are reported, not repaired.
Complementor uses classic Elementor APIs. Atomic-native controls are not implemented. Check your theme, cache and integrations on a staging site before release.
08 / Common setup problems
Troubleshoot json formatter
Check these settings if the published page behaves differently from the editor.
Why does it say “remove the comma”?
JSON does not allow a comma after the last item in an object or array.
Why are single quotes rejected?
JSON strings and property names must use double quotes.
Why was my JSON shortened?
It passed the input limit. Raise the limit in the Formatting section.
Why are capital letters sorted first?
Keys are sorted by character code, where capital letters come before small letters.
JSON formatter plugin questions
Does it need Elementor Pro?
No. It works with the free version of Elementor.
Is the JSON sent anywhere?
No. Formatting happens in the visitor's browser and nothing is saved.
Does it change my numbers?
No. Numbers and strings are copied exactly as written, including very large numbers.
Is it accessible?
Yes. The fields are labelled and the valid or error message is announced to screen readers.
Does it need JavaScript?
Yes. Without it a short message is shown instead.
10 / Annual All Access subscription
Get json formatter with Complementor
This module is included with all 1007 current Complementor solutions. Choose your production website allowance; every plan includes the same modules.
One website
$29USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $29 USD each year.
A few websites
$49USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $49 USD each year.
More websites
$99USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $99 USD each year.
Applicable taxes extra. Annual subscriptions renew automatically unless canceled in your customer account. Elementor Pro is required for Exclude current post. Read the terms and 14-day technical-issue refund policy.