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

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) 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) lines 351-426 and 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) 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: Calculates grid positions and hierarchy relationships
• src/webview/types/canvas.types.ts: Defines TypeScript interfaces for canvas entities

The following example demonstrates the zoom-pan wrapper implementation:

<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:

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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}