<div align="center"> <!-- prettier-ignore --> [Test page](.) | [ezmdpage & Alpine.js](alpinejs.html) | [ezmdpage & Vue.js](vuejs.html) | [GitHub](https://github.com/togajam/ezmdpage) Try right-click and <kbd>View page source</kbd>! </div> # ezmdpage & Alpine.js https://alpinejs.dev/ <!-- prettier-ignore --> ```html <script src="https://unpkg.com/alpinejs@3"></script> <script src="https://unpkg.com/ezmdpage@2"></script><plaintext> ``` There should be a paragraph below that has "I ❤️ Alpine" in it. It's rendered by Alpine.js. Here's the code: ```html <p x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></p> ``` <p x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></p> 👆 That's Alpine.js! This is just _plain Markdown_. You can mix the two! Here's some more Alpine.js things: ## Incrementing counter https://alpinejs.dev/start-here#building-a-counter <div x-data="{ count: 0 }"> <button x-on:click="count++">Increment</button> <span x-text="count"></span> </div> ## Search input https://alpinejs.dev/start-here#building-a-search-input <div x-data="{ search: '', items: ['foo', 'bar', 'baz'], get filteredItems() { return this.items.filter(i => i.startsWith(this.search)) } }"> <input x-model="search" placeholder="Search..."> <ul> <template x-for="item in filteredItems" :key="item"> <li x-text="item"></li> </template> </ul> </div>