> ## 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.

# Manual Editing

> Allow users to directly and manually edit the content of generated slides and reports

<Frame>
  <video autoPlay muted loop playsInline src="https://mintcdn.com/thesys/IUBQ6AU_RODh0plO/guides/artifacts/editing/artifact-edit.mp4?fit=max&auto=format&n=IUBQ6AU_RODh0plO&q=85&s=8e5fd0f4b162452ab9a3cda8f92fa7a7" data-path="guides/artifacts/editing/artifact-edit.mp4" />
</Frame>

You can make generated artifacts, such as slides and reports, directly editable by the user. By enabling this feature, an "Edit" button appears on the artifact. When clicked, it allows the user to modify the content—like changing text, updating titles, or correcting data—as if they were editing a document.

This is an opt-in feature that is enabled with a single prop on your C1 components.

### Implementation

To enable artifact editing, you need to pass the `enableArtifactEdit: true` flag to the C1 component you are using.

#### Using `<C1Component>`

Pass the `enableArtifactEdit` prop directly to the component.

```tsx theme={null}
import { C1Component, ThemeProvider } from "@thesysai/genui-sdk";

function MyArtifactViewer({ c1Response, updateMessage }) {
  return (
    <ThemeProvider>
      <C1Component
        c1Response={c1Response}
        enableArtifactEdit={true}
        updateMessage={updateMessage} // Crucial for saving the user's edits
      />
    </ThemeProvider>
  );
}
```

#### Using `<C1Chat>`

Pass `enableArtifactEdit: true` inside the `customizeC1` prop object.

```tsx theme={null}
import { C1Chat } from "@thesysai/genui-sdk";

function MyChat() {
  return (
    <C1Chat
      apiUrl="/api/chat"
      customizeC1={{
        enableArtifactEdit: true,
      }}
      // Ensure your useThreadManager hook is configured
      // to handle onUpdateMessage for persistence.
    />
  );
}
```

### How It Works

When `enableArtifactEdit` is set to `true`, the C1 UI renders an "Edit" button on the artifact. Clicking this button makes the artifact's content fields editable, allowing the user to make direct changes.

#### Persisting the Changes

After a user finishes editing and saves their changes, the component's internal state is updated. To ensure these changes are not lost, a callback is triggered with the new, modified content.

* For **`<C1Component>`**, the `updateMessage` callback fires.
* For **`<C1Chat>`** (or when using `useThreadManager`), the `onUpdateMessage` callback fires.

You must implement these callbacks to save the updated message content to your database. This keeps your backend state consistent with the manual edits the user sees on the frontend. Without this step, any manual changes will be lost on the next page load.