DevBoard Manual
DevBoard is a lightweight infinite canvas for developer thinking. Use it for system design, sprint planning, debug flows, feature mapping, and anything else that benefits from visual, spatial organization.
Everything runs in your browser. There are no accounts, no backend, and no data leaves your machine.
Boards are saved to localStorage and can be exported as JSON or PNG.
Quick Start
- Open DevBoard in your browser.
- Press S to activate the Sticky Note tool and click the canvas to place one.
- Double-click the sticky to type inside it.
- Press V to switch back to Select and drag nodes around.
- Use Ctrl/⌘ + S to save or go to Top Bar → Save JSON for a portable file.
Sticky Notes
Press S or click the sticky icon in the toolbar to activate the Sticky Note tool. Click anywhere on the canvas to place a new note.
Editing
- Double-click a sticky to open the text editor.
- Type your text and click outside to confirm.
- Press Escape to cancel editing.
Color
Select a sticky note and a color picker appears above it. Click a swatch to change the note's background color.
Resize & Move
- Drag the note to reposition it.
- Drag the corner handles to resize.
Shapes
Press R or click the shape icon in the toolbar. A sub-picker appears above the toolbar with four shape kinds:
- Rectangle
- Ellipse
- Diamond
- Triangle
Click the canvas to place the selected shape. Select a shape to open its Shape Toolbar where you can change:
- Fill color
- Stroke color and width
Text Labels
Double-click any shape to add a text label inside it.
Text Blocks
Press T to activate the Text tool. Click and drag on the canvas to define the width of the text block, then start typing.
Formatting
When a text block is selected, a toolbar appears with:
- Bold (Ctrl/⌘ + B)
- Italic (Ctrl/⌘ + I)
- Underline (Ctrl/⌘ + U)
- Bullet list
- Link
- Text color
Connectors
Press L to activate the Line tool. When active, anchor dots appear on the edges of stickies and shapes.
Drawing a Connection
- Click an anchor dot on the source node.
- Drag to an anchor dot on the target node.
- Release to create the connection.
You can also click on empty canvas to place free-floating line endpoints.
Line Styles
Select a connector to choose between:
- Bezier (curved) — default
- Straight
- Orthogonal (right-angle)
Arrowheads
The connector toolbar lets you toggle arrowhead styles on either end of the line.
Embedded Links
Link nodes let you embed URLs directly on the canvas as rich cards. They automatically fetch OpenGraph metadata (title, description, preview image, favicon) from the target page.
Placing a Link
Use the toolbar or context menu to add a link node. Enter a URL and DevBoard will fetch metadata to display a rich preview card with:
- Favicon and domain name in the header
- Page title pulled from OpenGraph or
<title>tag - URL shown below the title
Display Modes
Select a link node and use the "Turn into" dropdown in its toolbar to switch between modes:
| Mode | Description |
|---|---|
| Compact link | Shows favicon, title, and URL in a minimal card. |
| Embed preview | Expands to show the page description and OpenGraph preview image. |
| Text block | Converts the link into a plain text block with the title as linked text. |
Service Detection
DevBoard recognizes popular services and shows a colored accent stripe and service label for:
- GitHub, GitLab
- Jira, Linear, Asana, Trello
- Figma, Notion
- Slack, Discord
- YouTube, Stack Overflow
Unrecognized domains display the hostname and use the default indigo accent.
Editing a Link
- Double-click the title/URL area to edit the URL inline.
- Use the link icon in the toolbar to open the URL editor.
- Press Enter to confirm or Escape to cancel.
- Metadata is re-fetched automatically when the URL changes.
Toolbar Actions
When a link node is selected, the floating toolbar provides:
- Turn into — switch display mode or convert to text block.
- Edit URL — change the link target.
- Copy URL — copy the URL to your clipboard.
Select & Edit
Press V to switch to the Select tool (pointer).
- Click a node to select it.
- Click empty canvas to deselect.
- Drag a selected node to move it.
- Shift + click to add or remove nodes from the selection.
- Press Backspace or Delete to delete selected nodes.
Grouping
Select multiple nodes and use the context menu (right-click) to group or ungroup them.
Copy & Paste
- Ctrl/⌘ + C — copy selected nodes.
- Ctrl/⌘ + V — paste (offset by +28px each time).
- Ctrl/⌘ + D — duplicate (copy + paste in one step).
Pages
DevBoard supports multiple pages within a single board. Use the Pages panel on the left side to:
- Add new pages
- Switch between pages
- Rename pages
- Delete pages
Each page has its own canvas with independent nodes and camera position.
Export
Export as PNG
Click Export PNG in the top bar to download a screenshot of your current canvas. The export captures all visible nodes at the current zoom level.
Save & Load JSON
Save JSON exports your entire board (all pages, nodes, and settings) as a .json file.
Use Load JSON to restore a previously saved board.
Your board is also automatically persisted to localStorage under the key devboard-v1,
so it survives page refreshes.
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| V | Select tool |
| H | Pan tool (hand) |
| S | Sticky note tool |
| R | Shape tool |
| T | Text block tool |
| L | Line / connector tool |
| Backspace / Delete | Delete selected |
| ⌘/Ctrl + C | Copy |
| ⌘/Ctrl + V | Paste |
| ⌘/Ctrl + D | Duplicate |
| ⌘/Ctrl + Z | Undo |
| ⌘/Ctrl + Shift + Z | Redo |
| Space + drag | Pan canvas |
| Scroll | Zoom in / out |
| Escape | Cancel / deselect |