
Show HN: JSON Pizza – Beautify your JSON quickly - giveWatermelon
https://json.pizza
======
tlrobinson
OS X includes the json_pp command, so I often just do this to format JSON in
my clipboard:

    
    
       pbpaste | json_pp | pbcopy
    

For just viewing, I like Node's console.dir() formatting better since it's
more compact and colored (but it's unquoted JS objects, not JSON), so I
aliased this command in my shell:

    
    
       json='node -e '\''console.dir(JSON.parse(fs.readFileSync("/dev/stdin", "utf-8")), { depth: null })'\'
    

Then I can do

    
    
       pbpaste | json

~~~
tonyhb
Or

    
    
        cat foo.json | python3 -m json.tool
    

Prettifying is also built in to python3 on any system.

~~~
pstuart
Or

    
    
        jq  . foo.json

~~~
vesinisa
jq is freaking awesome! It can do amazing stuff, it's like awk for JSON on
steroids. Highly recommend reading the documentation:
[https://stedolan.github.io/jq/manual/](https://stedolan.github.io/jq/manual/)

------
vinhboy
Not to threadcrap, but I am curious what people think about this.

Over the years I've seen a lot of developers take none open-source code, or
private JSON data strings and paste them into random sites they find searching
"json format" on google.

Does that make anyone else cringe? Is there anything we can do about this? Or
is this just not a big deal and I shouldn't worry.

~~~
ziggity
I had a junior dev show me a neat site where you can paste in a Java thread
dump and it performs an analysis. After explaining why it's a bad practice to
send diagnostic details to an un-trusted third party I think he understood,
but it seems like every week I'm finding people using ngrok, unauthorized
password managers, grammarly, JWT parsers, Base64 encoders, and all manner of
questionable tools.

I too wonder if I'm out of touch, if I'm tilting at windmills.

~~~
hartator
It can also happen you don’t care about the data you are sharing. Why not
using an online then?

~~~
ziggity
Still too dangerous, and I don't trust new developers to make that
determination. Once you get into the habit of pasting development details into
random website textboxes hosted who-knows-where with who-knows-what ad
networks, you're one keystroke away from leaking sensitive details that are
correlated to your employer's IP range.

Or maybe I'm a crank and need to lighten up. That's why I'm asking.

~~~
pbronez
It's a reasonable thing to worry about. Bad actors exist. IP is valuable.
Computers are insecure. People are lazy. You have to be careful out there.

> I don't trust new developers to make that determination.

Ignoring this issue is a sign of professional immaturity. Recommend you view
it as an opportunity to educate the younger members of your team. Show them
the power of a solid CLI toolbox that respects your privacy while delivering
solid performance.

Still, you shouldn't be dogmatic about it. Webapp tools can be useful for
understanding a new programming language or API. Just be judicious.

~~~
ziggity
I agree 100%, perhaps I could have phrased that better. I try to use it as a
teachable moment: "Hey, instead of using base64decode.org did you know you
could use atob and btoa in a web inspector?"

Security-related scanners are a tough one though. Free XSS scanners, free TLS
cert checkers: The best intentions can result in unintended disclosure.
Developers have it constantly beaten into their head "Security! Security!
Security!" and are often given nothing more than an OWASP cheat-sheet, so I
can totally understand and empathize with the thought process that leads
someone to plug a company URL into a free web-hosted XSS scanner.

------
danpalmer
Feedback: First time through I just pasted some JSON and wondered why it
didn't format. I hadn't realised the page had instructions on it – I had
assumed it was just sample JSON.

Second time through, I read the instructions, and realised that the keyboard
shortcuts are Control-based – this is less common for macOS, "Cmd+Enter" feels
like a more consistent shortcut to use.

I think this should probably just auto-format all the time. It's only for
formatting, so that wouldn't get in the way.

~~~
jerf
CTRL for the shortcuts overlaps with the browser. You need to either
completely take this over, or completely leave it be, and in this case,
probably the latter. Otherwise I get shocked when I hit CTRL-w to see if it
erases a word and it closes my window without warning.

There's also apparently some other things going on; CTRL-u uppercases the word
you're on. A link to more docs or something may be helpful.

------
dividuum
Non web based approach using jq
([https://stedolan.github.io/jq/](https://stedolan.github.io/jq/)):

    
    
        json_source_on_stdout | jq .

~~~
atomwaffel
Or on macOS, to quickly format the contents of your clipboard:

    
    
        pbpaste | jq . | pbcopy
    

Pretty sure this is one of my most frequent commands.

~~~
ben509
You can use Automator to create a service with a shell script action; just
pick Quick Action, the rest should be pretty obvious.

~~~
blaydator
Not so obvious to me ! I have created the Quick Action but I don't know how to
trigger it, so I have saved it as an app. Also when I execute it from
Automator (play button), the script doesn't work (nothing is pasted). Would
you mind helping ? Looks the best way to quickly format a copied json ! Thanks

~~~
ben509
Yeah, that was a very terse explanation, and Automator is so user-friendly
it's hard to use.

1\. Start Automator.

2\. In the "Choose a type..." sheet, choose "Quick Action".

3\. Set these:

    
    
         Workflow recieves "current text" in "any application".
         Input is "entire selection". [X] Output replaces text.
    

4\. Add "Run shell script" and select your preferred shell.

    
    
         jq .
    

(Note that Automator is handling your stdin / stdout.)

5\. File / Save.

You can now find your workflow by command-clicking the document name in the
window's titlebar. It should be in /Users/You/Library/Services

Now, fire up TextEdit, enter some JSON. Right-click, select Services and your
service should be present. It's also in the TextEdit menu under Services.

------
rsashwin
A privacy policy (even though its open source and one can go look up the code)
would help alleviate user concerns adopting this.

~~~
garysahota93
I agree! I am a bit worried to put any JSON in it just yet.

------
hbcondo714
Cool looking interface. Are you monetizing in any way? I've been using
[https://jsonformatter.org/](https://jsonformatter.org/) for quite some time
and have gotten used to their features (minifying & beautifying) but it's ad-
based.

------
jazzyjackson
aka

    
    
      const formattedText = JSON.stringify(JSON.parse(text), null, 2)`

~~~
concert-gilled
[https://github.com/kritzware/json.pizza/blob/master/pages/in...](https://github.com/kritzware/json.pizza/blob/master/pages/index.vue#L113)

------
ben509
It's converting numbers to floats and deleting additional precision.

There are a few features that can cut out a ton of unnecessary whitespace,
like keeping short lists and maps on a single line, and keeping singleton list
brackets tight.

------
rightisleft
Nice - i've been a long time fan of
[https://jsoneditoronline.org/](https://jsoneditoronline.org/) which has some
nice sort/filter functions built in.

You can also just open chrome / firefox dev tools console and assign it to a
variable...

Sadly, all of these tools fall over for very large json objects

------
efdee
Nice job! Excuse me for plugging my own project that does more or less the
same: [http://www.inspectjson.com/](http://www.inspectjson.com/). 100%
clientside, so no sharing but also no snooping :-)

------
quintonish
I made a command line one kind of like this:
[https://www.npmjs.com/package/color-json-
cli](https://www.npmjs.com/package/color-json-cli)

------
wmij
I've been using [http://zaa.ch/jsonlint/](http://zaa.ch/jsonlint/) for a
while. Does validation and formatting. All in browser.

------
earthboundkid
I made a thing and you can read the source:
[https://github.com/carlmjohnson/json-
tidy](https://github.com/carlmjohnson/json-tidy)

------
contingencies
When pizza was mentioned I thought "pie chart" and was therefore assuming an
automatic chart generator that would auto-visualize an arbitrary structure.
Anyone know a tool like that?

------
dheera
bug in cursor rendering:
[https://imgur.com/a/imGJCRC](https://imgur.com/a/imGJCRC) (chrome
75.0.3770.142, ubuntu 16.04)

------
afraca
Looks nice and simple :)

I think a strong example would really help your case, the landing page now has
already formatted json, and I can't figure out where to get a messy example
from quickly.

------
dokka
I like it! It's alot nicer than my json formatter [https://oil-
comma.glitch.me/](https://oil-comma.glitch.me/)

------
rhacker
I couldn't get the Ctrl-L thing to work. (on a mac/chrome)

Ctrl-B works.

------
jatsign
Is the .pizza just for fun or am I missing a reference?

~~~
rolltiide
Its because pies start out as unorganized messes and end up as a pizza.

Also for fun

------
Exuma
This is actually dope. I need to do this a lot and I hate doing it from
command line because i usually am pasting huge blobs

------
axegon_
Just a thought: add a shortcut to compress formatted JSON.

------
Existenceblinks
What's different to VScode `alt+shift+f` for .json?

------
cloudmanic
This is neat. I will start using! thanks!

