> 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/basics/10-template-editor-script.md).

# 10. Template Editor Script

Do you have some spare time to enhance your widget by adding some JavaScript? While this is not mandatory for a functional widget, it can elevate the professionalism of your widget and, in some cases, improve the user experience (UX) in the Template Editor by providing visual feedback to users.

Please note that this code runs only within the Template Editor in the Modeler, not on a page in a previewed or published WEM runtime portal.

#### Updating the Information Card Widget

Let's update our "Information Card" widget with a Template Editor script.

1. Select the "Template Editor Script" tab.
2. Copy and paste the following code:
3. Don't forget to save your changes!

```javascript
const placeholderElement = utility.createPlaceholderElement(placeholders.Contents.name);

const cardElement = utility.createElement("div");
cardElement.style.backgroundColor = "#d1ecf1";
cardElement.style.border = "1px solid #aadce5";
cardElement.style.borderRadius = "4px";
cardElement.style.padding = "8px";
cardElement.append(placeholderElement);

return cardElement;
```

This code should be quite familiar to JavaScript veterans. Notice that we use `utility.createElement` instead of `document.createElement` to create our `HTMLElement`. This is because we provide only a subset of the JavaScript API, just enough to create a preview. We will discuss this in more detail in later chapters.

If you still have the template open where this widget was placed, you should already see the changes from the default appearance to our custom preview. If not, please open the template to view the updated design.


---

# 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, and the optional `goal` query parameter:

```
GET https://docs.wem.io/platform/tutorials/building-widgets/basics/10-template-editor-script.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.