npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details


  • User packages



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.


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 🙏

© 2023 – Pkg Stats / Ryan Hefner




Platform-agnostic rendering library for atoms




Atom Renderer (DEPRECATED)

Please note that this library has now been deprecated and is no longer maintained. You can of course continue to use any previously published versions but it is no longer receiving updates or bug fixes. You may want to look into using instead (note thats atoms-rendering vs atom-renderer in this legacy library)

A library that renders atoms from the content API into front-end code. It is written in javascript using type-checking from FlowJS, and wrapped in a Scala app.

To Install

  1. Clone repo: git clone [email protected]:guardian/atom-renderer.git

  2. Install node dependencies: yarn

  3. Install sbt dependencies sbt compile. You need to have the pgp plugin installed globally.

Run FlowJS

Installing the node modules above should have installed what you need to run flow.

To check for any compile errors, run flow like this: yarn run flow

More information on Getting Started with Flow.

Build the app

  1. Build the JS code: yarn frontend & yarn apps

  2. Build the Scala code: sbt compile

Preview your changes


The utils project provides a convenience application to quickly preview the rendering of an atom. Just go in that project and run it, then hit http://localhost:8080. The app will ask you to select an atom type and type an atom ID, then will render it using the "article" rendering.

Note: you will need to set a value for the CAPI_TEST_KEY environment variable, e.g. in your .bash_profile, to be able to run the project locally.

In Frontend

You need to publish your changes to NPM as a new version of the Atom Renderer package. Then, you need to open the Guardian's Frontend app on your local machine, require the updated Atom Renderer package and run Frontend.

In Atom-Renderer:

  1. Update version in package.json to something like X.X.X-yourname.test.1 Use the semver convention to increment the version number. The '-yourname.test.1' part on the end indicates that this is a version to be used for testing purposes, not for actual use.). Commit these changes.

  2. Build the frontend: yarn frontend

  3. Build the apps: yarn apps

  4. Make sure you a) have an account on NPMjs. and b) it is added to the Guardian group on npm. Ensure your machine is logged into this account. If not, run: npm adduser and sign in

  5. Publish your version to NPM: npm publish The version you just pushed should appear here:

  6. In the (highly likely) scenario that you've made Scala code changes, that you'll want to test in Frontend (see below) you'll also need to publish your Scala changes locally. First, check that atom-renderer/version.sbt is correct, i.e. make sure it ends with -SNAPSHOT, then run sbt +publishLocal (the + is significant for cross-compilation of Scala versions - see project/Dependencies.scala for those) to add the updated library files to your local .ivy2/local/ cache. This'll be tagged with the same version as shown in atom-renderer/version.sbt.

In Frontend

  1. In a new window open up Frontend. You need to have the Frontend app installed and set up with AWS credentials from Janus added. See how to do that here.

  2. In a local branch, tell the app to use the latest version of the atom-renderer:

yarn add @guardian/[email protected] -W

  1. Recompile the frontend with the new version of Atom Renderer added: make compile-dev

  2. Run the frontend code: make watch

  3. Open new terminal and run: ./sbt

  4. Switch into the article project, this will let you see the atom page: project article

  5. Run it: run

  6. You should be able to preview all atoms on this page: http://localhost:9000/open-platform/blog/related-content Here live:

To Deploy

  1. Publish the library to NPM

  2. Publish the library to Maven

  3. Update Frontend to reference the new versions.

To publish to Maven

  1. Open the sbt interactive shell: sbt

  2. Compile the code compile

  3. Release release

  4. Once the version has updated on Maven, go to the Frontend app, find the Dependencies.scala file and update the version number for Atom-Renderer. Run ./sbt to open the interactive console and then compile to pull in the new dependency.

Adding a new Atom?

Make sure to add your new atom type in these two files in Atom-Renderer:

  • core/src/main/resources/__flow__/types/atoms.fjs

  • webpack/atomTypes.js

Contact us in #journalism-team if you have problems with the repo / readme.


* Yarn is used in these instructions, but you can use npm if you prefer