Artlung Rosetta

Several Versions

Open each of the following five pages in browser tabs. The HTML source code of the page should be identical. The way the items look and interact when you click or hover over them should be equivalent. Each one loads a different JavaScript library. On each page, the implementation code loads into the bottom of the page as plaintext.


Artlung Rosetta is intended as a tool to explore the syntax of JavaScript libraries. Basic page manipulations, adding, showing, hiding content, appending text and html, adding events, etc.

Since learning a new syntax can be daunting, a "Rosetta Stone" would be helpful to compare and contrast code from the syntax of a library you know, versus a library you don't know.

How to compare

My suggestion is to open each page in a different tab in your browser and editor and watch the interactions. The source code for the main script will load at the bottom of the page, compare and contrast the code from page to page. If anyone has a better idea as to how to document these differences I'm all ears. Perhaps it would be better to have individual pages with each kind of action, but I think having all the syntax for a single HTML page aids learning. Again though, I'm all ears.

Other resources

Creator: Joe Crawford @artlung

Hosted on GitHub at