# How the Canvas View Rendering Mechanism Displays Generated UI Mockups and Wireframes

> Discover the canvas view rendering mechanism that uses react-zoom-pan-pinch, sandboxed iframes, and SVG lines to display UI mockups and wireframes securely.

- Repository: [Harold Martin/secure-design](https://github.com/hbmartin/secure-design)
- Tags: internals
- Published: 2026-03-03

---

**The canvas view rendering mechanism combines `react-zoom-pan-pinch` for navigation, sandboxed iframes with Content Security Policy injection for safe HTML/SVG display, and SVG connection lines to visualize component hierarchies.**

The `hbmartin/secure-design` repository provides a VS Code extension for visualizing AI-generated UI mockups. Its canvas view rendering mechanism for UI mockups and wireframes employs a layered architecture that balances user interaction with secure content isolation.

## Core Components of the Rendering Pipeline

### Zoom-Pan Container with react-zoom-pan-pinch

The entire canvas wraps inside `TransformWrapper` and `TransformComponent` from the **`react-zoom-pan-pinch`** library. This provides pinch-to-zoom, panning, and reset functionality while maintaining a stable coordinate system for underlying frames. The `transformRef` enables mouse coordinate transformation back into canvas space for drag-and-drop operations and connection line calculations.

See implementation in [[`src/webview/components/CanvasView.tsx`](https://github.com/hbmartin/secure-design/blob/main/src/webview/components/CanvasView.tsx)](https://github.com/hbmartin/secure-design/blob/main/src/webview/components/CanvasView.tsx) lines 1-15.

### DesignFrame Component with Iframe Sandboxing

Each design file renders inside a **`DesignFrame`** component that creates an isolated environment:

- **HTML/SVG Content**: The component generates an `<iframe>` with `srcDoc` set to processed file content. Processing injects a Content Security Policy meta tag, optional viewport meta tag, and a service-worker script for safe external image resolution.
- **Security Isolation**: This sandboxed iframe prevents generated markup from interfering with the extension's UI while preserving full mockup fidelity.
- **Rendering Mode**: Although `getOptimalRenderMode` could switch to lightweight placeholders when zoomed out, the current implementation deliberately **always returns `'iframe'`** to ensure users always see the exact generated UI.

See implementation in [[`src/webview/components/DesignFrame.tsx`](https://github.com/hbmartin/secure-design/blob/main/src/webview/components/DesignFrame.tsx)](https://github.com/hbmartin/secure-design/blob/main/src/webview/components/DesignFrame.tsx) lines 351-426 and [`CanvasView.tsx`](https://github.com/hbmartin/secure-design/blob/main/CanvasView.tsx) lines 101-105.

### ConnectionLines for Hierarchy Visualization

After placing `DesignFrame` components on the grid, the **`ConnectionLines`** component renders SVG lines between related frames. These lines visualize calculated hierarchy positions and render on top of the zoom-pan layer, maintaining correct alignment during user navigation.

See implementation in [[`src/webview/components/ConnectionLines.tsx`](https://github.com/hbmartin/secure-design/blob/main/src/webview/components/ConnectionLines.tsx)](https://github.com/hbmartin/secure-design/blob/main/src/webview/components/ConnectionLines.tsx) lines 1-20.

## Technical Implementation Details

The rendering pipeline relies on specific utility modules for layout calculations and type definitions:

- **[`src/webview/utils/gridLayout.ts`](https://github.com/hbmartin/secure-design/blob/main/src/webview/utils/gridLayout.ts)**: Calculates grid positions and hierarchy relationships
- **[`src/webview/types/canvas.types.ts`](https://github.com/hbmartin/secure-design/blob/main/src/webview/types/canvas.types.ts)**: Defines TypeScript interfaces for canvas entities

The following example demonstrates the zoom-pan wrapper implementation:

```tsx
<TransformWrapper
  ref={transformRef}
  minScale={currentConfig.minZoom}
  maxScale={currentConfig.maxZoom}
  wheel={{ step: 0.1 }}
  doubleClick={{ mode: 'reset' }}
>
  <TransformComponent>
    {/* Grid of DesignFrames */}
  </TransformComponent>
</TransformWrapper>

```

This example shows the iframe rendering path with security injections:

```tsx
if (file.type === 'html') {
  // Inject CSP, viewport meta, and service-worker script
  const modifiedContent = processHtmlContent(file.content);
  
  return (
    <iframe
      srcDoc={modifiedContent}
      title={`${file.name} - ${getViewportLabel(viewport)}`}
      style={{
        width: viewportDimensions ? `${viewportDimensions.width}px` : '100%',
        height: viewportDimensions ? `${viewportDimensions.height}px` : '100%',
        border: 'none',
        background: 'white',
        pointerEvents: isSelected && !dragPreventOverlay && !isDragging ? 'auto' : 'none',
      }}
      referrerPolicy='no-referrer'
      loading='lazy'
    />
  );
}

```

## Summary

- The canvas view rendering mechanism for UI mockups and wireframes combines three layers: zoom-pan navigation, sandboxed iframe content display, and SVG connection overlays.
- **`react-zoom-pan-pinch`** provides the navigation wrapper with coordinate transformation capabilities essential for drag-and-drop interactions.
- **DesignFrame** components render HTML and SVG mockups inside sandboxed iframes with injected Content Security Policies and service workers for safe external resource loading.
- **ConnectionLines** draws SVG hierarchy relationships on top of the zoom layer, maintaining alignment during navigation.
- The implementation prioritizes security and fidelity over performance, deliberately always using iframe rendering rather than lightweight placeholders.

## Frequently Asked Questions

### What library handles zooming and panning in the canvas view?

The canvas view uses **`react-zoom-pan-pinch`** to handle zooming and panning functionality. The library's `TransformWrapper` and `TransformComponent` wrap the entire canvas content, providing smooth navigation while maintaining a stable coordinate system. The `transformRef` enables coordinate transformation for accurate drag-and-drop and connection line calculations.

### How does the canvas view isolate generated HTML and SVG mockups from the extension UI?

The canvas view isolates content using **sandboxed iframes** with `srcDoc` attributes. Before rendering, the system injects a Content Security Policy meta tag, an optional viewport meta tag, and a service-worker script into the HTML content. This sandboxing prevents the generated markup from interfering with the extension's UI while allowing safe resolution of external images.

### What component draws the connection lines between related frames?

The **`ConnectionLines`** component renders SVG lines between related frames to visualize hierarchy relationships. These lines calculate positions based on the grid layout and render on top of the zoom-pan layer, ensuring they remain correctly aligned with frames as users zoom or pan the canvas.

### Why does the canvas view always use iframe rendering instead of switching to placeholder modes?

Although the `getOptimalRenderMode` hook could switch to lightweight placeholders when zoomed out, the current implementation deliberately **always returns `'iframe'`** to guarantee users see the exact generated UI. This prioritizes rendering fidelity and accuracy over performance optimization, ensuring mockups appear precisely as generated regardless of zoom level.