Fabio Morreale

Senior lecturer


With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:

The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.

The plugin records all drawings made so that they can be play backed using the autoSlide feature or the audio-slideshow plugin.

Check out the live demo

The chalkboard effect is based on Chalkboard by Mohamed Moustafa.


Copy the file plugin.js and the img directory into the plugin folder of your reveal.js presentation, i.e. plugin/chalkboard and load the plugin as shown below.

<script src="plugin/chalkboard/plugin.js"></script>
<script src="plugin/chalkboard/customcontrols.js"></script>

        // ...
        plugins: [ RevealChalkboard, RevealCustomControls ],
        // ...

The following stylesheet

<link rel="stylesheet" href="plugin/chalkboard/style.css">
<link rel="stylesheet" href="plugin/customcontrols/style.css">

has to be included to the head section of you HTML-file.

In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that font-awesome is available. The easiest way is to include

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

to the head section of you HTML-file.


Mouse or touch



If the autoSlide feature is set or if the audio-slideshow plugin is used, pre-recorded chalkboard drawings can be played. The slideshow plays back the user interaction with the chalkboard in the same way as it was conducted when recording the data.


The plugin supports multiplexing via the multiplex plugin or the seminar plugin.


If the slideshow is opened in print mode, the chalkboard drawings in the session storage (see storage option - print version must be opened in the same tab or window as the original slideshow) or provided in a file (see src option) are included in the PDF-file. Each drawing on the chalkboard is added after the slide that was shown when opening the chalkboard. Drawings on the notes canvas are not included in the PDF-file.


The plugin has several configuration options:

The following configuration options allow to change the appearance of the notes canvas and the chalkboard. All of these options require two values, the first gives the value for the notes canvas, the second for the chalkboard.

All of the configurations are optional and the default values shown below are used if the options are not provided.

	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
    customcontrols: {
  		controls: [
  			{ icon: '<i class="fa fa-pen-square"></i>',
  			  title: 'Toggle chalkboard (B)',
  			  action: 'RevealChalkboard.toggleChalkboard();'
  			{ icon: '<i class="fa fa-pen"></i>',
  			  title: 'Toggle notes canvas (C)',
  			  action: 'RevealChalkboard.toggleNotesCanvas();'
    // ...



MIT licensed

Copyright (C) 2021 Asvin Goel