Building Reactive web content

Reading is an active process. Weather you are reading a web page, a book or any other media, the information tends to generate ideas in the mind of the reader. An active reader asks questions, considers alternatives, questions assumptions and analyses the argument of the author. An active reader doesn’t passively store up information, but uses the author’s arguments to create a framework to further up his ideas and understanding.

As far as the content of the written page was concerned reading was a static thing; until the arrival of the electronic media. Take the following paragraph as an example.

When you eat 7 cookies, and a cookie contains on average 50 calories, you will consume around 350 calories.

So if on average you require 300 calories to survive daily, you are eating an excess of 50 calories.

This is a static text and before the web this was all you could get. But with interactivity easily achievable with JavaScript and other tools we could easily convert the above text content to a ‘Reactive Document’.

A Reactive Document allows the reader to play with the author’s assumptions and analysis, and see the consequences of any changes. Now take the above paragraph and convert it to a reactive format as given below. You can change the values of the underlined text by dragging them left or right.

Notice how the consequences of your adjustments are reflected in the above paragraph. The reader can explore alternative scenarios, understand the results of his actions, and come to a generally deeper understanding of the content.


The Reactive Document was implemented using the Tangle library by Bret Victor. The idea is somewhat along the lines of Wolfram’s Computable Document Format (CDF).

Although technically it is a simple MVC implementation in JavaScript; conceptually it lets you add a interactive dimension to your web pages in a quick and easy manner.

1 Response

  1. Mattledding says:

    Just a note on formatting the cookie example: maybe you should make sure that the negative sign remains with the number. (by forcing a line break?)

    Otherwise it can confuse the information.

    Nice post on a great idea, though.