Grains.js is a tiny, reactive state management library designed for HTML. It lets you create isolated state containers directly within your HTML using custom attributes, eliminating the need for a build step or complex setup.
Features
Micro-states
Create isolated state containers for specific HTML segments, such as `<div>` sections, allowing for more manageable and reusable code structures within your application.
Reactive
Automatically updates the UI whenever the state changes, ensuring that the interface is always in sync with the underlying data.
Lightweight
The library has no dependencies and is contained within a single file, allowing for easy integration and minimal impact on page load times.
No Build Step
The library can be included directly via a `<script>` tag, simplifying the setup process and reducing initial development overhead.
Simple API
Uses intuitive HTML attributes for managing state, making it easy to understand and use without needing extensive documentation or learning new paradigms.
Undo/Redo
Built-in support for maintaining a history of state changes, allowing users to undo or redo actions within the application.
Transitions/Animations
Integrates animations and transitions with state changes seamlessly, enhancing the visual feedback and user experience.
Expression Evaluation
Allows the use of JavaScript expressions directly in directives, providing powerful and dynamic control over UI behaviors and state.