# Contribution
## Prerequisites
- Make sure you go through the [getting started](./getting_started.md) guide first.
- Have some knowledge of [Typescript](https://www.typescriptlang.org/docs/) and [Svelte](https://svelte.dev/docs).
## Write a Weblet
We are going to add new weblet called `demo` .
1. Add new folder called **demo** at `src/elements/demo` .
2. Add **Demo.wc.svelte** at `src/elements/demo/Demo.wc.svelte` .
```ts
// Demo.wc.svelte
/* Write whatever svelte code u need here */
```
3. Add **index.ts** at `src/elements/demo/index.ts` .
```ts
// index.ts
import "./Demo.wc.svelte";
```
4. Developing weblet by importing `Demo.wc.svelte` into `App.svelte`.
```html
```
5. Build `Demo.wc.svelte`.
```sh
yarn rollup-build
```
Find the output in the `.build/` directory.
## Add Weblet To Plain HTML File
Assume we need to include `vm` weblet in its own `index.html` file.
Notes:
1. You will need to include `base.wc.js` & `profiles.wc.js` for every component to work.
2. Also, You will need to inject the required libraries [grid_client](https://www.npmjs.com/package/@threefold/grid_client) in `window.configs` Object.
The `index.html` file should be like the following.
```html
VM Weblet Example
```
## Add Weblet to The Playground
1. Deploy the weblet in the playground app by appending the weblet to the elements list in `packages/weblets/playground/src/App.vue`
2. Create new tab in the sideNav by appending the weblet list with new class of `Weblet` in `packages/weblets/playground/src/views/Editor.vue`