Push reveal.js notes into the console

This post is more than 2 years old.

I just read a great blog post by Christian Heilmann (Principal Developer Evangelist for MDN) about how you can use the detached browser console as a way to broadcast speaker notes in an HTML-based presentation: Browsers have a presenter mode: console.info() It's an incredibly simple and practical idea. His code was tied to the Shower presentation framework (a new one for me), but it took all of two minutes to repurpose it for reveal.js.

reveal.js has an event handler for slide loading called slidechanged. I added an event listener for that which checks the loaded slide for the notes class. If it finds it, I use the same regex as Christian and drop it into the console.

Here is a quick screenshot. Note that I have not detached the console for this shot. (Also - I just now noticed the horrible grammar in the notes. Since these were just for me, I'm not going to fix it. ;)

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Akash posted on 3/13/2014 at 9:53 AM


Did you add this code snippet to the reveal.js file?

Comment 2 by Raymond Camden posted on 3/13/2014 at 4:11 PM

No it was in my index.html file.

Comment 3 by Akash posted on 3/13/2014 at 4:34 PM

Thank you, this is extremely useful.

I have a lot of notes and for some reason notes.html isn't showing me the scrollbar.

Comment 4 by Phil Leggetter posted on 5/30/2014 at 12:26 AM

I've just tweaked the above code slightly to:

* Show the notes when the slides initially load by binding to the `ready` event
* Clear the console if their are no notes for the current slide

Reveal.addEventListener( 'ready', addNotesToConsole );
Reveal.addEventListener( 'slidechanged', addNotesToConsole );

function addNotesToConsole( event ) {
// event.previousSlide, event.currentSlide, event.indexh, event.indexv
var notes = event.currentSlide.querySelector(".notes");
if(notes) {
else {

Comment 5 by Raymond Camden posted on 5/30/2014 at 1:03 AM

Nice, thanks for sharing that Phil!