> For the complete documentation index, see [llms.txt](https://docs.wem.io/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wem.io/platform/tutorials/building-widgets/examples.md).

# Examples

On this page, you will find example widgets that are created as you follow the chapters. You can download the widgets and then import them into your own library to take a look. You can even use and modify them to your liking if you wish.

Please note that the widgets created in the widget chapters are being updated to comply with CSP (Content Security Policy) standards. They are also being modified to prevent any collisions in the global scope.

## Basics

Below are the widgets that you will create as you follow the basics module.

### Hello, You!

A simple widget that demonstrates the use of the text property, HTML-encoded to output a name.

{% file src="/files/EUNAh7WD26L10gOkThHf" %}

### Six-Sided Die

A widget that simulates a six-sided die. To ensure that this widget is CSP (Content Security Policy) compliant, it utilizes the `startupscript` to add a click listener to the "Roll Again" button, which refreshes the page.

{% file src="/files/5YttK5m2Y34u35lI0sOp" %}

### Message - Example 1

This widget is similar to the Alert component in Bootstrap. You can expand or collapse the message by clicking on it, demonstrating how the WEM view state fields functions.

{% file src="/files/n3jvDDtAqQMEG871f7jY" %}

### Message - Example 2

This widget functions similarly to Example 1, but it utilizes the WEM `Runtime.viewState` JavaScript API instead.

{% file src="/files/DmFoh59gRV3RJ9C3RRoi" %}

### Message - Example 3

This message widget uses `sessionStorage` to store the view state and employs an ES module that utilizes Shadow DOM to prevent global scope collisions.

{% file src="/files/79B7LoZIIaXQpUcTMdMb" %}

### Tickle

This widget demonstrates how to use the `import()` function to dynamically load script modules, preventing collisions in the *global scope*. It also utilizes the Shadow DOM to style the widget, further avoiding CSS conflicts.

{% file src="/files/k6pN2Bsas0wIGfvtfxDL" %}

### Information Card

This widget demonstrates how easy it is to implement placeholders and highlights their powerful capabilities. It also provides an example of how to create a Template Editor Script.

{% file src="/files/ATr6vqq9c9gNGpXMiwCq" %}

## Other Examples

More coming soon.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wem.io/platform/tutorials/building-widgets/examples.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.