2D Editor
A flexible canvas for your VS Code workspace. Bring code, screenshots, webpages, and live checks together, then arrange them the way you think.
2D Editor is a VS Code extension with a React-powered, resizable canvas. Instead of bouncing between tabs, lay out the parts of your work side by side: keep a component next to its screenshot, watch a file while you edit, or pin a quick regex check to the canvas.
⚡ TL;DR
- Run it: open this project in VS Code, press F5, then click the 2D Editor activity-bar icon.
- Add things: open editor tabs, use the canvas toolbar, or drag files and folders from the Explorer onto the canvas.
- Make it yours: nodes move, resize, and remember their layout per workspace.
- Build the UI: it’s a React + TypeScript + Vite app in
webview/. The VS Code integration lives in src/.
✨ What you can put on the canvas
| Canvas item |
What it does |
| Open code tabs |
Shows open editor tabs as read-only code previews. Select Open on a node to return to its editor tab. |
| Screenshot folders |
Shows the images in a chosen folder. The folder is watched, so the preview updates as images are added, changed, or removed. |
| Monitored code files |
Pins selected files even when they aren’t open as editor tabs. Their contents update when the files change. |
| Webpages |
Embeds a webpage in a resizable node, with manual refresh and optional auto-refresh. |
| Regex checks |
Tests a regular expression against a selected code file and reports whether it matches. Toggle Negate to check for the opposite condition. |
Use the canvas controls to pan and zoom. Select a node to reveal its resize handles, then drag the node to rearrange your workspace.
🚀 Get started
Try the extension
Open this repository in VS Code.
Install dependencies and build:
npm install
npm run build
Press F5 to launch the Run React Side Panel Extension Development Host.
In the new VS Code window, click the 2D Editor icon in the Activity Bar.
Open a few files, then use the toolbar or drag files from the Explorer onto the canvas.
You can also open the canvas in a regular editor tab: run Open 2D Editor from the Command Palette.
Use the canvas
- Code tabs: open files in VS Code; their tabs appear as code nodes. Click Open on a node to focus its editor.
- Screenshots: choose Screenshots and pick one or more folders, or drag a folder from Explorer onto the canvas. Remove a folder node when you no longer want it monitored.
- Files to keep an eye on: choose Monitor code files or drag files from Explorer onto the canvas. Use Remove to stop monitoring a file.
- Webpages: choose Webpage, enter an address, and select Go. Use Refresh or choose an auto-refresh interval if you want it to reload periodically.
- Regex checks: choose Regex check, select a source file, and enter a JavaScript regular expression such as
TODO|FIXME. The node updates its match result as the source text or pattern changes.
- Arrange: drag nodes to position them; select one to resize it. Your node positions and sizes are saved for the workspace and restored next time.
Webpage support note
Webpage nodes use a local, read-only proxy managed by the extension. It supports BBC and YouTube domains, plus local file:///... HTML pages and files in the selected page’s folder. Other websites are not proxied. The proxy does not forward browser cookies or credentials; some sites may also restrict playback, sign-in, or embedded behavior.
🧠 How it works
Think of the app as two cooperating parts:
┌─────────────────────────────┐ typed messages ┌───────────────────────────┐
│ React webview │ ◀───────────────────────▶ │ VS Code extension host │
│ │ │ │
│ Canvas, nodes, UI, layout │ │ Files, tabs, watchers, │
│ and in-memory editor state │ │ workspace persistence │
└─────────────────────────────┘ └───────────────────────────┘
- The extension host gathers workspace data. It reads the open tabs and selected resources, watches files and screenshot folders, and owns workspace persistence.
- The webview renders the experience. React components turn that data into typed React Flow nodes on a pan-and-zoom canvas.
- The two sides communicate through typed messages. Shared message and data shapes are defined in
src/messages.ts. The webview sends actions such as “add a webpage” or “save these layouts”; the extension sends updated tabs, file contents, and node data back.
- Zustand holds the webview’s current state. Workspace data from the extension is separate from canvas-owned layouts and selection. Feature-specific builders derive React Flow nodes from that state.
- Layouts persist per workspace. New nodes get a default position; layout changes are saved after a short debounce and restored when the canvas opens again.
The webview is the presentation layer, not a second file-system client. When a feature needs VS Code APIs—like choosing files, watching changes, or persisting workspace data—send a message to the extension host rather than reaching for those APIs in React.
🎨 Frontend developer freedom
The canvas UI is a regular React app. You can reshape the experience without having to redesign the extension-host integration.
Start in the webview
Want another kind of card? Build a React node component, register it in webview/src/nodeTypes.ts, and add its data-to-node builder in webview/src/canvas/nodeBuilders.ts. Use the existing node components as examples for selection, resizing, and controls that shouldn’t start a canvas drag.
Keep the boundary clean
- UI and interaction: implement in
webview/.
- VS Code capabilities and workspace state: implement in
src/.
- The contract between them: update the shared types in
src/messages.ts, then handle the corresponding message on both sides.
- Node state: put extension-owned data in
webview/src/store/workspaceStore.ts and canvas-owned layout/selection state in webview/src/store/canvasStore.ts.
- Saved geometry: reuse the layout flow in
webview/src/hooks/useLayoutPersistence.ts and the extension’s workspace-state handling.
This separation lets you change the visual language, node layouts, and interactions freely while keeping VS Code-specific work behind a small, explicit message boundary.
🧰 Development
Requirements
- VS Code 1.105.0 or newer
- Node.js and npm
Commands
npm install
npm run build # Build the Vite webview and compile the extension
npm run build:webview
npm run compile
npm run typecheck # Type-check extension and webview
npm run lint # Lint the project
npm run package # Create a .vsix package
When you change the webview or extension, run npm run build and reload the Extension Development Host to pick up the new build.
Project map
.
├── src/
│ ├── extension.ts # VS Code activation and webview/provider orchestration
│ ├── fileResourceService.ts # Screenshot and monitored-file lifecycle
│ ├── nodeConfigurationService.ts # Webpage and regex node behavior
│ ├── messageValidation.ts # Runtime validation for extension/webview contracts
│ ├── messages.ts # Shared extension ↔ webview message and data types
│ ├── workspaceState.ts # Versioned, validated workspace-state access
│ └── webpageProxy.ts # Local webpage proxy
├── webview/
│ └── src/
│ ├── App.tsx # React app entry component
│ ├── components/ # Canvas and toolbar
│ ├── canvas/ # Feature node builders and composition
│ ├── bridge/ # Extension-message routing
│ ├── hooks/ # Extension bridge and layout persistence
│ ├── nodes/ # Canvas node components
│ └── store/ # Workspace and canvas Zustand state
├── vite.config.mts # Builds webview assets into dist/webview/
├── dist/webview/ # Generated webview build output
└── out/ # Generated extension JavaScript
Generated output in dist/webview/ and out/ is produced by the build; make source changes in webview/ and src/.
📦 Package the extension
npm run package
This creates a .vsix package that can be installed in VS Code.
📄 License
This project is released under the MIT License.
