> For the complete documentation index, see [llms.txt](https://knot.gitbook.io/language/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://knot.gitbook.io/language/internal/wip/connecting-views.md).

# Connecting Views

## Local State

State that shares the lifecycle of the attached component.

### States with constructor values

```
state MyState(initialValue: number) -> {
  value = initialValue;

  mut increment -> $value++;
}

view SomeView ~ MyState(8) -> {
  <div>
    <span>total: {$value}</span>
    <button onClick={$increment}>add</button>
  </div>
}
```

### States without constructor values or with default values

```
state DefaultedState(initialValue: number = 0) -> { }
state SimpleState() -> { }

view SomeView ~ DefaultedState, SimpleState {
  <div>
    <span>total: {$value}</span>
    <button onClick={$increment}>add</button>
  </div>
}
```

### Contextual State

Contextual state allows for components to communicate implicitly through statically declared dependencies.

```
state DragManager(initialX: number, initialY: number) -> {
  x = initialX;
  y = initialY;

  mut move(x: number, y: number) -> {
    $x = x;
    $y = y;
  }
}

view DragSubscriber ~ DragManager -> {
  <div>
    <span>x: {$x}</span>
    <span>y: {$y}</span>
  </div>
}

view DragContainer -> {
  <div>
    <DragManager initialX={30} initialY={50}>
      <DragSubscriber />
    </DragManager>
  </div>
}
```

### Object types can also be used to describe dependencies

This allows a component to be used in more generic scenarios.

```
type MovementManager {
  x: number;
  y: number;
}

view MovementSubscriber ~ MovementManager -> {
  <div>
    <span>x: {$x}</span>
    <span>y: {$y}</span>
  </div>
}

view DragContainer -> {
  <div>
    <DragManager initialX={30} initialY={50}>
      <MovementSubscriber />
    </DragManager>
    <SlideManager initialX={40} initialY={30}>
      <MovementSubscriber />
    </SlideManager>
  </div>
}
```