vscode-ui-sketcher

What is vscode-ui-sketcher?

vscode-ui-sketcher is a Visual Studio Code extension (with a webview component) for drawing UI projects to life. The repository positions the tool around turning UI design work into something interactive and shippable within a VS Code workflow.

The project is open source and includes both the VS Code extension and a separate webview app. It also references drawing inspiration from tldraw and a UI drawing headstart from draw-a-ui.

Key Features

• VS Code extension project for UI sketching: provides an in-editor way to draw UI ideas as part of a typical VS Code workflow.
• Webview-based editing experience: the extension includes a dedicated ui-sketcher-webview package, indicating the drawing UI runs in a webview.
• Reproducible development setup with pnpm: includes instructions for installing dependencies (pnpm install) and building the webview (pnpm build or pnpm build --watch).
• Debugging support via VS Code debugger: the repository explicitly recommends using the VS Code debugger to run the extension.
• Browser-based webview development: developers can run the webview directly (pnpm --filter ui-sketcher-webview dev) and open the local URL http://localhost:3174.
• Open-source licensing (AGPL-3.0): the repository includes an AGPL-3.0 license file, which is relevant for how the code can be used and redistributed.

How to Use vscode-ui-sketcher

1. Install the extension from the Visual Studio Marketplace (or search for “UI Sketcher” in the Extensions tab).
2. Open the extension and follow the on-screen workflow for drawing your UI project (the README and extension README are referenced in the repository, but the detailed in-product steps are not included in the provided page content).
3. If you’re contributing or developing: clone the repo, install dependencies with pnpm install, then build and run the extension using the provided ui-sketcher.code-workspace development setup.
4. For webview work: run pnpm --filter ui-sketcher-webview dev from ./ui-sketcher-webview and open http://localhost:3174 in your browser.

Use Cases

• Sketching a UI in VS Code while iterating on layout: use the extension to draft interface structure without leaving the editor.
• Developing or customizing the drawing experience: contributors can work on the ui-sketcher-webview package and view changes via the local browser URL.
• Debugging extension behavior in the editor: use the VS Code debugger to run the extension and investigate issues.
• Building and watching the webview during development: run pnpm build --watch when you want fast feedback while working on the webview.
• Learning from an open reference implementation: the repository structure (extension + webview packages, workspace file, and build instructions) can serve as a starting point for similar VS Code drawing tools.

FAQ

Where do I install vscode-ui-sketcher?

Install it from the Visual Studio Marketplace, or search for “UI Sketcher” in the Extensions tab.

Is there separate webview code I can run during development?

Yes. The repository documents running the webview with pnpm --filter ui-sketcher-webview dev and opening http://localhost:3174.

How do I build the extension or webview from source?

The page content states that you can run pnpm build (or pnpm build --watch) from ./ui-sketcher-webview. It also indicates you should “Only work from the ui-sketcher.code-workspace file” for development.

What license is the project under?

The repository lists the AGPL-3.0 license.

Alternatives

• General-purpose UI diagramming tools: tools that focus on drawing or diagramming (often with export features) can replace sketching workflows, but they may not be integrated into VS Code.
• Other VS Code extension approaches for design-to-code: extensions that target UI generation or mockups can serve similar goals, though workflows and rendering/export options will differ.
• Web-based collaborative whiteboards/design canvases: if you need browser-based drawing rather than an editor-integrated workflow, a web drawing canvas can be an alternative, with less emphasis on VS Code project context.
• Diagramming/flow tools: for users who primarily need structure over pixel-level layout, diagram tools can provide a simpler documentation-first workflow compared with a UI sketching canvas.