```
This works because Alpine evaluates `x-data` as a JavaScript expression, and the single-quoted output (`{'loop': true, ...}`) is a valid object literal. The Table component defensively handles a string arriving instead, converting the quotes back before parsing:
```javascript
Alpine.data("elementsTable", (id, config) => ({
config: typeof config === "string" ? JSON.parse(config.replace(/'/g, '"')) : config,
// ...
}));
```
The caveat: the quote-swap corrupts data that itself contains quote characters, so reserve it for config objects whose values you control. For user-entered content, use a `data-*` attribute instead.
### GSAP Animations
Configure GSAP animations with user properties:
```javascript
@if(enableAnimation)
gsap.to('#component-{{id}}', {
duration: {{duration}},
opacity: {{targetOpacity}},
x: {{translateX}},
ease: '{{easing}}'
});
@endif
```
### Data Attributes
Set data attributes for JavaScript access:
```javascript
const element = document.getElementById('{{id}}');
element.dataset.componentId = '{{id}}';
element.dataset.variant = '{{variant}}';
element.dataset.enabled = '{{enabled}}';
// Later access
const variant = element.dataset.variant;
```
**Passing structured data (objects/arrays) from `hooks.js`**
For structured data, serialise it in `hooks.js` and embed it in a single-quoted `data-*` attribute. A single-quoted attribute keeps JSON's double-quotes intact; putting them inside a double-quoted `x-data` attribute breaks the HTML parse.
```javascript
// hooks.js
exports.transformHook = (rw) => {
rw.setProps({ scheduleJson: JSON.stringify(rw.props.schedule ?? {}) });
};
```
```html
```
```html
@portal(bodyEnd, includeOnce: true, id: "com.yourname.openstatus.alpine")
@endportal
```
Because `{{ }}` inserts values verbatim (see [Escape String Values](#escape-string-values)), entity-encode `'`, `&`, and `<` in `hooks.js` if the data may contain those characters.
## Limitations
### No ES Modules
Template JavaScript doesn't support ES module syntax:
```javascript
// This won't work in template files
import { something } from './module.js';
export default MyComponent;
// Use traditional scripts or put modules in assets/
```
### Limited Preprocessing
Template JavaScript files don't support TypeScript, Babel, or other preprocessors. Use the Elements template language for logic.
### Execution Context
Template JavaScript runs in the page context, not in a controlled environment. Ensure code is safe and handles errors appropriately.
## Related Documentation
* [Elements Language](/elements-docs/elements-language/component/language.md) - Template syntax reference
* [`@portal` Directive](/elements-docs/elements-language/component/language/portal.md) - Injecting scripts to page locations
* [Templates Overview](/elements-docs/elements-language/component/templates.md) - Understanding templates
* [Assets](/elements-docs/elements-language/component/assets.md) - Static JavaScript files
* [Hooks.js](/elements-docs/elements-language/component/hooks.js.md) - Preparing data for JavaScript
* [Interactive Components with Alpine.js](/elements-docs/elements-language/guides/interactive-components-with-alpine.md) - The full guide to Alpine-driven components
* [Integrating JavaScript Libraries](/elements-docs/elements-language/guides/integrating-javascript-libraries.md) - Shipping third-party libraries with components
---
# 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.realmacsoftware.com/elements-docs/elements-language/component/templates/js-templates.md?ask=
&goal=
```
`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.