🧠 All Things AI
Beginner

Gemini Canvas

Canvas is a dedicated interactive workspace within the Gemini chat interface, launched on March 18, 2025. Instead of receiving AI responses as plain text that you then copy elsewhere, Canvas gives you a live editable document or code editor alongside your conversation — letting you refine, restructure, and export your work without ever leaving Gemini.

How It Works

When you ask Gemini to write a document, draft a blog post, or generate code, it can open Canvas automatically — or you can trigger it manually. The interface splits into two panes:

  • Left pane: The conversation. You continue chatting with Gemini here, asking for changes, giving feedback, or requesting new sections.
  • Right pane: The live document or code editor. Content appears here and updates in real time as Gemini makes changes. You can also type directly in this pane to edit manually.

Canvas is available on Free and Pro plans, in all Gemini-supported languages, globally.

Canvas for Writing

The writing mode is optimised for long-form content — reports, blog posts, proposals, essays, and email drafts. Key capabilities include:

  • Inline refinement: Select any passage and ask Gemini to rewrite it with a different tone, length, or approach — only that section updates.
  • Quick-edit tools: Buttons for common transformations — shorten, expand, make more formal, simplify — available directly in the Canvas toolbar.
  • Format preservation: Headings, bullet points, tables, and bold/italic formatting are maintained as you iterate.
  • Google Docs export: A single button sends the full Canvas document into a new Google Doc in your Drive. Formatting is preserved.

Canvas for Code

The code mode turns Canvas into a mini code editor with live preview. Key capabilities:

  • React and HTML app prototyping: Generate a working web app and see it rendered live in the right pane without any local setup.
  • Diff-based edits: When you ask Gemini to modify a function or component, changes are shown as a diff turn-by-turn — you can see exactly what changed and why.
  • Iterative development: Treat it like a pair-programming session — ask for a feature, review the diff, ask for adjustments, repeat.
  • Syntax highlighting: Standard code editor presentation with language-aware highlighting.

Practical Use Cases

Drafting Reports

Generate a first draft from bullet points, then use inline refinement to polish each section. Export directly to Google Docs for sharing.

Web Prototyping

Describe a UI and get a working React component with live preview — test interactions immediately without leaving the browser.

Iterative Writing

Write a cover letter, ask Gemini to make it more concise, then change the tone to match a specific company culture — all without restarting the conversation.

Code Debugging

Paste broken code into Canvas, describe the bug, see the fix applied as a diff, verify it makes sense, and copy the corrected version.

Checklist

  • What are the two panes in the Gemini Canvas interface, and what does each contain?
  • How do inline refinements work in writing mode — does Gemini regenerate the whole document?
  • What web frameworks does Canvas support for live code preview?
  • How do you export a Canvas document to Google Docs?
  • Which Gemini plans and regions support Canvas?