I’ve created a website to quickly format any JSON / XML / HTML / CSS / SQL.


I focused on the UX to make it as easy to use as possible :

  • maximize the height of the input area to feet the navigator window

  • when input is pasted in the textarea, the input is immediately formatted (no need to click “Format”)

  • the right formatter is chosen automatically (no need to select the input type).

  • error tolerance : everyone sometimes copy a bunch of text without the first/last character; the formatter will try to fix an invalid JSON / XML

  • once the input has been formatted, the nodes can be collapsed

  • a breadcrumb indicates the current position of the node under the cursor

  • a darkmode is available

  • the site is fast and lightweight

Any feedback will be greatly appreciated.

Post image

If you need input to test the site, here are 2 examples :


{"id":0001,"type":"donut","name":"Cake","ppu":0.55,"batters":{"batter": [{"id":1001,"type":"Regular"},{"id":1002,"type":"Chocolate"},{"id":1003,"type":"Blueberry"},{"id":1004,"type":"Devil's Food"}]},"topping":[{"id":5001,"type":"None"},{"id":5002,"type":"Glazed"}]}`


<html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"/><title>FormatExpress</title> <link rel="canonical" href="https://format-express.dev/"/> </head> <body itemscope itemtype="http://schema.org/WebPage"><section id="form-container" class="container" itemprop="mainContentOfPage"> <div class="row"><h1 itemprop="description">Paste XML, JSON, CSS, SQL... and get it immediately formatted</h1><span class="brand" itemprop="name"><a href="/">FormatExpress</a></span> </div><div id="input-container" class="inputWithoutHeader" data-viewer-enabled="false"> <div id="express-input-header"> <div id="task-bar"> <div class="row"> <div id="input-status" class="four columns"> <span id="input-status-loading"></span> <span id="input-status-text" class=""> </span> </div></div></div></div><div id="express-input-placeholder"> <textarea name="express-input" id="express-input" class="u-full-width" placeholder="Paste here" wrap="off" spellcheck="false"></textarea> <div id="viewer"> <div id="viewer-viewport"> <div id="viewer-content"> </div></div><div id="express-breadcrumb"></div></div></div><span id="toggle-fullwidth" title="Toggle full width page"></span> </div></body></html>

Source link

Write A Comment