Monday, July 9th, 2007

Purple Include: Transclusions, you know you want them!

Category: JavaScript, Library

Don’t pigeon-hole Brad with Dojo Offline. He also just announced Purple Include, which is a client-side JavaScript library that allows you to do client-side transclusions. What the heck is a transclusion I hear you say? “A transclusion is the inclusion of part of a document into another document by reference”.

This means that you can include and display fragments of one HTML page in another without copying and pasting any content. For example, you could quote the second paragraph from another person’s blog entry by embedding something like:

  1. <hx :include src="!/p[2]" />

in your blog page. The expression following the explanation point in the URL is an XPath expression.

If the page you want to transclude has a fragment identifier or a purple number, you can transclude that directly:

  1. <hx :include src="" />

All of this is open source; and here are instructions on how to play with it, check out the Drupal usage, and you can look at a bunch of examples at work.

Brad uses some pretty interesting Ajax and JavaScript under the covers to power all this in a very small way.

Posted by Dion Almaer at 5:24 am

3.1 rating from 35 votes


Comments feed TrackBack URI

I don’t see the point of doing this. The traffic generated by this script is the same as a normal request (I know except javascript, css and images but those files usually cache so the gain is almost zero).

Comment by Florin — July 9, 2007

If you were interested in content that changes then this could be a pretty neat way of including it.

Search engines wouldn’t pick it up – which could be good in some situations but not in others…

A server side solution with appropriate caching may be a better bet.

Comment by wioota — July 9, 2007

Looks to me to just be a poor man’s server-side include.

Comment by Eric Anderson — July 9, 2007

Why implement this as a new element in its own namespace, rather than simply adding a SRC attribute to existing elements, as the W3C proposes for XHTML 2.0? It seems to me, a W3C-style implementation would allow for “fallback” content (where a network/server error prevents the include), which also provides nice degradation for non-JS browsers. And of course, should the draft recommendation ever make it to browser implementation, one wouldn’t have to go back and refactor all of one’s pages.

Comment by ARWolff — July 9, 2007

I think this is a neat idea, but wouldn’t the technique be more degradable (and indexable by search engines etc.,) if the item were just a regular old link pointing to a given anchor? – eg. a href=”whatever.html#foo”, perhaps with a class to identify it as content that should be retrieved. The anchor would then be replaced with the content in question. Then everybody wins! :)

Comment by Scott Schiller — July 9, 2007

I just wanted to highlight that this was a team effort. I built this with Jonathan Cheyer and Eugene Kim; used a significant amount of source code from Mark Nottingham; and borrowed some ideas from Gervase Markham.

How this is different from other stuff:

We built this as part of the HyperScope jam, held once a month; HyperScope is a project run by Douglas Engelbart, the guy that invented the mouse and first implemented hypertext, to explore new ideas in collaboration and hypertext tools. I actually helped to build the full HyperScope last year, which is at; since the full HyperScope is a bit heavy and hard to use, we were exploring smaller more point solutions that you can just pull into a normal web page, with very low learning overhead.

A transclusion is a way to build up a document by sucking in fragments of remote documents. This can be useful for lots of interesting things, such as annotation, tracking systems, and more.

How this is different than server-side includes: Server-side includes tend to be just for templating, where you pull in a header or a footer, for example. It also tends to only be for local documents on the web-server.

How this is different than an anchor: While you can do a Purple Include to suck in an anchor on to your page, we also wanted to handle scenarios where you can bring in arbitrary parts of remote documents, what we call Granular Addressability, independent of whether an anchor was placed there. This is why we chose XPath, since it is already in Firefox and made it easy to grab arbitrary remote nodes (I sure wish we had full XPointer support though; sigh).

Why use Ajax for this? Well, first off, our server-side requirements are very low because of this. The proxy is about 5 lines of code and is basic PHP, which is supported by almost every web-hosting provider in existence. Second, our future plans are to bring in other cool hypertext tools, such as Stretch Text, and grow this into more of a hypertext word processor (imagine something like a Wiki, but which augments your writing process in innovative new ways).

Also, why a new tag? Well, it’s much easier for me to deal with that then to have to scan every element in the document for a potential SRC attribute, which is a cool idea but which would probably seriously slow down page load. Perhaps I can use the JQuery/Dojo Query work being done to grab these elements in a faster way….

Next steps: we want to create a way to select text on an arbitrary web page, and then have this turn into a Purple Include. We will probably have to slightly extend Purple Include to do in-paragraph addressing:


Would indicate to jump to the anchor #foobar then move forward 5 words (5w).

Make sure to check out the HyperScope as well; we already have all sorts of cool, nifty hypertext in there that already works across the contemporary web, all open source and all shipping code. Here’s the HyperScope tutorial:

Brad Neuberg

Comment by Brad Neuberg — July 9, 2007

Florin: this isn’t created as an engineering optimization (i.e. to reduce traffic); it doesn’t matter that it causes the same amount of traffic as a JavaScript, CSS request, etc. It is a user-level piece of functionality to explore how new kinds of hypertext can increase how we collaborate.


Comment by Brad Neuberg — July 9, 2007

would definately be more interested if this was an unobtrusive extension which operates on a

Comment by ed — July 9, 2007

Bravo! This is amazing, thank you very much for sharing :)

Comment by Jonny M — July 22, 2007

This is the third time I’ve seen the ‘!’ character referred to as an “explanation mark”, and I can’t bite my tongue any longer… it’s “exclamation mark.”

Comment by jL — August 6, 2007

The Returnable Project allows the spawning of intuitive behaviour through ‘returnable elements’ – to make it easier to add html content added either explicitly or from a saved source.

Check it out at 8 )

Keep Clicking,
Bhasker V Kode

Comment by Bhasker V Kode — August 16, 2007

In Yahoo Media Player we have recently done something closely related — the ability to use any page on the internet as a playlist in any other page. We use a link marked with a class, which is the approach Scott Schiller advocated here. Syntax:

This is in the most recent unstable build, not the current public build . See for more info.

Comment by lucasgonze — January 26, 2008

My previous post got munged beyond recognition by the comment submission engine. Trying again, this time using HTML escaping in hopes of avoiding the munger.

The syntax is:
<a href=”http://page to use as a playlist” class=”playthispage” />

For more info:

Comment by lucasgonze — January 26, 2008

Leave a comment

You must be logged in to post a comment.