Skip to main content
The Forme VS Code extension gives you a live PDF preview, a component tree with hover-to-highlight, and an inspector panel with box model visualization, all inside your editor.

​
Install

Search for “Forme PDF Preview” in the VS Code Extensions view, or install from the Marketplace.

​
Preview

Open a Forme template and run Forme: Preview or Forme: Preview to Side from the Command Palette. The extension previews every framework Forme supports, identically — same component tree, inspector, and overlays:
  • React / Preact — a .tsx/.jsx file importing @formepdf/react or @formepdf/preact
  • Svelte — a .svelte file importing @formepdf/svelte
  • Vue — a .vue file importing @formepdf/vue
  • Python — a .py script that writes PDF bytes to stdout
  • HTML — any .html document (run the command once to opt in)
Framework files are detected automatically by their import signature. The compiler and runtime are resolved from your workspace, so the versions always match your project — install the framework you author in (npm install svelte, vue, etc.) and previewing just works. The preview updates automatically when you save. Toggle debug overlays (layout, margins, breaks) from the toolbar.

​
Component Tree

The sidebar shows a tree of every element on every page. Hover over a tree node to highlight the corresponding element on the canvas. Click to select it and open the inspector. Click an element directly on the canvas to select it in the tree and inspector.

​
Inspector

The inspector panel shows:
  • Box model diagram with margin, border, and padding values
  • Computed styles grouped by category (sizing, spacing, typography, background, etc.)
  • Open in Editor button to jump to the source location
  • Copy Style button to copy the element’s style as a JSX object

​
Auto-Open

Enable forme.autoOpen in VS Code settings to automatically open the preview when you open a Forme template file.

​
Commands