<commit_before>---
title: Controller
---

## Controller

Cerebral is what we call a controller. It controls the requests for state change, runs them and notifies the UI when an update is due. It is in complete control of your application and knows everything that is going on. That is why the debugger can give you so much information about what is going on.

Your application will have one single controller:

```js
import {Controller} from 'cerebral'

const conroller = Controller({})
```

The controller is where you define how your application is going to work. Everything from the state, to signals, providers and modules.

```js
import {Controller} from 'cerebral'

const conroller = Controller({
  state: {},
  signals: {},
  modules: {},
  providers: []
})
```

The controller will then be exposed to your components.

```js
import {Controller} from 'cerebral'
import {Container} from 'cerebral/react'
import {render} from 'react-dom'
import App from './components/App'

const conroller = Controller({
  state: {},
  signals: {},
  modules: {},
  providers: []
})

render((
  <Container controller={controller}>
    <App />
  </Container>
), document.querySelector('#app'))
```

The **Container** exposes the controller on the *context*, allowing any component to register to it.<commit_msg>docs(website): fix typo in examples (#523)<commit_after>---
title: Controller
---

## Controller

Cerebral is what we call a controller. It controls the requests for state change, runs them and notifies the UI when an update is due. It is in complete control of your application and knows everything that is going on. That is why the debugger can give you so much information about what is going on.

Your application will have one single controller:

```js
import {Controller} from 'cerebral'

const controller = Controller({})
```

The controller is where you define how your application is going to work. Everything from the state, to signals, providers and modules.

```js
import {Controller} from 'cerebral'

const controller = Controller({
  state: {},
  signals: {},
  modules: {},
  providers: []
})
```

The controller will then be exposed to your components.

```js
import {Controller} from 'cerebral'
import {Container} from 'cerebral/react'
import {render} from 'react-dom'
import App from './components/App'

const controller = Controller({
  state: {},
  signals: {},
  modules: {},
  providers: []
})

render((
  <Container controller={controller}>
    <App />
  </Container>
), document.querySelector('#app'))
```

The **Container** exposes the controller on the *context*, allowing any component to register to it.
{'fraction_non_alphanumeric': 0.11102661596958174, 'fraction_numerical': 0.0011406844106463879, 'mean_word_length': 4.391393442622951, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3865047', 'n_tokens_mistral': 718, 'n_tokens_neox': 698, 'n_words': 330}