Alpine JS 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.

Features

- 💪 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

Why Use Tash?

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.

Install

$3

``html
defer
src="https://unpkg.com/alpinejs-tash@latest/dist/cdn.min.js"
>


`

$3

`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()
`

Example

`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}!