HTML5 presentations are cool and convenient. They just work in the browser and thanks to CSS3 & JavaScript they can be made to look even better than the traditional slides. It's easy to link to individual slides. Also, demos (if you're showing something related to web technologies) can done on the slides itself. There are already couple of good frameworks such as Google's HTML5Slides, deck.js and impress.js to create HTML5 presentations.

However, in all above frameworks, you have to define the slides as HTML blocks (usually wrapped inside a div or a section ). It's fairly trivial; but you may feel editing the slides gets messy and verbose when you have dozens or more slides. Especially, if you are trying to put together a presentation in a rush (which you should try to avoid).

I felt the same while creating the presentation on Punch, which I recently presented at RefreshColombo. Then I realized Punch itself can be used to make the process of creating HTML5 presentations quick and painless.

This is what I did. Rather than adding the slides in to the HTML page, I created them in a separate JSON file. Here's how it was structured.