Josh Demo

View HTML (demonstrates Josh's HTML side)

Hello. You are viewing a normal HTML file which includes a special Javascript file: josh.html. I call it a "Josh" because it is at once valid JavaScript and HTML. Josh is a design pattern.

Run Josh from a script tag and it behaves as Javascript, i.e.: <script type="text/javascript" src="josh.html"></script>. josh.html decorates this message and adds behaviour to the button above.

View Josh in your browser and it behaves as HTML. Josh is a regular web document or web app, just like any other HTML file. View josh.html.


I wanted a way to have a file, and a Javascript exposure of the data in that file. The data in the file could then be accessed using On-Demand Javascript, bypassing cross-domain restrictions.

You could also use Josh to ship a Javascript library with HTML documentation, all in the one file.

I am keen to explore how Josh can benefit TiddlyWiki. A Tiddlywiki is already a single file that acts as both documentation and a kind of database; it would be fantastic if every Tiddlywiki file on the web automatically exposed its data via a JSON API.


Well, open up josh.html, view source, and see for yourself. The trick is to make HTML clients think they're viewing HTML and Javascript clients think they're viewing Javascript. In simple terms, we do this by putting HTML comments around the Javascript and Javascript comments around the HTML.

I tried some more complicated things initially, like pushing body text out (the Javascript) 10,000 pixels. Then I discovered that all of the major browsers let you use HTML-style comments (<-- -->) inside Javascript.


Michael Mahemoff @ Osmosoft.