https://github.com/markmead/alpinejs-tash

Use a more familiar syntax when rendering Alpine JS {variables} 🚀
https://github.com/markmead/alpinejs-tash

alpine alpinejs templating

Last synced: 13 days ago
JSON representation

Use a more familiar syntax when rendering Alpine JS {variables} 🚀

• Host: GitHub
• URL: https://github.com/markmead/alpinejs-tash
• Owner: markmead
• License: mit
• Created: 2021-12-05T16:41:36.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2025-03-07T10:55:45.000Z (about 1 month ago)
• Last Synced: 2025-03-31T06:01:36.968Z (20 days ago)
• Topics: alpine, alpinejs, templating
• Language: JavaScript
• Homepage:
• Size: 34.2 KB
• Stars: 104
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - Alpine.js Tash - Render data in moustache syntax

README

        
# Alpine JS Tash

![](https://img.shields.io/bundlephobia/min/alpinejs-tash)

![](https://img.shields.io/npm/v/alpinejs-tash)

![](https://img.shields.io/npm/dt/alpinejs-tash)

![](https://img.shields.io/github/license/markmead/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.

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

### CDN

```html

```

### Package

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



  


    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:

### Default: React/Svelte Style

```html



  
Hello, {name}!



```


### Vue Style

```html



  
Hello, {{ name }}!



```


### Angular Style

```html



  
Hello, {{name}}!



```


Choose the syntax that feels most comfortable based on your background or

project requirements.