Skip to content
pbb.io/blog

TIL you can style Atom feeds with XSLT

January 10, 2024
2 min read
Elixir Phoenix

Add an <?xml-stylesheet?> processing instruction to your Atom feed pointing at an XSL file, and browsers will render it as styled HTML instead of raw XML.

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="/feed.xsl" type="text/xsl"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  ...
</feed>

The XSL template transforms the feed into HTML with inline styles:

<xsl:stylesheet version="3.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:atom="http://www.w3.org/2005/Atom">
  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes" />
  <xsl:template match="/">
    <html>
      <head>
        <style>
          body { font-family: sans-serif; max-width: 48rem; margin: 0 auto; }
        </style>
      </head>
      <body>
        <h1><xsl:value-of select="/atom:feed/atom:title" /></h1>
        <xsl:for-each select="/atom:feed/atom:entry">
          <a href="{atom:link/@href}">
            <xsl:value-of select="atom:title" />
          </a>
        </xsl:for-each>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

All modern browsers support it, and those that don’t just show the raw XML.

—

Back to posts

Elixir Phoenix
Phil-Bastian Berndt

Phil-Bastian Berndt
Tech Lead at Naymspace