> 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.md).

# Conan State Demos

## Docs

* [Conan State](/data/conan-state.md)
* [Dependency Injection](/dependency-injection.md)

## Hello World

### Highlights

* Simplest possible example we could think to showcase Conan State

{% content-ref url="/pages/-M9U259\_XPDDFTkNz0BF" %}
[Hello World](/tutorials/conan-state-demos/hello-wow.md)
{% endcontent-ref %}

## Todos App

### Todos

#### Highlights

* Simple application, no async operations
* Uses dependency injection to scope the state.
* Connects data using React components.

{% content-ref url="/pages/-M9U3VdgOI63wzcbKcEL" %}
[Todos - Basic](/tutorials/conan-state-demos/todos/todos-sync.md)
{% endcontent-ref %}

### Todos - Async

#### Highlights

* Simplest async demo.
* Uses dependency Injection to scope the state and a service
* Uses auto-bind to connect the service to the state.
* Builds up from the code used in the Todos demo

{% content-ref url="/pages/-M9U3Z3tCbIdWDOhZPx7" %}
[Todos - Async](/tutorials/conan-state-demos/todos/todos-async.md)
{% endcontent-ref %}

### Todos - Optimistic

#### Highlights

* Advanced async demo, it showcases the potential of ConanJs to let you perform optimistic async operations
* Builds up from the code used in the Todos  - Async demo

{% content-ref url="/pages/-M9U3cip1z33a-FiHCQu" %}
[Todos - Optimistic](/tutorials/conan-state-demos/todos/todos-optimistic.md)
{% endcontent-ref %}

## Github Issues Viewer

Highlights

* Uses real endpoints to fetch data.
* Uses react hooks to observe the data

{% content-ref url="/pages/-M9U3fePsN6qiI6QJAUJ" %}
[Github issues viewer](/tutorials/conan-state-demos/github-issues-viewer.md)
{% endcontent-ref %}