Webring Widget

Status: v0.1.0

The Idea

Webrings were one of the early web’s best ideas – small communities of independent sites linking to each other, helping visitors discover new corners of the internet outside of search engines and social algorithms. We built a modern version.

What It Does

The Webring Widget is an embeddable web component (<webring-widget>) that fetches content from multiple JSON Feed sources and displays them as a unified, themeable card grid. Any site can embed it with a single HTML tag.

Drop it on your site to show a curated feed of content from sites you care about – or join a ring and let others surface yours.

Features

  • Fetches multiple JSON Feed sources in parallel
  • Deduplicates entries across feeds using URL normalization
  • Sortable by date, title, or random order
  • Tag-based filtering
  • Lazy loading with IntersectionObserver
  • Error resilient – if some feeds fail, the rest still render
  • Full Shadow DOM encapsulation so page styles don’t interfere
  • Over 25 CSS custom properties for theming (dark mode included)
  • Responsive grid layout
  • JavaScript API for programmatic control and custom events

Technical Details

  • Pure TypeScript web component – zero runtime dependencies
  • 17 KB (ESM) / 23 KB (IIFE)
  • Built with esbuild
  • Extends JSON Feed 1.1 with a _webring extension for tags and metadata
  • Designed with a clean data layer interface so the core could be swapped to Rust/WASM in the future

See It In Action

The webring widget powers the Webring page on this site. If you run an independent site and publish a JSON Feed, you can join.

Get Involved

Visit our GitHub to browse the source, report issues, or add your site to the ring.