# Tuil Overview

Source: /tuil/docs
Locale: en

Build production terminal applications with one typed renderer-neutral runtime.



tuil is a renderer-neutral framework for terminal applications that need more
than rendered text. It supports existing React Ink components and direct
renderer applications on the deterministic cell backend while coordinating
lifecycle, typed events, services, commands, focus, hotkeys, routes, forms,
workflows, operations, themes, plugins, source-owned components, semantic
tests, and portable stories.

## Choose a path [#choose-a-path]

<Cards>
  <Card title="Build your first app" href="/tuil/docs/introduction/quick-start">
    Scaffold a project with the CLI, run it, and understand the generated
    runtime boundary.
  </Card>

  <Card title="Understand the architecture" href="/tuil/docs/concepts/architecture">
    Follow ownership and data flow from the application runtime to terminal
    rendering.
  </Card>

  <Card title="Browse packages" href="/tuil/docs/reference/packages">
    Inspect every package, export, lifecycle contract, event surface, and
    focused example.
  </Card>

  <Card title="Explore components" href="/tuil/docs/reference/components">
    Open interactive stories for components, subcomponents, controls,
    callbacks, and semantics.
  </Card>
</Cards>

## The runtime at a glance [#the-runtime-at-a-glance]

<Mermaid
  chart="flowchart LR
  CLI[&#x22;CLI and registry&#x22;] --> App[&#x22;TuilApp&#x22;]
  App --> Services[&#x22;services and commands&#x22;]
  App --> Runtime[&#x22;events, focus, hotkeys, routes&#x22;]
  Runtime --> Renderer[&#x22;renderer application&#x22;]
  Renderer --> Ink[&#x22;React Ink compatibility&#x22;]
  Renderer --> Cell[&#x22;cell backend&#x22;]
  Ink --> UI[&#x22;components and application blocks&#x22;]
  Cell --> UI
  UI --> Semantics[&#x22;semantic tests and stories&#x22;]
  App --> Extensions[&#x22;plugins and typed extension points&#x22;]"
/>

## Install [#install]

Use the umbrella package when you want the complete runtime:

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @mwillbanks/tuil @mwillbanks/tuil-ink react ink
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @mwillbanks/tuil @mwillbanks/tuil-ink react ink
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @mwillbanks/tuil @mwillbanks/tuil-ink react ink
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @mwillbanks/tuil @mwillbanks/tuil-ink react ink
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Focused packages are independently installable. The [package
reference](/tuil/docs/reference/packages) documents ownership and compatibility for
each boundary.