Tableaunoir
An online blackboard 🖉 with fridge magnets 🌈🧲 for teaching, and making animations 🏃 and presentations ⎚. All of that in a lightweight user interface, and without coding.
Install / Use
/learn @tableaunoir/TableaunoirREADME
Tableaunoir is an <b>online collaborative blackboard</b> tool with <b>fridge magnets</b> available in <b>many languages</b>. "Tableau noir" means blackboard in French. Contrary to plenty of other collaborative boards on the Internet, with Tableaunoir you can create <b>interactive animations</b> via the use of <b>fridge magnets</b>. The full documentation is available here.
Screenshots
Tableaunoir has been designed to give lectures. Tableaunoir enables to easily divide your board in panels and navigate panel by panel.
<img src="./imgREADME/euclide.png" title="Screenshot of tableaunoir showcasing a course using colors etc" alt="Screenshot of tableaunoir showcasing a course using colors etc" height="300"/> <img src="./imgREADME/coursparcourslargeur.gif" alt="A small gif video showcasing the use of tableaunoir in a course on breadth-first search" height="300"/>Tableaunoir offers magnets, like fridge magnets. They are small images, numbers, texts. The user can add/move/delete magnets to create animations. The screenshot below shows the use of magnets when teaching algorithms in a computer science curriculum. In the examples below, magnets data in some data structure, nodes in some graph, etc.
<img src="./imgREADME/screenshot_tablet.jpg" title="Screenshot of tableaunoir showcasing the latest toolbar, magnets, texts etc" alt="Screenshot of tableaunoir showcasing the latest toolbar, magnets, texts etc" width="300"/><img src="./imgREADME/screenshot.png" title="Screenshot of tableaunoir showcasing magnets to illustrate sorting algorithms" alt="Screenshot of tableaunoir showcasing magnets to illustrate sorting algorithms" width="300"/> <img src="./imgREADME/screenshot2.png" title="Screenshot of tableaunoir showcasing magnets to illustrate graph algorithms" alt="Screenshot of tableaunoir showcasing magnets to illustrate graph algorithms" width="150"/> <img src="./imgREADME/screenshot3.png" title="Screenshot of tableaunoir showcasing magnets to illustrate B-tree algorithms" alt="Screenshot of tableaunoir showcasing magnets to illustrate B-tree algorithms" width="300"/> <img src="./imgREADME/simcitygraph.png" title="Screenshot of tableaunoir showcasing magnets to illustrate large graph algorithms, using Sim City icons for nodes" alt="Screenshot of tableaunoir showcasing magnets to illustrate large graph algorithms, using Sim City icons for nodes" width="300"/>
Features
We list the main features of Tableaunoir.
- Of course, you can draw and erase, with your mouse or a graphic tablet. You can draw shapes.
- Collaborate edit the same board at the same time (need a server for that),
- does not require an account
- Backgrounds: staffs for teaching music, grid, images and PDF documents
- You can also use kind of predefined fridge magnets that you can move on the board, to make animation e.g. for illustrating sorting algorithms, graphs algorithms etc (and even playing Go!).
- Create your own fridge magnets for interactive courses, by importing any image, or by transforming a part of the board (Ctrl + X).
- Color palette for chalk (
c, 7 colors black/white, yellow
, orange
, blue
, red
, pink
, green
),
- Draw interative graphs : vertices are magnets, labels of vertices and edges are handwritten but are updated when vertices are moved,
- Change the color of magnets' background,
- Load/Save the current board,
- Export in PNG or PDF,
- Add texts (
Enterand type), and move texts. Supports Markdown, code highlighting and LaTeX (using MathJax)! - Switch to a whiteboard instead of a blackboard, or any background color
- Change from right-handed (default) to left-handed cursor,
- Divide yourboard in half. Ideal for teaching. Add as many new half-board as you need, going right with
→and then left/right with←/→keyboard arrows, - Make slides, record animations. This can be used to prepare slides for a talk or for a video.
You can teach online by sharing the screen with Discord, Zoom, Teams, etc, or by sharing a link (need a server for that).
Videos
- Video in english: [https://www.youtube.com/watch?v=BtLaNBOuSHc]
- First video in french: [https://www.youtube.com/watch?v=P6_lhqiPBow] <img src="./photos/snapshot_from_1st_YouTube_video.png" alt="Showing the first image of the YouTube video https://www.youtube.com/watch?v=P6_lhqiPBow" width="200"/>
Examples of use
Give a lecture
Tableaunoir is used for teaching at ENS Rennes. The main advantage is that, by hiding the toolbar, the screen is fully black: there are no buttons that annoy or distract the students (in my personal use, I simply hide the toolbar). Tableaunoir is controlled by a graphic tablet and by the keyboard of the computer (7 keys!). It makes it very interactive compared to fixed slides.
<img src="./photos/tableaunoir_amphi.jpg" title="A photo showcasing the use of tableaunoir in a real course taught in an amphitheater (1/3)" alt="A photo showcasing the use of tableaunoir in a real course taught in an amphitheater (1/3)" width="300"/> <img src="./photos/tableaunoir_amphi2.jpg" title="A photo showcasing the use of tableaunoir in a real course taught in an amphitheater (2/3)" alt="A photo showcasing the use of tableaunoir in a real course taught in an amphitheater (2/3)" width="300"/> <img src="./photos/tableaunoir_amphi3.jpg" title="A photo showcasing the use of tableaunoir in a real course taught in an amphitheater (3/3)" alt="A photo showcasing the use of tableaunoir in a real course taught in an amphitheater (3/3)" width="300"/>
Share ideas
An idea to explain and share? Tableaunoir enables to write together on shared collaborative boards.
Draw pictures
Tableaunoir can simply be used to draw pictures: [https://team.inria.fr/erable/en/marie-france-sagot/blog/silly-things/]
Make slides for videos or presentation
Tableaunoir can also be used to build slides. See the documentation.
Commands for the Tableaunoir project
remove all node_modules and install back again
npm ci
Build everything to dist
npm run build
See linter warning/errors
npm run lint
Starts a local node server
npm run serve
Offline version
If you prefer to use an offline version, it is possible. You have to install Electron. Make sure to have compiled the project with npm run build. Then the application can be launched as follows (from the main directory):
$ electron mainElectron.js
Create your own tableaunoir server
In order to share blackboards, you need a server. For installing the server:
- In the server, first
git clone(and then latergit pull) the project. - Modify the
src/config.js. - Compile Tableaunoir (see above)
- Install Apache HTTPD to deploy
dist/index.html(other web servers might work too, but have not been tested). - Configure the server part, see
server/README.md. - Then
server/run.sh.
License
This software is open-source under the GPLv3.0 license.
Credits
Thank you to all contributors. Also thank you for your support. Thanks to INRIA/IRISA that provided a server for sharing boards from October 2020 to June 2025. A special thanks to Moustapha Kourouma who settled and maintained the server at INRIA/IRISA in Rennes, France.
Please find the list of the source of the images.
- Some pictures come from @nicholas-ochoa/OpenSC2K, an open-source clone of Sim City 2000.
- [https://openmoji.org/]
- Some CC0 icons from [https://www.svgrepo.com/]
- The sound of the chalk comes from [https://lasonotheque.org/detail-0541-craie-sur-tableau-noir.html]
- [https://upload.wikimedia.org/wikipedia/commons/3/38/Icon_pdf_file.svg]
- [https://pxhere.com/en/photo/1057578]
