Skip to content

Interactive Canvas ​

Interactive Canvas is a project workspace for learning, experiments, visual tools, and other work that is easier to do in a live page than in a linear chat.

A canvas is a real website stored in your project. Meowbert edits its files, you preview the page directly, and the conversation stays available in a compact side panel.

When to use it ​

Use Interactive Canvas when you want Meowbert to build or refine something you can inspect and interact with:

  • a learning playground,
  • a simulation or visual explanation,
  • a small local app,
  • an experiment dashboard,
  • a design or UI prototype,
  • or any project-specific website that should persist across tasks.

For one-off documents, slides, and rendered visual artifacts, the Canvas skill may still be a better fit. Interactive Canvas is for a project-level website you want to keep working on.

Start a canvas ​

  1. Open a project.
  2. Click New Task.
  3. Open Tools and turn on Interactive Canvas.
  4. Describe what you want Meowbert to build.
  5. Send the task.

Turning on Interactive Canvas does not create a blank canvas by itself. It gives Meowbert the canvas tool and the right project-level instructions. When Meowbert decides the task needs a canvas, it creates one, writes the real website files, and then the task opens in the canvas view.

Canvas view ​

The canvas view has two main areas:

  • Preview — the live website fills the main page.
  • Task sidebar — the active or latest task for that canvas stays beside the preview.

The top bar shows the canvas name, runtime mode, refresh control, file shortcut, and dev-server controls when the canvas uses a dev server.

On mobile, the preview and chat are separate tabs, with preview shown first.

Continue an existing canvas ​

From the Project Overview, use the Canvases section to open an existing canvas.

You can also open the attachment menu in a task or follow-up composer and choose Canvases. Selecting a canvas can attach it as context, and Canvas mode continues work against that canvas.

Files and persistence ​

Canvas files live in the project, not inside a single task run. That means future tasks can keep editing the same canvas.

Each canvas has:

  • a source folder under the project,
  • an entry file, usually index.html,
  • and a canvas.json manifest with title, entry file, runtime mode, and dev-server settings when needed.

Use the Files button in the canvas top bar to inspect or edit the canvas files directly.

Runtime modes ​

Most canvases start in Static mode. Static mode is fast and works well for plain HTML, CSS, and JavaScript.

If a canvas needs a local framework dev server, it can use Dev server mode. In that mode, Meowbert runs the configured development command for the canvas and the preview is proxied through Meowbert.

In-page Meowbert actions ​

Canvas pages can include buttons that ask Meowbert to keep working. For example, a page might have a Check my answer button or an Improve this view action.

Those actions do not receive backend credentials. They ask the parent Meowbert app to create a normal project task attached to the current canvas, so task history, billing, permissions, and follow-up behavior stay the same as any other task.