Alpine JS plugin that enables mustache-like templating syntax for simpler data binding and rendering in your Alpine JS applications ð
npm install alpinejs-tash



Use a more familiar syntax when rendering Alpine JS {variables} ð
Alpine JS Tash (Template Hash) lets you use templating syntax from popular
frameworks to render Alpine JS data. Instead of writing x-text expressions,
simply use curly braces like React, Vue, or Angular in your markup.
- ðŠ Framework-familiar syntax ({variable}, {{ variable }}, etc.)
- ð Fully reactive with Alpine JS data
- ðĻ Multiple template styles (React/Svelte, Vue, Angular)
- ðŠķ Lightweight addition to your Alpine JS projects
- ð§Đ Simple plugin integration
Tash makes Alpine JS templates more readable and familiar, especially if you're
coming from other frameworks. It simplifies string interpolation without
sacrificing Alpine JS reactivity system.
``html
defer
src="https://unpkg.com/alpinejs-tash@latest/dist/cdn.min.js"
>
`
`shell`
yarn add -D alpinejs-tash
npm install -D alpinejs-tash
`js
import Alpine from 'alpinejs'
import tash from 'alpinejs-tash'
Alpine.plugin(tash)
window.Alpine = Alpine
Alpine.start()
`
`html
x-data="{ name: 'Walter White', age: 50, company: 'Gray Matter Technologies' }"
>
Hello, I am {name}! I am {age} years old and I currently work at {company}!
Options
Template Syntax Options
Alpine JS Tash supports different template syntax styles to match your
preference:
$3
`html
Hello, {name}!
`$3
`html
Hello, {{ name }}!
`$3
`html
Hello, {{name}}!
``Choose the syntax that feels most comfortable based on your background or
project requirements.