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 🙏

© 2026 – Pkg Stats / Ryan Hefner

retrostrap

v0.1.1

Published

Build like it's 2026, look like it's 1999. Retro CSS + JS framework, zero dependencies.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

retrostrapretrostrap

Keywords

cssframeworkretroy2kgeocitiesweb1.0uicomponentsnostalgia90s

Readme

retrostrap

 ╔═════════════════════════════════════════════════════════════════════════╗
 ║   * : . : ' ~ ' : . : *   r e t r o s t r a p   * : . : ' ~ ' : . : *   ║
 ║                Build like it's 2026, look like it's 1999.               ║
 ╚═════════════════════════════════════════════════════════════════════════╝
                 [ under construction, and proud of it ]

retrostrap is a CSS + JavaScript framework for building websites that look like the web of 1996-2003, GeoCities homepages, system-gray desktops, glitter shrines, green terminals, while behaving like the modern web: responsive on every screen size, accessible, fast, zero dependencies, installable from a CDN in two tags (four with a theme and the Toybox, as below).

It ships in two parts:

  • The styling framework: sixty-plus components (bevel buttons, window chrome, marquees, hit-counter shells, webring bars, folder tabs, "You are here:" breadcrumbs…), ten themes, and layout recipes that quietly collapse to phones.
  • The Toybox: twenty-two optional widgets: a pixel cat that chases your cursor, falling snow, cursor trails, shiny spheres that trail your mouse in a rainbow, a little pet you feed, hit counters, a jukebox that never autoplays, and a konami code that starts a 30-second party.

Around the framework: thirty-four demo sites you can view-source, among them a drag-and-drop page builder and Retrospace, a curated directory for the community; plus an MCP server so coding assistants build era-correct pages on the first try.

The trick that holds it together: the era's constraints are enforced as design law, only the 216 web-safe colors (+16 named), nine period font stacks, border-radius: 0, linear/steps() easing only. Stay inside the framework and you cannot accidentally look modern. Meanwhile everything underneath is current-year engineering: semantic HTML, real focus order, prefers-reduced-motion, performance budgets, progressive enhancement.

Status

It's all built, tested, and live: the CSS (63 components, ~7KB gzipped), the widget engine with a live Retrostrap.audit(), the ten themes and twenty-two widgets, the demos, the builder, and Retrospace, on npm as retrostrap, on the CDN, and running at retrostrap.dev. The full blueprint lives in docs/ (design laws, catalogs).

Quick start

<!DOCTYPE html>
<html lang="en" data-rs-theme="midnight">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/retrostrap.min.css"
        integrity="sha384-SC+ga2p8hbUPXaRsOxH+EYGbYEdIO7hxwrSdKAXVPtaYJraon45yPLut6JNkyBV+" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/themes/midnight.css"
        integrity="sha384-ndHiSg65WpOKFmgpnWUYxGV9kwI3ZVmiec39s9owo9lkJicGisiYMsPJqbb792IM" crossorigin="anonymous">
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/retrostrap.min.js"
          integrity="sha384-Ryw9HBQdLuRoSeAz0+JpBQI5qtev8vV49NofDfGt7MC/HV3hYb32RQPKnaI9AOwO" crossorigin="anonymous"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/retrostrap-toybox.min.js"
          integrity="sha384-HnsgaZJwyzLxPLXpeqZx90ib3BHEG4u63m65le2m2c/2YaRbW7r3G3V3dDYPX9tI" crossorigin="anonymous"></script>
</head>
<body data-rs-widgets="snowfall neko" data-rs-neko-behavior="patrol">
  <div class="rs-page rs-container">
    <h1 class="rs-rainbow rs-text-center">Welcome to my Homepage!</h1>
    <p class="rs-text-center"><span class="rs-badge rs-badge--new rs-blink">NEW!</span>
       You are visitor <span class="rs-counter" data-rs-widgets="hit-counter">001337</span></p>
  </div>
</body>
</html>

New here? The Get started guide is the short path: the two-tag install, npm, dropping into React/Vue/Svelte, a full page skeleton, themes, and verifying with Retrostrap.audit().

The documentation

Get started is the quickest path onto the air. For the whole picture, start with the vision, then wander:

| | | | --- | --- | | Get started | install, frameworks, first page, themes, audit | | 00 · Vision | what, why, principles, non-goals | | 01 · The Museum | how the old web really looked, researched | | 02 · Design language | the five laws, tokens, guardrails | | 03 · Architecture | repo, build, catalog system, asset pipeline | | 04 · Components | the full catalog | | 05 · The Toybox | widget catalog + the ten-rule contract | | 06 · JavaScript API | the whole surface | | 07 · Theming | ten themes, token matrix | | 08 · A11y & performance | the modern conscience | | 09 · AI integration | llms.txt, manifest, MCP server | | 10 · Demo sites | 34 demos + the docs site | | 11 · The Boards | forum spec, Netiquette (EN + DE) | | 12 · Retrospace | the curated directory |

See it running

Live on retrostrap.dev: the docs (built with retrostrap, of course), the kitchen sink with every component on one page, and thirty-four demo sites, among them the drag-and-drop page builder and Retrospace, our curated directory of the living retro web.

The same pages live in this repo, view-source-able and offline-friendly: demos/ holds the gallery, a personal homepage, a pizzeria, an ISP's NOC, a webcomic, a band shrine, an online store, and more. Screenshots at three viewports are in site/assets/shots/.

Community

The Retrostrap Boards launch with the project: a slow, friendly forum with a Netiquette, no like buttons, and a German-language table, Der Stammtisch, built with retrostrap and run on our own little stack. One community, one home; GitHub stays for issues and pull requests. Be kind; greet the newbies; remember the human.

Built something? Wear the badge:

made with retrostrap

For robots

Machine-readable everything: llms.txt, a one-page cheatsheet, manifest.json, guardrails.json, a prompt pack, and an MCP server (services/mcp/) that hands assistants the catalog as tools, so they build era-correct pages on the first try. See docs/09.

Who makes this

retrostrap is built and maintained by Stefan Gündhör: a business informatics degree (JKU Linz, 2012) and hands-on web and backend engineering since long before generative AI went public. It is published under his Austrian one-person company, vorausgedacht.at e.U. Modern tools, generative AI among them, are part of the workshop here; nothing ships without human technical judgment and a manual review. The retro is the look, not the engineering standard.

License

MIT (the LICENSE file).

This page is best viewed with any browser, at any size. That's the whole point.