LightweightWhiteboard:Files and Saving

A board is stored as a single image file. There is no separate project format and no layers. What you see on the board is what is saved.

The .whiteboard format

A .whiteboard file is a normal PNG image with a different file extension. VS Code opens these files in the board automatically.

• To view a board in another program, copy or rename it to .png.
• You can also rename a PNG to .whiteboard to open it in the board by default.
• In version control the file behaves like any other PNG image.

The size of a board is the size of its image. A new board gets the size from vscWhiteboard.defaultWidth and vscWhiteboard.defaultHeight (default 1920 × 1080 pixels). The size of an existing board cannot be changed in the board. See Commands and Settings.

Editing PNG files

The extension has a second editor, Whiteboard (edit PNG), for normal .png files. It is not the default, so PNG files still open in the VS Code image preview. To draw on a PNG:

1. Open the PNG.
2. Run View: Reopen Editor With... from the Command Palette, or right-click the file in the Explorer and choose Open With....
3. Choose Whiteboard (edit PNG).

It works exactly like the normal board. Saving overwrites the PNG file.

• Transparent areas are shown with a checkerboard and stay transparent until you draw on them.
• The eraser and Clear board paint white, they do not restore transparency.
• The board encodes the image again when you save. Extra data stored in the original file, such as text metadata, may not be kept.

Other image formats such as JPEG cannot be opened as a board. You can insert them into a board instead. See Images.

Saving

Every change marks the file as modified, like in a text editor.

• File → Save (Ctrl+S) writes the board to the file.
• File → Save As... writes it to a new file. The content is always PNG, whatever name you choose.
• A new board from Whiteboard: New Whiteboard has no file yet. Saving it opens the save dialog. If a folder is open, the dialog starts in the first workspace folder with the name whiteboard-1.whiteboard (or the next number).

If the board does not answer within 30 seconds while saving, VS Code shows the error The whiteboard did not respond in time. and the file is not written.

Revert

File → Revert File reloads the board from disk. All unsaved changes and the undo history are discarded. Reverting a new, unsaved board makes it blank again.

Unsaved boards and hot exit

Unsaved boards take part in the VS Code backup. If you close VS Code with unsaved boards and hot exit is enabled (VS Code setting files.hotExit), the boards come back with their changes on the next start. This also works for new boards that were never saved.

Tabs

• A board can only be open in one editor at a time.
• A board keeps its state while its tab is in the background, including a floating image and the undo history.

Files that cannot be read

If a file is not a valid image, the board shows a blank board with the default size and the message The file could not be read as an image. Saving will overwrite it with the board shown here. This message stays until you close it. Do not save if you want to keep the original file.