Canvas Text Layout Inspector

Canvas Text Layout Inspector is a VS Code extension that previews selected text with a deterministic canvas-based text engine. It is designed as a mini layout sandbox for inspecting wrapping, alignment, line boxes, overflow, and measurement data without relying on DOM text flow.

Features

• Command palette entry: Canvas Text Layout Inspector: Preview Text Layout
• Selected-text preview with full-document fallback
• Deterministic line wrapping built on CanvasRenderingContext2D.measureText
• Alignment modes: left, center, right, justify
• Debug overlays for line boxes and word boxes
• Overflow highlighting for words that exceed the width constraint
• Measurement labels in pixels
• Device presets for mobile, tablet, and desktop widths
• Export current layout as JSON from the webview

Project Structure

src/
  core/
    layout.ts
    measure.ts
    renderer.ts
    types.ts
  shared/
    contracts.ts
  webview/
    App.tsx
    canvasRenderer.ts
    index.tsx
    styles.css
  extension.ts

Development

npm install
npm run build

To run the extension in VS Code:

1. Open this folder in VS Code.
2. Run npm install.
3. Press F5 to launch the Extension Development Host.
4. Select text in an editor.
5. Run Canvas Text Layout Inspector: Preview Text Layout from the Command Palette.

Example Usage

Select this text in any file and run the command:

Canvas layout engines need deterministic line breaks. A word that is wider than the box should be surfaced as overflow instead of silently clipped.

Then try:

• Width: 375px
• Font Size: 28px
• Alignment: justify
• Debug boxes: on

Implementation Notes

• The core engine is reusable outside VS Code because layout calculation is isolated under src/core.
• Measurement is delegated to canvas, but line breaking and alignment are calculated manually.
• The webview uses React for controls and panel state, while the renderer remains canvas-first.
• Exported JSON includes the full layout result so it can be diffed or consumed by other tooling.