💨Sidewind
Tailwind but for state
Why Sidewind?
Sidewind was designed small sites and applications in mind. It allows you to sprinkle state where you need it right in the HTML structure.
The library follows the principle of progressive enhancement making your pages accessible even if JavaScript isn’t available. It supports state hydration from rendered markup making it a good fit for cases where you want to add interactivity to otherwise static content (i.e. lists, tables, grids).
For anything more serious, it’s a good idea to combine it with a solution that comes with a component abstraction. For example, Gustwind site generator was designed for this purpose and the site you see was generated using it.
Dive in
To get an idea of what it’s like to develop with Sidewind, try tweaking the following example and studying the documentation.
Related approaches
Sidewind isn’t the only alternative out there and I’ve listed several of the ones I’m aware of below:
- Alpine.js provides a similar yet more broad API closer to Angular than Sidewind.
- amp-bind implements data binding and expressions.
- htmx is a complete solution with server integration.
- Nue.js is an entire lightweight framework.
- Mavo implements a DSL on top of HTML for light interactivity.
- Mini is a light(ish) (80k) way to add interactivity to your site.
- Svelte implements a compiler based approach.
- Vue, and especially Vue 3, allows similar usage in the frontend as Sidewind. See also petite-vue.
License
MIT.