Open source
RSS Feed Widget
v1.2.0Most RSS integrations need a backend, a paid API, or a heavy framework. This one doesn't.
RSS Feed Widget is a single JavaScript file that parses and renders any feed as a responsive, paginated card grid with category filtering. Under 7KB gzipped, zero dependencies, runs entirely in the browser.
How to Set Up SSH Keys
Generate and configure SSH key pairs for secure server access...
How to Make Simple Syrup
A one-to-one ratio of sugar and water, heated until dissolved...
Why use it
Features
RSS Feed Widget handles the hard parts of feed display so you do not have to. It sanitizes untrusted XML, adapts to screen size and color scheme, provides category filters, paginates long feeds, and renders image thumbnails from enclosure tags. All without a single dependency.
Zero Dependencies
Pure vanilla JavaScript. No frameworks, no libraries, no build tools required. Works in any environment that runs a browser.
Under 7KB
CSS and JavaScript combined weigh less than a single small image. Loads in milliseconds, even on slow connections.
Dark Mode
Auto-detects the user's system preference via prefers-color-scheme, or lets you force a specific theme through the config.
WCAG AA Accessible
Twelve badge color themes verified for contrast, ARIA attributes on all interactive elements, focus-visible styles, and prefers-reduced-motion support.
XSS Protection
Built-in sanitization strips scripts, event handlers, and dangerous markup from all feed data before rendering anything to the DOM.
Built-in Pagination
Choose a "load more" button or numbered page navigation. Both styles include keyboard support, ARIA labels, and smooth scrolling that respects reduced-motion preferences.
Quick start
How It Works
Three steps to a working feed widget. No registration, no API key, no server-side code. The widget fetches, parses, and renders your feed entirely in the visitor's browser.
Include the script
Link the CSS and JS from jsDelivr, unpkg, or install via npm. The UMD bundle works as a script tag, CommonJS require, or AMD define.
Add a container
The widget renders inside any block element. It fills the container width, supports responsive breakpoints, and detects the user's color scheme preference.
Initialize
RSSWidget.init() takes a config object. Only the feed URL is required. Pagination, category filters, dark mode, and skeleton loading states all work out of the box.
The minimum setup looks like this:
<!-- Add the container -->
<div id="rss-widget"></div>
<!-- Include the widget -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rss-feed-widget@1.2.0/rss-widget.css">
<script src="https://cdn.jsdelivr.net/npm/rss-feed-widget@1.2.0/rss-widget.js"></script>
<!-- Initialize -->
<script>
RSSWidget.init({
feed: 'https://your-site.com/feed.xml',
container: '#rss-widget',
pagination: true,
paginationStyle: 'numbered'
});
</script>
| Parameter | Type | Default | Description |
|---|---|---|---|
feed |
string | required | RSS feed URL to parse and display |
container |
string | '#rss-widget' |
CSS selector for the target element |
perPage |
number | 9 |
Items shown per page or per load-more click |
maxItems |
number | 0 |
Total item cap (0 = unlimited) |
pagination |
boolean | false |
Enable pagination controls |
paginationStyle |
string | 'button' |
Pagination style: 'button' (load more) or
'numbered' (page navigation)
|
showFilter |
boolean | true |
Show category filter buttons |
showDate |
boolean | true |
Show publication dates on cards |
showImage |
boolean | true |
Show images from RSS enclosure tags |
descriptionLength |
number | 120 |
Truncate description to this many characters |
theme |
string | 'auto' |
Color theme: 'auto', 'light', or
'dark'
|
corsProxy |
string | null |
Proxy URL prefix for CORS-restricted feeds |
skeletonCount |
number | 6 |
Number of skeleton cards shown while loading |
onLoad |
function | null |
Callback fired when the feed loads successfully |
onError |
function | null |
Callback fired when the feed fails to load |
See it in action
Live Demo
This is a live instance of the widget running on this page right now. It is pulling articles from how-to-do.net/feed.xml and rendering them with category filters, numbered pagination, image thumbnails, and the default light theme. What you see below is exactly what your visitors would see after adding three lines of code to your site.
Get started
Installation
Install via npm for managed projects, or drop in a CDN link for instant setup. No build step, no bundler, no config files. The library ships as a single CSS file and a single JavaScript file that you can host yourself or load from a CDN.
Ecosystem
Links & Resources
Explore the project across platforms. From source code and package registries to tutorials and product listings, everything is public, free, and MIT licensed.