Takahē — a guide for web devs

Takahē is a client-side framework which lets you create a site using XSLT. It doesn’t require a database or any server-side language. You can use the Takahē GitHub documentation as a quick-start for your own site. Change the global XML file, and start creating content.

XSLT and Takahē share features with other technologies

Some other web development technologies have their equivalent in XSLT and Takahē:

Web components

At the time of writing, web components and the Shadow DOM are not yet ready to be used natively. But using Takahē, you could add markup such as this:

<youtube id="i7mrZ_JsA8A"/>

… and transform it into this:

<iframe width="900" height="506" src="https://www.youtube.com/embed/i7mrZ_JsA8A" frameborder="0" allowfullscreen=""></iframe>

While this doesn’t have all of the advantages of web components, it allows large chunks of complicated markup to appear only once in a global XSLT file.

Individual page templates

By “templates”, I mean “layouts for individual web pages”. XSLT uses the word “template” to mean discreet chunks of code.

React-like updating

Client-side XSLT is not currently asynchronous. However, assuming that the global XML and XSLT files are in the browser cache, Takahē only sends the minimum data required to build each page.

A single page in Takahē consists of an XML file which contains:

  • The page’s metadata (inherited from a global file, if missing)
  • Which page layout template to use
  • The page content (in multiple panels, if required)

This is the XML file which is sent to the client. All the other navigation — crumb trail, main navigation, mega-menus, sub-navigation, footer navigation — is all generated at runtime from one global XML file (hopefully pulled from the browser cache).

Separation of concerns

HTML and XHTML pages have to serve both the content and the surrounding “mantelpiece” of header, footer, navigation etc. Client-side XSLT keeps the page content in one place, the page template in another, the navigation data in a third place and the logic which builds the navigation in a fourth place.


You can use any markup you like, and it will appear on the page, unchanged. Takahē also doesn’t impose any extra markup on your page, in order to work.

Many of the benefits of a static-site generator, but without the faff

Takahē doesn’t require Node. You don’t need to install anything (other than a text editor). You won’t look at a command line.

Here’s what you need to know, to work with Takahē:

  • XML
  • HTML
  • XSLT (this is the difficult one)


Takahē can replace individual chunks of XML with more complicated markup, using what in XSLT are called templates. Here’s three examples of templates which come built in to Takahē:

  • A frequently asked questions template, which generates jump links and panels of content
  • A template which produces a tooltip
  • A jargon template which generates <abbr/> tags and saves me having to type the value of the title attribute each time (useful, when you need to type HTML, XML, XSLT, CSS etc.)

I’m sure you could imagine a scenario where there is a frequently-asked question, inside of which you need to use a tooltip, inside of which you use an acronym. Indeed this exact set of circumstances happens on the Takahē documentation site.

Takahē is built so that such chunks of content XML can be nested as deep as you require. The resulting markup will be nested inside each other.

What’s XSLT?

XSLT is a language which lets you take data (usually, but not always, in the form of XML) and transform it into another form (this could be HTML, XHTML, SVG, PDFs, PostScript or even a different form of XML). It’s like a very powerful form of find-and-replace, with logic to control what to do at every stage. I like it.

XSLT’s weird though, right?

Yes, XSLT is weird. It looks like HTML got some ideas above it’s station or was promoted above its paygrade. Technically, its declarative, rather than imperative. This means that where as in an imperative language, you might say exactly how you want to find a piece of data — for example:

j = [];
for (i = 0; i < myArray.length; i++) {
if (i % 2 == 1) {

With a declarative language, you ask for the data, and don’t worry about how it got there:

<xsl:apply-templates select="i[position() mod 2 = 1]"/>

It also mixes markup with logic, in a way which catches in some people’s craw:

<xsl:when test="count(item) &gt; 2">
<xsl:for-each select="item">
<li><xsl:value-of select="."/></li>
<xsl:when test="count(item) = 1">
<p><xsl:value-of select="item"/></p>
<p>Sorry - I couldn't find any items.</p>

So if you’re used to JavaScript, it’s got a bit of a learning curve to it. Sometimes the logic is in the markup, sometimes it’s in the attributes. And it’s terrible at telling you when something’s wrong.

But client-side XSLT’s a dead language, isn’t it?

Support for client-side XSLT is pretty good, but is stuck in XSLT1. You can add support for XSLT 2.0 using JavaScript, but Takahē manages fine without it.

It’s true that XSLT does seem dangerously unfashionable right now. It doesn’t parse JSON. It doesn’t require JavaScript. And all of the XML needs to load, before the XSLT is parsed (but XSLT 3.0 may support this).

You’re not seriously expecting me to use this technology on a production website, are you?

Up until May 2016, Skechers were doing exactly that. Google managed to spider their site fine (Skechers have now switched to HTML5). Here’s a Swedish site which uses it instead.

Takahē is on GitHub. The files there are a site which also documents how to use Takahē.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.