Skip to content

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented Sep 19, 2025

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.

@Copilot Copilot AI changed the title [WIP] In the vscode extension webview, show the toolbar Add toolbar to VSCode extension webview Sep 19, 2025
Copilot finished work on behalf of danmarshall September 19, 2025 15:41
@Copilot Copilot AI requested a review from danmarshall September 19, 2025 15:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants