The VSCode extension webview now displays the Chartifact toolbar, providing users with the same professional interface and functionality available in the web frontend.

Changes Made

HTML Template Updates

• Added <header class="chartifact-toolbar"></header> element to preview.html
• Updated CSS grid layout to grid-template-rows: auto 1fr for proper toolbar positioning

Resource Integration

• Added chartifact.toolbar.umd.js to webview resource links
• Included chartifact-toolbar.css in offline dependency injection
• Updated resource copy script to include toolbar files from docs/dist/v1

Webview Initialization

• Configured toolbar for read-only VSCode context with appropriate button settings
• Disabled tweak/restart buttons (inappropriate for preview mode)
• Enabled download functionality for document export
• Integrated toolbar with existing host/listener messaging system

Toolbar Features

The toolbar provides:

• Chartifact branding with viewer identification
• Mode indicator showing document type (markdown/json)
• Download menu with two export options:
  • Source export (just the document content)
  • HTML wrapper export (content plus shareable viewer)

Screenshots

Integrated Toolbar:
VSCode Webview with Toolbar

Download Functionality:
Download Menu

The toolbar maintains consistency with the web frontend while being optimized for the VSCode extension context, enhancing the user experience across the Chartifact ecosystem.

💬 Share your feedback on Copilot coding agent for the chance to win a 200ドル gift card! Click here to start the survey.