Skip to main content


A drawing sketchpad for note taking on lecture slides or empty pages.


  • autoSave | boolean: controls whether the editor should save the current text to the local storage of the browser at a given time interval. Default: true.
  • feedbackButtons | boolean: controls whether to display feedback buttons on each slide. Default: false.
  • intervalTime | number: time between auto saves. Default: 10000.
  • hideInputButtons | boolean: controls whether to hide drawing and text input buttons. Default: false.
  • hideNavigationButtons | boolean: controls whether to hide buttons for navigating between pages. Default: false.
  • hideSaveButtons | boolean: controls whether to hide the save buttons. Default: false.
  • hideTransmitButtons | boolean: controls whether to hide buttons for transmitting user actions. Default: false.
  • brushSize | number: size of the brush to paint with. Default: 4.
  • color | string: color of the brush and texts. Default: '#444444'.
  • canvasWidth | number: width of the canvas element (in px). Default: 1200.
  • canvasHeight | number: height of the canvas element (in px). Default: 700.
  • fullscreen | boolean: controls whether to automatically resize the canvas to the width and height of the browser window. Default: false.
  • fill | string: if horizontal, fill all available horizontal space when drawing a PDF; if vertical, all vertical space is used to prevent y-axis overflow. Default: 'vertical'.
  • disabled | boolean: whether to make the component read-only and forbid drawing on the sketchpad. Default: false.
  • fontFamily | string: font family. Default: 'Arial'.
  • fontSize | number: font size. Default: 24.
  • nodes | object: components to be rendered on top of specified slides; keys should correspond to page numbers, values to the components. Default: {}.
  • noPages | number: initial number of pages. Default: 1.
  • pdf | string: link to PDF file for baked-in page backgrounds. Default: none.
  • showTutorial | boolean: show tutorial for the sketchpad on startup. Default: false.
  • dynamicallyHideButtons | boolean: controls whether to start hiding buttons when toolbar width is not sufficient (otherwise a new line will be started). Default: false.
  • transmitOwner | boolean: whether owner actions should be transmitted to other users in real-time. Default: true.
  • groupMode | boolean: controls whether all user's actions are transmitted to everyone else. Default: false.
  • style | object: CSS inline styles. Default: {}.
  • onChange | function: callback invoked whenever a new line element is drawn. Default: onChange() {}.


Live Editor
ReferenceError: Provider is not defined