> For the complete documentation index, see [llms.txt](https://docs.conanjs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.conanjs.io/tutorials/conan-state-demos/hello-wow.md).

# Hello World

This is our attempt to wow you, note that this is only a sample of all the different ways to work with ConanState

### Easy to create and render

[To create a Conan State](/data/conan-state/creating-state.md) you only need a name, and optionally, an initial state

```typescript
//name: counter, initialState: 0
const yetAnotherCounter$ = Conan.light('counter', 0)
```

Conan has [live rendering](/data/conan-state/subscribing-state/live-rendering.md), meaning, you can inline the state in your renderer.

```typescript
function render() {
    return yetAnotherCounter$.renderLive (
        (counterValue)=>(<h1>{counterValue}</h1>)
    )
}

```

### Easy to update

Every ConanState has two actions available immediately: 'update' and  'updateAsap'.

Let's add some buttons now tow change the state of the counter:

```typescript
function render() {
    return (<div>
        yetAnotherCounter$.renderLive (
            (counterValue)=>(<h1>{counterValue}</h1>)
        )
        <button onClick={()=>yetAnotherCounter$.do.update(3)}>
            setValueTo3
        </button>
        <button onClick={()=>yetAnotherCounter$.do.update(current=>++current)}>
            increase by one
        </button>
    </div>)
}

```

Note how we can use the update method to either provide a new value, or we can provide a reducer to provide a value that is based on its current value.

### Easy to do async updates

Quick fact, with ConanJs you won't need boilerplate code to deal with asynchronous code.&#x20;

![You are probably speechless now...](/files/-MBJtnjV_M2CG66AW10h)

Let's add two buttons to show async updates to the value.

```typescript
function render() {
    return (<div>
        yetAnotherCounter$.renderLive (
            (counterValue)=>(<h1>{counterValue}</h1>)
        )
        <button onClick={()=>yetAnotherCounter$.do.update(3)}>
            setValueTo3
        </button>
        <button onClick={()=>yetAnotherCounter$.do.update(current=>++current)}>
            increase by one
        </button>
        <button onClick={()=>yetAnotherCounter$.do.updateAsap(
            Asaps.delayed(3, 1000)
        )}>
            setValueTo3 - asnyc
        </button>
        <button onClick={()=>yetAnotherCounter$.do.updateAsap(
            Asaps.delayed(current=>++current, 1000)
        )}>
            increase by one - async
        </button>

    </div>)
}
```

### Easy to derive and compose state

Let's filter only even numbers, and double the current value of the state

```
<h1>
    EVEN NUMBERS: {yetAnotherCounter$.filter(it=>it % 2 === 0).connectLive (
        (counterValue)=>(<span>{counterValue}</span>)
    )}
</h1>
<h1>
    DOUBLE: {yetAnotherCounter$.map(it=>it * 2).connectLive (
        (counterValue)=>(<span>{counterValue}</span>)
    )}
</h1>
```

## Demo

{% embed url="<https://codesandbox.io/s/uzvvx>" %}

## �What's next?

In ['How to install/use ConanJs'](/how-to-install-use-conanjs.md) we will show you how to get this code running on your end.

{% hint style="info" %}
&#x20;Are you ready to dive in?&#x20;

Yes, show me more code!  <https://docs.conanjs.io/tutorials/todos-sync>

Yes, I prefer reading up! <https://docs.conanjs.io/conan-state>

Just let me know how to start using it! <https://docs.conanjs.io/how-to-install-use-conanjs>

NO! :(  Would you mind [reaching out to us](/about-us.md) to let us know how we can improve?
{% endhint %}