Take high-fidelity, side-by-side visual notes, architectural sketches, and flowcharts directly alongside your active code editor in VS Code.

FileSketch provides a persistent, file-specific infinite whiteboard that automatically switches and saves with your files — without cluttering your workspace.

🌟 Key Features

File-Specific & Workspace-Preserving No clutter! Your sketches are automatically mapped to individual code files. Switching files instantly swaps your canvas context without creating extra .png or .json files in your active workspace directory.
Infinite Whiteboard (Zoom & Pan) Scale your board infinitely. Zoom in/out with Ctrl + Scroll, and pan around by holding Spacebar + Drag (Figma-style) or using the Hand tool.
Figma-Style Multi-Selection & Resizing Switch to the Select Tool (↖️) to select elements. Hold Shift to select multiple elements, or Ctrl + A to select all. Drag the bounding box's circular corner handles to scale individual elements with mathematically precise uniform scaling.
Clipboard Support (Copy/Cut/Paste) Easily duplicate your sketches. Use Ctrl + C to copy or Ctrl + X to cut single or multiple selected elements, and Ctrl + V to paste them anywhere on the board.
Flexible Deletion Delete a single element by selecting it and pressing Delete, or use the Eraser tool for quick swipes. Multiple selected elements can also be deleted all at once.
Dynamic Text Editing Click to type any text. Double-click on any existing text using the Select Tool to edit its content in-place, dynamically.
Sleek Vector Engine Every pencil stroke, shape (including sharp, pointy arrows), and text box is stored as a lightweight vector element. Drawings render beautifully at high-DPI on Retina/4K displays.
Continuous Drag Eraser Swipe across drawing strokes with a dynamic eraser cursor that adapts to your brush size, making cleanup quick and effortless.
Unlimited Undo/Redo History Complete peace of mind with an infinite history stack. Accidental "Clear Board" actions or deletions can be instantly reverted, with no limits.
Ultra-Compact Dual-Column Toolbar A beautifully optimized, ultra-thin vertical panel that fits comfortably even when your terminal is fully open.

⌨️ Advanced Keyboard Shortcuts

Efficiency is key. FileSketch supports standard design-tool hotkeys:

Action	Shortcut (Windows/Linux)	Shortcut (macOS)
Select / Move Tool	`S`	`S`
Hand / Pan Tool	`H`	`H`
Pen Tool	`P`	`P`
Eraser Tool	`E`	`E`
Text Tool	`T`	`T`
Pan Board	`Spacebar + Drag`	`Spacebar + Drag`
Zoom In/Out	`Ctrl + Wheel Scroll`	`Cmd + Wheel Scroll`
Multi-Select	`Shift + Click`	`Shift + Click`
Select All	`Ctrl + A`	`Cmd + A`
Copy	`Ctrl + C`	`Cmd + C`
Cut	`Ctrl + X`	`Cmd + X`
Paste	`Ctrl + V`	`Cmd + V`
Delete Selected	`Delete` / `Backspace`	`Delete` / `Backspace`
Undo	`Ctrl + Z`	`Cmd + Z`
Redo	`Ctrl + Y` / `Ctrl + Shift + Z`	`Cmd + Y` / `Cmd + Shift + Z`

⚙️ How It Works (Behind the Scenes)

FileSketch is engineered to protect your privacy and project integrity:

Zero Cloud Uploads — Your notes are stored 100% locally.
Local Application Storage — Notes are serialized into lightweight JSON arrays mapped to file hashes in VS Code's secure globalStorageUri directory.
DPI-Aware Canvas — Autodetects high-DPI monitors and scales the backing store automatically to prevent low-pixelated text or blurry lines.

🛠️ Manual Installation (VSIX)

If you downloaded the .vsix package manually:

Open VS Code.
Go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X).
Click the Views and More Actions (...) menu button at the top-right of the Extensions panel.
Select Install from VSIX...
Locate and select your filesketch-1.0.0.vsix file.