Sidewind is a light (~16k minified) state management solution designed to work together with utility CSS based frameworks, such as Tailwind.css.
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.
To get an idea of what it's like to develop with Sidewind, try tweaking the following example and studying the documentation.
<form
x-state="{ text: '', todos: [] }"
onsubmit="setState({
text: '',
todos: this.state.todos.concat({
text: this.state.text
})
})"
action="javascript:"
class="flex flex-col gap-2"
>
<div class="flex flex-row gap-2">
<label>
<span>Add Todo</span>
<input
id="text"
type="text"
oninput="setState({ text: this.value })"
x="state.text"
/>
</label>
<button class="btn btn-blue" type="submit">Add</button>
</div>
<div>
<ul class="list-disc list-inside" x-each="state.todos">
<li x-template x="state.value.text" />
</ul>
</div>
<div x="JSON.stringify(state.todos, null, 2)"></div>
</form>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.
- Mavo implements a DSL on top of HTML for light interactivity.
- Svelte implements a compiler based approach.
- Vue, and especially Vue 3, allows similar usage in the frontend as Sidewind. See also petite-vue.
MIT.