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 🙏

© 2025 – Pkg Stats / Ryan Hefner

orbital-paper

v1.0.2

Published

html wrapper for orbital

Downloads

1

Readme

paper - june 2024

Paper is an html layout service

The goal is to have a declarative json based representation of html that can be reactive. A json notation can be manipulated from javascript and is more terse as well. On the minus side there can be leaky abstraction issues and the abstraction is not 100% complete.

Technical approach

  1. Paper attaches a browser url observer - catching any requests for new urls that the browser may issue.

  2. Paper queries Orbital for paper entities matching the current url. All of these are passed to a renderer.

Renderer and SSR

The renderer accepts json blobs that are effectively a json based representation of any given html node.

Here's an example of a logo - it is a fairly direct mapping of json to html, and in fact the user can directly embed html if they wish:

{
	uuid:'cloudcity/logo1',
	paper: {
		css:`position:absolute;left:0px;top:0px;display:flex;justify-content:left;align-items:center`,
		content:`<a extern=true href="/" style='font-size:4em;margin-top:-8px;color:#e0e0e0;text-decoration:none'>&nbsp;⚈</a>`
	}
},

The renderer will attempt to replace or update an existing node in the live dom rather than creating a new one if possible - this is important for SSR because a static copy of the page may have been already sent to the client earlier. The json representation is authoritative and the dom representation is reactive, attempting to stay up to date with the json representation.

The renderer can also be used to pre-generate SSR (server side rendered) pages. This is html text suitable for serialization and transport over the wire. This is optional, but a reason to do it is that third party search engines don't 'run' SPA (single page apps) but rather tend to only consume html - without a statically generated page they are unable to index your content and thus your content is less visible to the internet as a whole. It's basically convenient to be able to generate static html ahead of time.