|
2 | 2 |
|
3 | 3 | This repository contains all the sample extensions for the [Webview UI Toolkit for Visual Studio Code](https://github.com/microsoft/vscode-webview-toolkit).
|
4 | 4 |
|
5 |
| -Each sample is a self contained extension and demonstrates some aspect of the toolkit and/or the [VS Code API](https://code.visualstudio.com/api/references/vscode-api) in relation to the toolkit. You can read, play with, or adapt these samples to create your own extensions. |
| 5 | +Each sample is a self-contained extension, and demonstrates some aspect of the toolkit and/or the [Visual Studio Code API](https://code.visualstudio.com/api/references/vscode-api) in relation to the toolkit. You can read, play with, or adapt these samples to create your own extensions. |
6 | 6 |
|
7 | 7 | ## Prerequisites
|
8 | 8 |
|
9 |
| -You need to have [Node and NPM](https://nodejs.org/en/) installed on your system to run the samples. It is recommended to use the Node version used for VS Code development itself which is documented [here](https://github.com/Microsoft/vscode/wiki/How-to-Contribute#prerequisites). |
| 9 | +You need to have [Node and NPM](https://nodejs.org/en/) 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](https://github.com/Microsoft/vscode/wiki/How-to-Contribute#prerequisites). |
10 | 10 |
|
11 | 11 | ## Usage
|
12 | 12 |
|
13 | 13 | Follow the instructions in the `README` file of the desired sample extension.
|
14 | 14 |
|
15 |
| -### Default Samples |
| 15 | +### Default samples |
16 | 16 |
|
17 |
| -A set of sample extensions using vanilla HTML, CSS, and JavaScript to render the Webview UI. |
| 17 | +A set of sample extensions using vanilla HTML, CSS, and JavaScript to render the webview UI. |
18 | 18 |
|
19 |
| -| Sample Extension | Description | |
| 19 | +| Sample extension | Description | |
20 | 20 | | ------------------------------------------------ | --------------------------------------------------------------------------------- |
|
21 | 21 | | [component-gallery](./default/component-gallery) | Demonstrates every component in the Webview UI Toolkit. |
|
22 |
| -| [hello-world](./default/hello-world) | A basic hello world starter extension. | |
23 |
| -| [notepad](./default/notepad) | A simple note taking extension that leverages the VS Code TreeView API. | |
24 |
| -| [weather-webview](./default/weather-webview) | Demonstrates the toolkit being used within a Webview View (i.e. VS Code sidebar). | |
| 22 | +| [hello-world](./default/hello-world) | A basic hello-world starter extension. | |
| 23 | +| [notepad](./default/notepad) | A simple notetaking extension that leverages the VS Code TreeView API. | |
| 24 | +| [weather-webview](./default/weather-webview) | Demonstrates the toolkit being used within a webview view – i.e., Visual Studio Code sidebar. | |
25 | 25 |
|
26 |
| -### React Samples |
| 26 | +### React samples |
27 | 27 |
|
28 |
| -A set of sample extensions using React to render the Webview UI. |
| 28 | +A set of sample extensions using React to render the webview UI. |
29 | 29 |
|
30 |
| -| Sample Extension | Description | |
| 30 | +| Sample extension | Description | |
31 | 31 | | ---------------------------------------------| --------------------------------------------------------------------- |
|
32 |
| -| [hello-world-cra](./react/hello-world-cra) | A basic hello world starter extension using React + Create React App. | |
33 |
| -| [hello-world-vite](./react/hello-world-vite) | A basic hello world starter extension using React + Vite. | |
| 32 | +| [hello-world-cra](./react/hello-world-cra) | A basic hello-world starter extension using React + Create React App. | |
| 33 | +| [hello-world-vite](./react/hello-world-vite) | A basic hello-world starter extension using React + Vite. | |
34 | 34 |
|
35 |
| -### Svelte Samples |
| 35 | +### Svelte samples |
36 | 36 |
|
37 |
| -A set of sample extensions using Svelte to render the Webview UI. |
| 37 | +A set of sample extensions using Svelte to render the webview UI. |
38 | 38 |
|
39 |
| -| Sample Extension | Description | |
40 |
| -| ------------------------| ----------- | |
41 |
| -| _Coming in the future!_ | | |
| 39 | +| Sample extension | Description | |
| 40 | +| -----------------| ----------- | |
| 41 | +| _Coming soon_ | | |
42 | 42 |
|
43 |
| -### Vue Samples |
| 43 | +### Vue samples |
44 | 44 |
|
45 |
| -A set of sample extensions using Vue to render the Webview UI. |
| 45 | +A set of sample extensions using Vue to render the webview UI. |
46 | 46 |
|
47 |
| -| Sample Extension | Description | |
48 |
| -| ------------------------| ----------- | |
49 |
| -| _Coming in the future!_ | | |
| 47 | +| Sample extension | Description | |
| 48 | +| -----------------| ----------- | |
| 49 | +| _Coming soon_ | | |
50 | 50 |
|
51 |
| -### Angular Samples |
| 51 | +### Angular samples |
52 | 52 |
|
53 |
| -A set of sample extensions using Angular to render the Webview UI. |
| 53 | +A set of sample extensions using Angular to render the webview UI. |
54 | 54 |
|
55 |
| -| Sample Extension | Description | |
56 |
| -| ------------------------| ----------- | |
57 |
| -| _Coming in the future!_ | | |
| 55 | +| Sample extension | Description | |
| 56 | +| -----------------| ----------- | |
| 57 | +| _Coming soon_ | | |
58 | 58 |
|
59 |
| -### Other Samples |
| 59 | +### Other samples |
60 | 60 |
|
61 |
| -Don't see a demonstration for your desired framework, API, use case, and so on? Feel free to open an issue and request it! |
| 61 | +Don't see a demonstration for your desired framework, API, use case, etc.? Open an issue and request it. |
62 | 62 |
|
63 | 63 | ## Contributing
|
64 | 64 |
|
65 |
| -See the [contributing](./CONTRIBUTING.md) documentation. |
| 65 | +Read the [contributing](./CONTRIBUTING.md) documentation. |
66 | 66 |
|
67 | 67 | ## Legal notices
|
68 | 68 |
|
|
0 commit comments