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: 16 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 (7 months ago)
- Default Branch: main
- Last Pushed: 2025-02-18T19:34:26.000Z (2 months ago)
- Last Synced: 2025-03-27T17:21:15.267Z (about 1 month ago)
- Topics: visual-studio-code, vscode, vscode-webview, webcomponents
- Language: HTML
- Homepage:
- Size: 349 KB
- Stars: 8
- 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.
```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.
```html
Webview Playground
```
### Internal components
Further "private" components:
- <vscode-theme-selector>
- <vscode-toggle-motion>
- <vscode-toggle-underline>
- <vscode-view-container-selector>