​
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 dual capability 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 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 Dive deep into handling user interactions.
  • Guide: Working with Forms A practical guide on how C1 generates and manages forms, leveraging both the state and action systems.
  • Guide: Building Multi-Step Flows A step-by-step tutorial on chaining actions together to create complex, workflow-driven user experiences.