npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

json-viewer

v2.2.0

Published

Pretty JSON viewer for the terminal

Downloads

417

Readme

JSON Viewer

Pretty JSON viewer for your terminal

jsonviewer2


🚀 master ▶︎ npm version CircleCI codecov

🛠 develop ▶︎ GitHub version CircleCI codecov maintainer

📚 dependencies ▶︎ dependencies Status devDependencies Status

👀 code climate ▶︎ Code Climate Issue Count


After only so many times of trying to recall a package script or dependency.

json-viewer allows you to preview your JSON files quickly, showing you only the parts you care to see in a beautiful and readable form.

Table of Contents

Installation

To use json-viewer you will need node environment installed on your system. With that ready, simply run:

npm install --global json-viewer

Yarn user? Not an issue:

yarn global add json-viewer

With that done, you are ready to go - json-viewer just became available to you as a json command!

Usage: Basic

There are several ways to use json-viewer depending on your preferences. The most basic use case would be:

json package.json version # -> "2.0.0"

In the first argument choose which file you would like to browse, and then specify which part of it you would like to see. It also works perfectly with arrays and objects!

json package.json keywords # -> [ "json", "viewer", "cli" ]

Usage: Colors

To add more readability, you can add -c or --color flag to the command:

json --color package.json dependencies
json -c package.json dependencies

This will add some styling to the output depending on its content.

Usage: Piping & Redirection

Have a chain of UNIX commands that generate some JSON output and you would really like to see it in a human-readable form? Look no further:

cat package.json | json -c

Want to go deeper? We say no to compromise:

cat package.json | json -c version

Note: If you use json-viewer in a pipe, the only argument you should specify is the part of the JSON you would like to see. If you put another file as an argument, json-viewer will assume it to be a property name inside the piped JSON.

Usage: Always Color

Using -c can be tiring if you do it quite often, so json-viewer offers you a shortcut. To set a permanent --color flag for json-viewer, simply use:

json --always-color

After that, json-viewer will remember your setting automatically every time you call it!

Usage: Autocompletion

Note: To use autocompletion see the installation instructions below!

json-viewer uses an amazing yargs library to offer some helpful autocompletion to you. How does it work? Let us see:

  • Hitting tab key twice will list you all of the files in the current directory
json # tab-tab!
> package.json    index.js    src/    ...
  • Hitting tab once will automatically finish the name of any fitting file in the current directory
json pa # tab!
json package.json
  • With a specified file, hitting tab twice will list you JSON properties in the file (Works great for nested properties as well!)
json package.json # tab-tab!
> name    keywords    scripts    dependencies    ...
  • With a specified file, hitting tab once will automatically finish the name of the property
json package.json dep # tab!
json package.json dependencies

You can now traverse around your JSON structure in no time!

Autocompletion Installation

You should be warned though - autocompletion does not come with json-viewer out of the box (not explicitly at least). To enable it, first use:

json completion

This will print you a complete script that has to be put into .bash_profile or .bashrc of your system / terminal. If you trust this README.md like you should, all you need to do is simply:

json completion >> ~/.bashrc
# or (depending on your system):
json completion >> ~/.bash_profile

This will append the necessary script to the necessary file. If you are feeling less confident about using some script someone on the internet told you to use™️, simply find .bash_profile or .bashrc using the terminal and add the completion script manually.

Save, reopen terminal, you are ready to go!

Contributing

Want to get your hands dirty on some fancy ES6 code, gain valuable experience, be able to place some significant achievements into your resume? Oh, are you in a right place and time!

Enlist today and contribute to json-viewer. The source code it up there, the ideas in your head, so fear not and put them into the code and create a pull request! How can you build, debug, test your code? Well, there we go with some helper scripts:

npm run build # build the /src directory and put the results into /lib

npm run start # build and run the latest /src

npm run test:live # this one tricky - build, locally pack and install the latest /src as json-viewer in the system. Great if you want to test the final product as a `json` command

Testing?

npm run test # run tests once

npm run test:watch # run tests everytime anything in /src changes

npm run lint # test if your code looks nice and is consistent with the rest of the codebase

npm run coverage # see how much code is tested and how much is not

npm run coverage:html # generate HTML coverage report in /coverage/index.html

There are no strict rules or assumptions for what can be done, although please consider coverage 100% your personal goal and achievement. Plus, of course, npm run test and npm run lint must pass!

Knowing all that, grab your pen, tear that sheet of paper out, and sketch new functionality today! Feel free to reach out via GitHub or email for any aid or explanations!

License

MIT :octocat: