mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 04:38:33 +00:00
docs: clarify composition variable usage (#420)
## Summary - replace the unsupported `data-var-*` example with the current `data-variable-values` pattern - document that variable values are carried through but still applied manually inside the nested composition - add matching reference notes in the data-attributes, HTML schema, core package, and CLI docs ## Verification - `npx mintlify dev --port 3100` - browser verification with `agent-browser` on `/concepts/compositions` and `/reference/html-schema` - proof artifacts saved locally under `tmp/issue-416-docs/`
This commit is contained in:
@@ -26,8 +26,14 @@ Use `npx hyperframes compositions` to see all compositions in a project.
|
||||
|
||||
## Variables
|
||||
|
||||
Compositions can expose variables for dynamic content:
|
||||
HyperFrames does not automatically bind `data-var-*` attributes into your composition DOM.
|
||||
|
||||
```html
|
||||
<div data-composition-id="card" data-var-title="string" data-var-color="color"></div>
|
||||
<div
|
||||
data-composition-id="card"
|
||||
data-composition-src="compositions/card.html"
|
||||
data-variable-values='{"title":"Hello","color":"#ff4d4f"}'
|
||||
></div>
|
||||
```
|
||||
|
||||
Read `data-variable-values` inside the nested composition and apply the values in your own script. Variable metadata for tooling is declared separately via `data-composition-variables` and read with `extractCompositionMetadata()`.
|
||||
|
||||
Reference in New Issue
Block a user