State Management made

boilerplate free

AgileTs is a global, flexible, spacy State and Logic Library

Poke me 👆 to mutate my color State.

Why choose us?

Straightforward

AgileTs saves you the hassle of creating boilerplate code and offers a powerful API that makes your life easier.

// Instantiate a global States with a single line of code
const MY_STATE = createState("Jeff"); // <-
MY_STATE.set("Frank"); // Update State value
    

// Dynamically bind State to UI-Components for reactivity
const myState = useAgile(MY_STATE);
    

// Permanently store State in the appropriate local Storage
MY_STATE.persist();
    

// Create a dynamic and reactive set of States
const USERS = createCollection(); // <-
USERS.collect({id: 1, name: "Jeff"}, ['teamA']);
    

// Compute State depending on other States  
const IS_AUTH = createComputed(() => {
   return AUTH_TOKEN.exists && EXPIRATION_TIME.value > 0;
});
    

Create State

Instantiate a global State with a single line of code.

Subscribe UI-Component

Dynamically bind State to UI-Components for reactivity.

Persist State

Permanently store State in the appropriate local Storage.

Collection

Easily create a dynamic and reactive set of States.

Computed State

Compute State depending on other States.

Centralize

AgileTs allows you to easily manage all of your application logic and states outside of the UI-Components in a central place.

Flexible

AgileTs works with nearly any UI-Layer and isn’t bound to any specific workflow. Use it the way it suits you best.

Easy to Use

Learn the powerful tools of AgileTs in a short amount of time.

Well Tested

AgileTs has over 600 jest tests to ensure everything works as expected.

Typescript

AgileTs is almost 100% typesafe and provides type inference for any complex structure.

Stop Talking

Start Coding

Coming Soon

// 1️⃣ Create State with the initial value "Hello World"
const MY_FIRST_STATE = createState("Hello World");

let helloWorldCount = 0;
const RandomComponent = () => {
    // 2️⃣ Bind initialized State to the 'RandomComponent' for reactivity
    const myFirstState = useAgile(MY_FIRST_STATE);

    return (
        <div>
            <p>{myFirstState}</p>
            <button
                onClick={() => {
                    // 3️⃣ Update State value on Button press
                    MY_FIRST_STATE.set('Hello World ' + ++helloWorldCount);
                }}
            >
                Update State
            </button>
        </div>
    );
}

render(<RandomComponent/>);

// 1️⃣ Create State with the initial value "Hello World"
const MY_FIRST_STATE = createState("Hello World");

let helloWorldCount = 0;
const RandomComponent = () => {
    // 2️⃣ Bind initialized State to the 'RandomComponent' for reactivity
    const myFirstState = useAgile(MY_FIRST_STATE);

    return (
        <div>
            <p>{myFirstState}</p>
            <button
                onClick={() => {
                    // 3️⃣ Update State value on Button press
                    MY_FIRST_STATE.set('Hello World ' + ++helloWorldCount);
                }}
            >
                Update State
            </button>
        </div>
    );
}

render(<RandomComponent/>);

Live

Preview

Always Open Source.

Trusted by GitHub community

Stars

Forks

Downloads

Give it a Try. It's 100% free.

npm install @agile-ts/core