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

# Interactive blocks

> Add live widgets and visuals to a doc, and build or change them with Cleve

An interactive block is a small live web page inside your doc: a calculator, a quiz, a chart you can filter, a timeline, a simulation. Readers can click, type, and play with it right in the doc.

You don't need to write any code. Describe what you want and Cleve builds it. If you do write HTML, you can edit a block's markup directly.

## Add an interactive block

There are three ways to get one:

* **Visualise a section.** Put your cursor in a section, type `/` and choose **Visualise as widget**. Cleve turns that section into an interactive visual. See [Visualise a section](#visualise-a-section).
* **Start from the example.** Choose **Interactive block** from the slash menu or the toolbar's **Insert** menu. Cleve adds a small example widget (a cat you can pet) that you can then change.
* **Ask in chat.** Ask Cleve to add one, for example *"Add a compound interest calculator under the Savings heading"*. See [Chat with Cleve](https://docs.cleve.ai/features/ai-chat.md).

## Visualise a section

**Visualise as widget** is the quickest way to turn text into something visual.

1. Click on an empty line in the section you want to visualise.
2. Type `/` and choose **Visualise as widget**.
3. A block appears with *"Your visual will appear here."* and a message box below it, already filled in with a request to visualise the section you're in. Edit the request if you like, for example *"as a timeline"* or *"as a bar chart comparing the three options"*.
4. Press `Enter` to send. Cleve reads the doc and builds the visual. Your original text stays unchanged.

**Visualise as widget** appears only in docs you can edit.

## Edit with Cleve

To change a block, open its **···** menu (**HTML block actions**) and choose **Edit**. You can also click the block and press `Enter`.

A message box opens under the block. Describe a change, such as *"make the bars blue"* or *"add a reset button"*, and press `Enter`.

* While Cleve works, you'll see **Cleve is editing…**. Click the stop button to cancel.
* When Cleve is done, the block updates in place.
* If Cleve answers instead of changing the block, for example to ask a question, its reply appears under the message box.
* Click **Open in chat** to see the full conversation in the chat panel. Each block keeps its own conversation, saved in your chats as **Edit · \[block title]**, so you can keep refining it.

Edits from the message box are ordinary messages to Cleve. They run on [Auto](https://docs.cleve.ai/features/models.md) in Edit mode with the same tools as the chat panel, and they use your [usage](https://docs.cleve.ai/pricing/usage.md). Each change is saved in the doc's [version history](https://docs.cleve.ai/features/version-history.md), so you can go back.

## Block actions

Every interactive block has a **···** menu at its top right:

| Action | What it does |
| - | - |
| **Edit** | Describe a change for Cleve to make |
| **Full screen** | Show the block full screen. Choose **Exit full screen** or press `Esc` to return |
| **Move up** / **Move down** | Move the block past the block above or below it |
| **Copy block** | Copy the block so you can paste it into another doc |
| **Duplicate** | Insert a copy directly below |
| **Edit HTML** | Edit the block's title and HTML yourself |
| **Delete** | Remove the block |

People with view access see only **Full screen**.

Keyboard shortcuts, with the block selected:

| Action | Mac | Windows |
| - | - | - |
| Edit with Cleve | `↵` | `Enter` |
| Move up / down | `⌥↑` / `⌥↓` | `Alt+↑` / `Alt+↓` |
| Duplicate | `⌘D` | `Ctrl+D` |

You can also drag a block by its top edge to move it.

### Copy and paste blocks

**Copy block** copies the block in two forms. Pasted into a Cleve doc, it comes back as a working block. Pasted anywhere else, such as a Markdown file or another chat, it appears as a fenced code block that starts with ` ```html cleve-block `. Pasting that text back into a Cleve doc turns it into a live block again.

## Edit the HTML yourself

Choose **Edit HTML** to open the editor. It has two fields:

* **Title**: an optional caption, used to identify the block (for example in its chat conversation).
* **HTML**: the block's markup, including any `<style>` and `<script>` tags.

Click **Save** to apply your changes. A block can hold up to 100,000 characters of HTML; the counter below the field turns red if you go over, and you'll need to shorten it before saving.

### Match the doc's theme

Interactive blocks follow your doc's light or dark theme, and switch with it without reloading or losing what the reader entered. If you write your own HTML, these CSS variables give you the theme's colours:

| Variable | Use |
| - | - |
| `--cleve-bg`, `--cleve-page`, `--cleve-surface` | Backgrounds |
| `--cleve-fg`, `--cleve-muted` | Text |
| `--cleve-border`, `--cleve-ring` | Borders and focus rings |
| `--cleve-accent`, `--cleve-primary`, `--cleve-primary-fg` | Links, buttons, and button text |
| `--cleve-chart-1` to `--cleve-chart-5` | Chart series |

The block's root element also carries `data-theme="light"` or `data-theme="dark"`. For canvas or chart libraries that don't use CSS, listen for the `cleve:themechange` event and redraw.

## What blocks can and can't do

Each block runs in its own sandbox, separate from Cleve and from the rest of your doc. This keeps you and your readers safe, and it sets some limits:

* **Scripts and styles work**, including libraries loaded from cdnjs or jsDelivr.
* **No network requests.** A block can't fetch data from the internet or call an API. Put the data it needs in the HTML, or ask Cleve to.
* **Images and fonts** must be embedded in the HTML or loaded from cdnjs or jsDelivr.
* **No access to your account.** A block can't read the rest of the doc, your other docs, or your sign-in.
* **No leaving the page.** If a block tries to navigate somewhere else, it's stopped and shows *"This block tried to navigate away and was stopped."*
* **Height:** a block grows to fit its content, up to 2,000 pixels tall.

## Where blocks run

Interactive blocks work wherever your doc is shown: in the editor, for people you've shared the doc with, and in docs you've [published](https://docs.cleve.ai/features/publishing.md).

When a doc is read rather than edited, such as a shared or published view, the first 20 interactive blocks run. Any after that show *"Too many interactive blocks. Open this doc in the editor to run it."*

## Related

> **[Blocks](https://docs.cleve.ai/features/blocks.md)**
>
> Callouts, tables, math, code, Mermaid diagrams, and images.

> **[Chat with Cleve](https://docs.cleve.ai/features/ai-chat.md)**
>
> Ask Cleve to build and edit content in your docs.

> **[Publishing](https://docs.cleve.ai/features/publishing.md)**
>
> Share docs with interactive blocks on your profile.

> **[How usage works](https://docs.cleve.ai/pricing/usage.md)**
>
> What uses more of your plan's usage.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.