Skip to content

Instantly share code, notes, and snippets.

Last active May 4, 2022
What would you like to do?
How to make your own Xanadu demo

Twitter informed that a demo of Xanadu had launched, so I went to have a look. The demo only works in Firefox and it seems to be a cut down version of demos that I've seen Ted Nelson give in the past. But still: running code in the wild.

I met Ted Nelson once when we both spoke at an STM Innovations conference in 2006. I suspect he wouldn't have agreed with my much of my talk which looked at the web as a hypertext system and compared it with earlier approaches. My point of view was that we could bring those features back into the web by creating new services and by exploiting Javascript and web browsers to upgrade our experience of using the web. Evolution doesn't need to happen in a coordinated centralised way.

(When I say I met Ted Nelson, I meant that I shyly sat next to him at lunch while he expounded on various topics and fiddled with the tape recorder he was using to record all his conversations. So maybe, "met" isn't the right word (he won't remember me). Maybe "experienced" is better. Aaaanyway...)

Hypertext is something I'm eternally fascinated with so I was curious about the Xanadu demo. Especially as it was being delivered using Javascript to provide an in-browser experience. I was also interested in how easy it might be to create some new content for the OpenXanadu demo.

Turns out its really easy.

If you view source on the demo page there's a bunch of Javascript that bootstraps the Xanadu client.

The final Javascript file is called handleSource.js. This is the file that triggers Xanadu to open a data file.

The Javascript has been written to support loading content via a url parameter that points to a Xanadoc file. There's a specification for the file. There's also a fallback URL to a default Xanadoc file which is what the demo actually uses.

A Xanadoc file is a text file containing a list of URLs, which each have an encoding declaration, a character offset and length to read. It describes a compound document that is composed from these specific sections of other documents. The order of the sources in the Xanadoc file defines the flow of the document.

You can add a URL parameter to the demo but Cross Origin constraints will limit Firefox from loading your content. But if you serve it from a CORS enabled location it should work fine.

But that might be awkward for some people. So an alternative quick hack is to do this:

  1. Create your own copy of MoeJusteOrigins.html to bootstrap Xanadu. You can call it whatever you like, but change all the URLs to the Xanadu JS and CSS to be absolute links based at
  2. Create your own copy of handleSource.js. Tweak the default URL to your refer to your xanadoc file.
  3. Ensure that your Xanadoc file refers to your preferred content.

To avoid Cross Origin issues, put all the files on the same server. Ted should point people at the CORS documentation as that will avoid the need to route everything through his server.

Anyway. Curiosity satiated.

Copy link

nichtich commented Jun 7, 2014

Thanks for the practical introduction and historical notes. Modification of the demo to use some more "established" pointer/selector format - e.g. Open Annotation selectors - could actually make it something more connected to the current development of Web standards :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment