Interactive blocks

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

​

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 in Edit mode with the same tools as the chat panel, and they use your usage. Each change is saved in the doc’s version history, so you can go back.

​

Block actions

Every interactive block has a ··· menu at its top right: People with view access see only Full screen. Keyboard shortcuts, with the block selected: 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: 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. 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