# Live rendering

Live rendering lets you render your state on the fly on your renderer, no need to have a dedicated component to act as an intermediary.

![Being able to easily render state inlined in your JSX it's pretty neat!](https://3967196510-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3BBQqsBUGjmzTvukhE%2F-MBdyfOw0Qj0uLLlEXm6%2F-MBe0lRVTSNBX2fRHEW3%2FmindBlow.gif?alt=media\&token=81b8a200-e4c8-461a-90e5-a1540ab2b201)

There are three mechanisms for live rendering.

## Direct

### Data only

You can use the method *connectLive* from the [ConanState](https://docs.conanjs.io/data/conan-state) object directly.

It takes a renderer function as argument. 

All you need is to be able to access the ConanState instance.

{% tabs %}
{% tab title="Js" %}

```javascript
{counterState$.connectLive(data => (<h1>{data.counter}</h1>))}

```

{% endtab %}

{% tab title="Ts" %}

```typescript
import {counterState$} from "../../state/counter.state$";


<button onClick={counterState$.do.increment}>Increment!</button>
<button onClick={counterState$.do.decrement}>Decrement!</button>
{counterState$.connectLive(data=>(<div>
                    <h1>{data.counter}</h1>
                    </div>
))}

```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
You can see this in our [Hello Wow!](https://docs.conanjs.io/tutorials/conan-state-demos/hello-wow) demo.
{% endhint %}

### Data and Monitor Info

{% tabs %}
{% tab title="Js" %}

```javascript

{
    counterState$
        .tuple(counterState$.asyncState)
        .connectLive((data, monitorInfo) => 
            (<h1>{data.counter} - {monitorInfo.status}</h1>)
        )
}

```

{% endtab %}
{% endtabs %}

## HOC

We can also use a High Order Component with live rendering, by using the components *StateLive* and *ContextStateLive:*

{% tabs %}
{% tab title="Js" %}

```javascript
import {ContextStateLive, StateLive} from "conan-js-core";
import { counterState$ } from "../../state/counter.state$";

<StateLive from={counterState$} renderer={(data, actions) => (<div>
                <button onClick={actions.increment}>Increment!</button>
                <button onClick={actions.decrement}>Decrement!</button>
</div>)}/>;
};

<ContextStateLive renderer={data => (<h1>{data.counter}</h1>)}/>

```

{% endtab %}

{% tab title="Ts" %}

```typescript
import {ContextStateLive, StateLive} from "conan-js-core";
import {CounterActions, CounterData, counterState$} from "../../state/counter.state$";

<StateLive<CounterData, CounterActions>
        from={counterState$}
        renderer={(data, actions)=>(
            <div>
                <button onClick={actions.increment}>Increment!</button>
                <button onClick={actions.decrement}>Decrement!</button>
                <CounterDisplay/>
            </div>
        )}
    />

<ContextStateLive <CounterData>
        renderer={data => (
            <h1>{data.counter}</h1>
        )}
/>

```

{% endtab %}
{% endtabs %}

## Composition

Live rendering can also be used with composition. ConanJs provides the functions contextStateLive and stateLive for it:

{% tabs %}
{% tab title="Js" %}

```javascript
import {contextStateLive, stateLive} from "conan-js-core";
import { counterState$ } from "../../state/counter.state$";

stateLive(counterState$, (data, actions) => (<div>
            <button onClick={actions.increment}>Increment!</button>
            <button onClick={actions.decrement}>Decrement!</button>
            <CounterDisplay />
        </div>));
        
contextStateLive(data => (<h1>{data.counter}</h1>))
```

{% endtab %}

{% tab title="Ts" %}

```typescript
import {contextStateLive, stateLive} from "conan-js-core";
import {CounterActions, CounterData, counterState$} from "../../state/counter.state$";

stateLive<CounterData, CounterActions>(
    counterState$,
    (data, actions) => (
        <div>
            <button onClick={actions.increment}>Increment!</button>
            <button onClick={actions.decrement}>Decrement!</button>
            <CounterDisplay/>
        </div>
    )
)

contextStateLive<CounterData>( data => (
    <h1>{data.counter}</h1>
));
```

{% endtab %}
{% endtabs %}

Please take a look at this code sandbox to see al the subscription approaches working:

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