I styled my RSS feed with XSLT

2025-08-20 | ⏱️ 4 min read

What is XSLT?

Based on my almost one day of experience in XSLT I can say that XSLT is basically a technology of XML transformation. But for the purpose of this post we'll call it a CSS for your RSS feed.

XSLT lets you define what do you want to do with XML data (any RSS feed is literally an XML file) and how do you want to transform them.

Why style RSS feed?

But why would you want to style RSS feed? Nobody sees it as it is, everyone uses some kind of reader, right? Well, yes, but actually no.

Big corporations do what they can to fight the open web, so most popular browsers conveniently forget what is RSS. For example, Firefox forgot what is RSS back in 2018. So if you try to open RSS feed in Firefox now you'll see this:

Actually, it's not even that bad. At least, Firefox shows you the file structure instead of dumping raw XML on you.

Some browsers, like Vivaldi, actually support RSS (Vivaldi even has its own RSS reader). Vivaldi also can style RSS feed without any XSLT. Here's how raw RSS feed looks like in Vivaldi:

Looks pretty neat even without any XSLT.

How to style RSS feed

To style RSS feed we need to prepare a custom file with extension xsl, say, rss.xsl. Then we need to edit our RSS feed to tell our browser where to look for this file. Like that:

<?xml-stylesheet href="rss.xsl" type="text/xsl"?>

We should put it in the beginning of our XML, so it would look like that:

<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet href="rss.xsl" type="text/xsl"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
... etc, etc.

Styling the feed

The actual XSLT file should have structure similar to this:

<xsl:stylesheet version="3.0">
  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
  <xsl:template match="/">
    <html lang="en">
      ...
    </html>
  </xsl:template>
</xsl:stylesheet>

Inside the <html> tag you can place any HTML or CSS code you like. You can even use JavaScript, but please, don't do that, have mercy!

The simplest XSLT magic might happen like that:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="3.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/"
                xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd">
  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
  <xsl:template match="/">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
        <head>
            <title><xsl:value-of select="/rss/channel/title"/> Web Feed</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        </head>

        <body>
            <xsl:for-each select="/rss/channel/item">
                <p><xsl:value-of select="title"/></p>
            </xsl:for-each>
        </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

Simplest XSLT file displaying list of posts

Not particularly impressing, but it works.

Our point of interest is inside <body> tag where we use XSLT to walk through every <item> tag inside RSS file and display it with simple <p> tag.

It's not extremely useful but should give you the idea how to display items from RSS feed. But let's turn them into actual links and prettify a little. Let's rewrite the contents of a <body> tag like that:

<h1>All posts</h1>
<xsl:for-each select="/rss/channel/item">
 <section>
  <h3>
   <a target="_blank">
     <xsl:attribute name="href">
             <xsl:value-of select="link"/>
     </xsl:attribute>
     <xsl:value-of select="title"/>
   </a>
  </h3>
  <p id="pubdate"><xsl:value-of select="pubDate"/></p>
  <hr/>
 </section>
</xsl:for-each>

Actually usable RSS feed with basic XSLT formatting

Now this is something actually usable.

You can take it from here. Add a <style> tag and unleash your creativity. Add more info on the page, for example, explain what this page means and how to use RSS feeds for users who aren't actually familiar with the technology.

How to add XSL support to BSSG

I use Stefano Marinelli's amazing BSSG static site generator to build this site. As far as I know, it doesn't support XSLT out of the box, but it's written in bash, so we can easily add it.

Just open scripts/build/generate_feeds.sh file around the line 86 and add a line about XSLT file. Like that:

# Create the RSS feed header
cat > "$output_file" << EOF
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet href="rss.xsl" type="text/xsl"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">

That's it.

Here's how my RSS feed looks like now. You can just open it in your browser, but I'll post here a screenshot because when you start playing with CSS, it's hard to stop. Who knows how it would look in the future!

Remember the step about unleashing your creativity? Yeah, I skipped that...

Credits

This post is built upon Ricardo Lopes' post «Styling Your RSS For a Better Web» which in turn is inspired by:

Pretty RSS Feeds by Brandon Rozek, which was inspired by
pretty-feed.xsl by Matt Webb, which in turn was inspired by
How to style RSS feed by lepture.

I don't know a thing about XSLT and still managed to build half-decent RSS feed with just the vim and a couple of good articles.

Do better.

Create better Web.