# 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="" %} ### 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="" %} ### 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="" %} ### Message - Example 2 This widget functions similarly to Example 1, but it utilizes the WEM `Runtime.viewState` JavaScript API instead. {% file src="" %} ### 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="" %} ### 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="" %} ### 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="" %} ## Other Examples More coming soon.