Infinite canvas — how it works
Everything lives on one endless surface. Click a tool, then click the canvas. Press ? any time.
Moving around
Move around✋ tool H
Zoomscroll
Move left / rightShift + scroll
Move any directionCtrl + scroll arrow keys
Move aroundSpace + drag middle-drag
Swap what scrolling does🔍 button, top right
Zoom to fitShift + 1
Reset viewShift + 0
Box-select several itemsdrag empty space
Select toolV
Adding & removing
New note, fastest waydouble-click empty canvas
Delete one itemhover it, click ×
Delete everything selectedDelete
Creating
Sticky noteN
TextT
Mindmap nodeM
Rectangle / ellipseR O
Pen / eraserP E
Code that runs
New code blockC </> button
Run it▶ Run Ctrl + Enter
Re-run as you typetick “auto”
Ready-made examplesExamples
Move the blockdrag its top bar
Your canvases
Open the canvas list☰ top-left
Start a fresh canvas+ New
Pin / rename / delete onehover a row
ConnectorA
Embed a linkCtrl + K
Add image / video / audiodrag & drop 📎 button
Paste a pictureCtrl + V
Mindmap
Add child of selected nodeTab
Add siblingEnter
Re-tidy the tree⌗ button
Editing
Edit textdouble-click
Play / interact with mediadouble-click
Paste a link on its ownbecomes a player
Link two thingsdrag the blue dot
Multi-selectShift + click
Menu of everything for an itemright-click it
Copy / paste / duplicateCtrl+C Ctrl+V Ctrl+D
DeleteDelete
Undo / redoCtrl+Z Ctrl+Shift+Z
Select allCtrl+A
🎙 YouTube embeds and the microphone
Two things need this page to be served by a web address rather than opened from your hard drive: YouTube/Vimeo playback (they check where the page came from, and a file has no address — that’s the “Error 153”) and the microphone. Your own video and audio files, images, drawing and everything else work either way. To unlock both, run the start-canvas.bat file that sits next to this one — or do it by hand:
- Export your board first with ⤓ — the next step is treated as a different site, so it starts empty.
- Open a terminal in the folder holding this file and run
python -m http.server 8000
- Visit
http://localhost:8000/infinite-canvas.html and load your board back with ⤒
Your board — videos and all — saves itself in this browser as you work.
Use ⤓ to export one portable .json file with the media packed inside, and ⤒ to load it back.
How to use Infinite Canvas
- Double-click empty space to drop a note, or pick a tool from the bar at the bottom (sticky note, text, mindmap node, rectangle, ellipse or pen) and click the board.
- Link ideas by dragging the blue dot on an item onto another item. Select the connector to make it an Arrow, Plain or Dashed line, or give it a Label.
- For a mind map, place a mindmap node, press Tab for each child and Enter for each sibling, then press ⌗ to tidy the layout.
- Already have notes? Press ▤ Build, paste an indented outline, choose Mindmap, Sticky notes or Flow / steps and press Generate.
- Drag in images, video or audio, or press Ctrl + K to embed a YouTube, Vimeo or Loom link.
- Select anything to open the side panel, where you can change its colour, text size and layer order, duplicate it or give it an animation.
- When you are done, press ⤓ to keep a .json copy or 🖼 to save the board as a PNG image.
Tips for better boards
- Export a backup now and then. The board lives in this browser, so a .json file is your only copy if browser data is cleared or you change computers.
- Give each project its own canvas. Open ☰ and press + New, or tick “Put it on a brand-new canvas” in the Build box, so unrelated work does not crowd one board.
- Write the outline first. Build understands indentation and
# headings, and accepts bullets, numbers and dashes, so a list copied from your notes app usually works as it is.
- Keep a board compact before exporting a PNG. The image covers everything on the board, so stray items far away add empty space around your work.
- Swap the scroll wheel if it fights you. Scrolling zooms by default. The ⇅ button at the top right switches to scroll-to-pan, with Ctrl + scroll to zoom.
- Animate a walkthrough. Choose a movement such as “Travels to a point” or “Fades in” and an effect such as “Breathing” in the Animation row, set the Strength, then press ▶ in the top bar to play every animation on the board.
Who it is for
Students use it to map out a topic before revising, teachers to lay out a lesson with videos beside the notes, and small teams to sketch a plan or process flow. Code blocks (C) let you write a little HTML or JavaScript and watch it run on the board, which makes the canvas handy for coding lessons too.
Where is my board saved?
In this browser on this device. Boards are kept in the browser's own storage as you work, with no account and no copy on our servers. Clearing site data, using a private window or switching to another browser starts you with an empty list, so export anything you want to keep.
Can I move a board to another computer?
Yes. Press ⤓ or Ctrl+S to download the board as a .json file, which packs your images, video and audio inside it. On the other computer, open Infinite Canvas and press ⤒ to load the file.
What does the PNG export include?
The whole board, not only what is on screen, on a white background and up to 6,000 pixels on each side. Notes, shapes, text, connectors, drawings and images are drawn in; embedded players such as YouTube videos are left out.