> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thesys.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Interactivity

> Building dynamic, responsive user experiences by managing client-side state and handling server-side actions.

## Overview

C1 does more than just render static displays; it generates fully interactive components that can respond to user input, remember information, and dynamically update themselves. This guide provides a high-level overview of the concepts that make this interactivity possible.

### How Interactivity Works

In C1, a rich user experience is built upon two fundamental concepts: **Client-Side State** and **Actions**.

#### Client-Side State: Remembering User Input

C1 components are stateful. This means they can remember information within the client's browser, such as the text a user has typed into an input field or a selection from a dropdown menu. This state is managed automatically by the C1 SDK and can even be configured to persist across page reloads, ensuring a seamless user experience. Understanding state is the key to working with forms and creating custom components that feel native to your application.

#### Actions: Responding to User Input

An **Action** is any user interaction designed to trigger a response from your application. When a user clicks a button or submits a form, an action is triggered, which your application can then handle.

Actions are flexible and can be used to drive a variety of behaviors:

* **Client-side effects:** Handle an action entirely in the frontend to perform tasks like opening a URL, showing a modal, or updating local application state.
* **Generative updates:** Send the action's data to your backend server, which can then call the C1 API to generate a completely new C1 DSL response, dynamically updating the user interface.

This allows you to build everything from simple UI events to complex, evolving generative experiences.

### Guides in This Section

This section contains the following guides to help you master interactivity in C1.

* **[Managing State](/guides/interactivity/state)**
  How C1 handles component state automatically and how to plug your own custom components into its persistent state system using the `useC1State` hook.

* **[Handling Actions](/guides/interactivity/actions)**
  Dive deep into handling user interactions.

* **[Guide: Working with Forms](/guides/interactivity/forms)**
  A practical guide on how C1 generates and manages forms, leveraging both the state and action systems.

* **[Guide: Building Multi-Step Flows](/guides/interactivity/multi-step-flows)**
  A step-by-step tutorial on chaining actions together to create complex, workflow-driven user experiences.