Maintenance script: LightweightWhiteboard wiki

2026-10-20T21:29:58Z

LightweightWhiteboard wiki

New page

This page lists everything the extension adds to VS Code, taken from its <code>package.json</code>, and the keys that work on the board.

== Commands ==
{| class="wikitable"
! Command Palette !! Command ID !! What it does
|-
| <code>Whiteboard: New Whiteboard</code> || <code>vscWhiteboard.new</code> || Opens a new, unsaved board named <code>whiteboard-<n>.whiteboard</code>. See [[LightweightWhiteboard:Getting Started|Getting Started]].
|}

The extension adds no menu entries. To open a PNG in the board, use the built-in VS Code command ''View: Reopen Editor With...'' or ''Open With...'' in the Explorer context menu.

== Editors and file types ==
{| class="wikitable"
! Editor !! View type !! Files !! Priority
|-
| ''Whiteboard'' || <code>vscWhiteboard.editor</code> || <code>*.whiteboard</code> || Default. These files open in the board automatically.
|-
| ''Whiteboard (edit PNG)'' || <code>vscWhiteboard.pngEditor</code> || <code>*.png</code> || Option. Only used when you choose it with ''Reopen Editor With...''.
|}

The extension adds no languages. To open all PNG files in the board by default, you can use the VS Code setting <code>workbench.editorAssociations</code>:
<pre>
"workbench.editorAssociations": {
"*.png": "vscWhiteboard.pngEditor"
}
</pre>

== Settings ==
All settings are in the section ''Whiteboard'' of the settings editor.
{| class="wikitable"
! Setting !! Type !! Default !! Values !! What it does
|-
| <code>vscWhiteboard.customColors</code> || list of strings || <code>[]</code> || hex colors like <code>#1e90ff</code> || Your saved colors from the color dialog (''My colors''). Shared by all boards. See [[LightweightWhiteboard:Colors|Colors]].
|-
| <code>vscWhiteboard.defaultWidth</code> || integer || <code>1920</code> || 100 to 8000 || Width in pixels of new boards.
|-
| <code>vscWhiteboard.defaultHeight</code> || integer || <code>1080</code> || 100 to 8000 || Height in pixels of new boards.
|}

* The board writes <code>vscWhiteboard.customColors</code> to your '''user''' settings when you save or remove a color in the color dialog. Changes to the setting reach all open boards at once.
* <code>defaultWidth</code> and <code>defaultHeight</code> are read when a board is opened. They only apply to boards without an image: new boards, reverted new boards and files that could not be read. Existing boards keep the size of their image.
* The ranges are part of the setting definition. The settings editor warns about values outside the range. The board itself does not check them.

Example for <code>settings.json</code>:
<pre>
"vscWhiteboard.defaultWidth": 1280,
"vscWhiteboard.defaultHeight": 720,
"vscWhiteboard.customColors": ["#1e90ff", "#ff8800"]
</pre>

== Keyboard shortcuts ==
The extension adds no VS Code key bindings. The following keys only work while the board has the focus and you are not typing in a text field.

=== Tools ===
{| class="wikitable"
! Key !! Tool
|-
| <code>P</code> || Pen
|-
| <code>E</code> || Eraser
|-
| <code>L</code> || Line
|-
| <code>A</code> || Arrow
|-
| <code>R</code> || Rectangle
|-
| <code>O</code> || Ellipse
|-
| <code>T</code> || Triangle
|-
| <code>F</code> || Fill bucket
|-
| <code>I</code> || Pick color
|}

=== Other keys ===
{| class="wikitable"
! Key !! Action
|-
| <code>[</code> / <code>]</code> || Smaller / larger size
|-
| <code>Shift</code> (while drawing a shape) || Square, circle, equilateral triangle, lines in 45° steps
|-
| <code>Shift</code> (while resizing an image) || Ignore the aspect ratio
|-
| <code>Esc</code> || Cancel the stroke or shape you are drawing, or discard a floating image
|-
| <code>Delete</code>, <code>Backspace</code> || Discard a floating image
|-
| <code>Enter</code> || Place a floating image
|-
| <code>Space</code> + drag || Pan the view
|-
| <code>Ctrl</code> + mouse wheel || Zoom at the pointer
|-
| <code>Ctrl+V</code> || Paste an image from the clipboard
|}

=== Undo, redo and save ===
Undo, redo, save and revert are normal VS Code commands and use your VS Code key bindings, for example <code>Ctrl+Z</code> for undo and <code>Ctrl+S</code> for save.

{{LightweightWhiteboard Nav}}

LightweightWhiteboard:Commands and Settings - Revision history

Maintenance script: LightweightWhiteboard wiki