AgileTs is a spacy, fast, simple State Management Framework

// -- core.js ------------------------------------------

// Let's start by creating an Instance of AgileTs
const App = new Agile();

// Now we are able to build our first State 😃
const MY_FIRST_STATE = App.createState("Hello Stranger!");


// -- myComponent.whatever ------------------------------------------

// Finally, we bind our just created State to our desired UI-Component
// And wolla its reactive. Everytime the State mutates the Component gets rerendered
const myFirstState = useAgile(MY_FIRST_STATE); // returns value of State ("Hello Stranger!")

To find out more checkout our documentation.

⛳️ Sandbox

Test AgileTs yourself, it's only one click away. Just select your preferred Framework below.

• React
• Vue (coming soon)
• Angular (coming soon)

More examples can be found in the Example Section.

AgileTs is a simple, fast and well tested State Management Framework which is implemented in TypeScript. It's more flexible and boilerplate free than Redux and has an interesting approach to reducing the size of a codebase through a centralized memory design pattern. The philosophy behind AgileTs is simple:

🚅 Straightforward

Write minimalistic, boilerplate free code that captures your intent.

Some straightforward syntax examples:

• Store State in any Storage, like Local Storage

  MY_STATE.persist("storage-key")

• Create a reactive Array of States

  const MY_COLLECTION = App.createCollection();
  MY_COLLECTION.collect({id: 1, name: "Frank"});
  MY_COLLECTION.collect({id: 2, name: "Dieter"});

• Mutate or Check States with simple Functions

  MY_STATE.undo(); // Undo latest change
  MY_STATE.is({hello: "jeff"}); // Check if State has the Value '{hello: "jeff"}'

🤸‍ Flexible

• Works in nearly every UI-Framework. Check here if your preferred framework is supported too.
• Surly behaves with the workflow that suits you best. No need for reducers, actions, ..
• Has no external dependencies

🎯 Easy to Use

Learn the powerful tools of AgileTs in a short amount of time. A good place to start are our Quick Starts or if you are no fan of following any tutorial, checkout your examples.

To properly use AgileTs, in a UI-Framework we need two packages.

• The Core Package, which acts as the brain of AgileTs and manages all our States

  npm install @agile-ts/core
  

• and a fitting Integration for our preferd UI-Framework.. in my case the React Integration. Check here if your desired Framework is supported, too.

  npm install @agile-ts/react
  

If AgileTs sounds interesting to you. Checkout our docs. And I am sure you will be able to use it in no time. In case you have any questions don't mind joining our Discord Community.

Get a part of AgileTs and start contributing. To find out more checkout the CONTRIBUTING.md. We welcome any meaningful contribution 😀

Name	Latest Version	Description
@agile-ts/core		Brain of Agile
@agile-ts/react		React Integration
@agile-ts/api		Promise based Api
@agile-ts/multieditor		Simple Form Manager

AgileTs is inspired by MVVM frameworks like MobX and PulseJs.