Skip to content

A collection of sample extensions built with the Webview UI Toolkit for Visual Studio Code.

License

Notifications You must be signed in to change notification settings

markwallace-microsoft/vscode-webview-ui-toolkit-samples

 
 

Repository files navigation

Webview UI Toolkit Sample Extensions

This repository contains all the sample extensions for the Webview UI Toolkit for Visual Studio Code.

Each sample is a self-contained extension, and demonstrates some aspect of the toolkit and/or the Visual Studio Code API in relation to the toolkit. You can read, play with, or adapt these samples to create your own extensions.

Prerequisites

You need to have Node and NPM installed on your system to run the samples. We recommend you use the Node version used for Visual Studio Code development itself, which is documented here.

Usage

Follow the instructions in the README file of the desired sample extension.

Default samples

A set of sample extensions using vanilla HTML, CSS, and JavaScript/TypeScript to render the webview UI and demonstrate various VS Code APIs.

Don't see a demonstration for your desired use case, VS Code API, etc.? Open an issue and request it.

Sample extension Description
component-gallery Demonstrates every component in the Webview UI Toolkit.
hello-world A basic hello-world starter extension.
notepad A simple notetaking extension that leverages the VS Code TreeView API.
weather-webview Demonstrates the toolkit being used within a webview view – i.e., Visual Studio Code sidebar.

Framework samples

A set of sample extensions that demonstrate how to use various web frameworks to render the webview UI.

Sample extension Description
hello-world-angular A basic hello-world starter extension using Angular.
hello-world-react-cra A basic hello-world starter extension using React + Create React App.
hello-world-react-vite A basic hello-world starter extension using React + Vite.
hello-world-solidjs A basic hello-world starter extension using SolidJS.
hello-world-svelte A basic hello-world starter extension using Svelte.
hello-world-vue A basic hello-world starter extension using Vue.

Contributing

Read the contributing documentation.

Legal notices

Microsoft and any contributors grant you a license to any code in the repository under the MIT License, see the LICENSE file.

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party’s policies.

Privacy information can be found here.

Microsoft and any contributors reserve all other rights, whether under their respective copyrights, patents, or trademarks, whether by implication, estoppel or otherwise.

About

A collection of sample extensions built with the Webview UI Toolkit for Visual Studio Code.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 71.8%
  • CSS 16.2%
  • JavaScript 9.6%
  • HTML 1.2%
  • Other 1.2%