@vscode-elements/webview-playground
v1.9.0
Published
Handy web components for emulating the VSCode Webview environment.
Readme
VSCode Webview Playground
Handy web components for emulating the VSCode Webview environment.
Installation
Install as npm package:
npm install -D @vscode-elements/webview-playgroundAlternatively, 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.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webview Playground</title>
<script type="module" src="node_modules/@vscode-elements/webview-playground/dist/index.js"></script>
</head>
<body>
<vscode-dev-toolbar></vscode-dev-toolbar>
</body>
</html>The button can be hidden by the hidden attribute or hidden property:
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.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webview Playground</title>
<script type="module" src="node_modules/@vscode-elements/webview-playground/dist/index.js"></script>
</head>
<body>
<vscode-demo>
<span class="badge activity-bar-counter">42</span>
</vscode-demo>
</body>
</html>Internal components
Further "private" components:
- <vscode-theme-selector>
- <vscode-toggle-motion>
- <vscode-toggle-underline>
- <vscode-view-container-selector>