Wednesday, April 11th, 2007

JSLT: A JavaScript alternative to XSLT

Category: JavaScript, Library

Rik Arends has created JSLT, a pure JavaScript replacement for XSLT.

JSLT is a browser based templating language like XSLT, but instead of
using XML to encode the template logic, it uses normal Javascript with a
few extensions. You can transform XML with it or just template with
javascript variables. The JSLT processor parses the template using
a recursive tokenizing parser and generates javascript code for fast
dynamic (re-)execution. The general structure is:
templatetemplate{inline-xpath}template. All code is available
under the LGPL license.

You can visit a real-time example page that recompiles on each keystroke.

If you almost liked XSLT, and like JavaScript, maybe JSLT is for you.

Posted by Dion Almaer at 6:34 am

3.6 rating from 38 votes


Comments feed TrackBack URI

Maybe it’s just me, or the fact that I’m used to XSLT, but JSLT seems harder to read.

Comment by Ron — April 11, 2007

It depends how you format your JSLT. JSLT is actually ‘just plain javascript’ instead of constructs it does [if(x){]. So if you do a really simple XSLT jslt might look more complex because of the code-feel, but as you move ahead to more complex templates with string formatting, function reuse, macros with arguments, etc, the added value of JSLT will start to increase and will soon become far easier to read and maintain..

Comment by Rik Arends — April 11, 2007

I like the fact that you can extend the templatng language, because its basically javascript. I always hate those recursive solutions you need with XSLT and all those params tags. Also being able to reference JS variables, existing functions and executing regular expressions will be a relief.

Comment by Ruben Daniels — April 11, 2007

I can see where you’re going, Rik. Thanks for the insight. I can definitely see a benefit to using JSLT when getting into the realm of templates, variables, etc. I’ll need to play with this a bit.

Comment by Ron — April 11, 2007

Nice work, Rik! I’m working on a pure XSLT replacement for Javascript. There can be only one…. ;)

Comment by Ian — April 11, 2007

Interesting! How fast is it compared to XSLT?

Comment by cedric — April 11, 2007

Well JSLT is not a javascript XSLT implementation, but an ‘alternative’. A colleague of mine built a pure JS XSLT implementation to support safari ( However, if you are building the same thing as JSLT, bring it on :) JSLT parses/tokenizes all javascript-code and processes it for macros and language extensions recursively, maintaining proper nesting. I challenge you to beat that :)

Comment by Rik Arends — April 11, 2007

Well, JSLT seems to be fast enough. I have profiled and tuned the JSLT processor for optimal performance. It executes large templates fast enough for realtime updating. As you can see in the realtime parser example, the overhead is well within acceptable limits. Purely on execution, XSLT is faster because it is executed in C++ code and not in javascript. However JSLT allows you to do a lot of things you cannot (easily) do in XSLT, or that would require generating the XSLT with JS or otherwise doing pre or postprocessing. When the new Javascript runtime from Adobe gets implemented into the next firefox, JSLT should match or outperform XSLT in that engine because of the huge improvement in loop and string concatenation speeds.

Comment by Rik Arends — April 11, 2007

Cool, but the XSLT fragment is slightly wrong in the Ajaxian example. I think you want:

xsl:value-of select=”.”/


xsl:value-of select=”text()”/

yours would just output ‘text’ for each item.

Comment by Rob Koberg — April 11, 2007

Oh no sorry i dont see that error anywhere ;)

Comment by Rik Arends — April 11, 2007

anymore, you mean… I don’t think the wink quite does it. no biggie.

Anyway, does it cover everything is XSLT 1.0?

If you do XSLT 2.0, you would probably get a huge audience from XSLT folk since there is no browser based alternative. Of course it would be alot more work :)


Comment by Rob Koberg — April 11, 2007

Ah well i thought the ;) made it quite clear i just fixed the typo in the image :). On the topic of XSLT 2.0, JSLT supports a lot of features you can do with XSLT 2 such as using your output stream as an input and using multiple input and output streams. Also you can use JSLT to generate JSLT, although i dont see where that would be useful. JSLT is probably a bit low on features when it comes to DTD’s, namespaces, and other XML fancyness as it relies on the XML Dom available in the browser, so any feature restriction on that you will see in JSLT. However, as it is JS based, it is naturaly extendable with functions from within the template and by plugging extra macros in the JSLT processor. Debugging JSLT should be easy because you can just use a js debugger or output debug strings using a logger or do an alerts from within your template. I would love to hear some XSLT 2.0 features that people really need, so i can see if i can add that to JSLT.

Comment by Rik Arends — April 11, 2007

FYI, Google has a pure javascript XSLT engine available to everyone, it’s called AJAXSLT.

Comment by Rui Lopes — April 11, 2007

I think that dynamic instructions in XSLT have less impact with the HTML elements than JST. The mix of HTML elements and JS in JST looks like classic ASP and HTML in primitive web development with Microsoft platforms.

Comment by Maurício Fedatto — April 11, 2007

Definitely cool, but I think I still prefer to use jsonT:

Since most of the data we deal with on the client is json (so much easier and faster than mucking with xml)… jsonT is perfect.

Comment by Ryan Gahl — April 11, 2007

Ryan, JSLT supports JSON due to the fact that JSON is actually just JS. So you can write this in JSLT:
and with arrays (forarray is a language extension in JSLT):
[forarray(v in jsonobj.array){][%v][}]
However i dont have the json template/apply functionality yet to process a json object like XSLT works with templates. This i will add for a next version.

Comment by Rik Arends — April 11, 2007

With proper escaping the above examples should be:
[forarray(v in jsonobj.array){]<div>[%v]</div>[}]

Comment by Rik Arends — April 11, 2007

Leave a comment

You must be logged in to post a comment.