https://github.com/vscode-elements/webview-playground

Handy web components for emulating the VSCode Webview environment.
https://github.com/vscode-elements/webview-playground

visual-studio-code vscode vscode-webview webcomponents

Last synced: 13 days ago
JSON representation

Handy web components for emulating the VSCode Webview environment.

• Host: GitHub
• URL: https://github.com/vscode-elements/webview-playground
• Owner: vscode-elements
• License: mit
• Created: 2024-09-25T21:01:20.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-11-17T00:54:28.000Z (about 1 month ago)
• Last Synced: 2024-11-17T01:24:06.936Z (about 1 month ago)
• Topics: visual-studio-code, vscode, vscode-webview, webcomponents
• Language: HTML
• Homepage:
• Size: 170 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# VSCode Webview Playground

Handy web components for emulating the VSCode Webview environment.

## Installation

Install as npm package:

```

npm install -D @vscode-elements/webview-playground

```

Alternatively, you can just copy the files from the `/dist` directory into your project. 

They are pure JavaScript files, so no bundler is required. It’s up to you how to exclude them from the production build.

## Available components

### <vscode-dev-toolbar>

Insert theme variables and default styles into the page. It appears as a button in the lower right corner. When clicked, a simple toolbar is displayed.

![Dev toolbar button](https://github.com/vscode-elements/webview-playground/raw/main/image.png)

```html

  

  Webview Playground

  

  

```

The button can be hidden by the `hidden` attribute or `hidden` property:

```javascript

document.querySelector('vscode-dev-toolbar').hidden = true;

```

### <vscode-demo>

An isolated block intended for use in a documentation site, e.g., Storybook. It inserts the theme variables but doesn't modify the host page's styles.

![alt text](https://github.com/vscode-elements/webview-playground/raw/main/image-1.png)

```html

  

  Webview Playground

  

  

    42

  

```

### Internal components

Further "private" components:

- <vscode-theme-selector>

- <vscode-toggle-motion>

- <vscode-toggle-underline>

- <vscode-view-container-selector>