Describe a change and the assistant edits the page with real units, so everything stays editable. Or bring in an existing page, a URL or a screenshot.
Updated . Covers Canvasly Web Studio 2.6.0.
AI Assistant
Click ✦ AI in the top bar to open the assistant beside the canvas. Pick a provider: Anthropic Claude, OpenAI, Google Gemini or Azure OpenAI. You use your own API key, entered under Settings.
Ask for things like "Build a SaaS landing page with hero, features, testimonials and FAQ" or "Turn the selected section into a 3-column card grid".
The assistant sees the page outline, the selected element, your design tokens and the unit catalogue.
Each reply is applied as one undo step and shows Applied N changes · Undo. If any change is invalid, nothing is applied and you are told why.
Paste a web address and the assistant reads that page and can copy its content and layout.
Links in the chat are clickable, and every message has a Copy button.
The assistant can edit the site header and footer too, and works during the free trial.
Your API keys are stored on your computer and shown masked. Requests go straight from the Studio to your provider.
MCP server: let AI apps build in Canvasly NEW
New in 2.6. Turn it on under Settings → MCP server, and AI apps such as Claude Code, Claude Desktop and Cursor can build in Canvasly through the Model Context Protocol. The settings page has copy-ready setup for each.
What the AI can do: read and edit projects, pages and elements, SEO and display conditions; work with the site header and footer, global classes, colours, type scale and Google Fonts; manage images, including searching Openverse and Unsplash; build menus and components; set up checkout; and import HTML, pages or whole websites.
Ready-made prompts: audit a page, build a page, rebuild a website, or create a design system.
Live sync: changes appear in the open editor at once, your unsaved edits are kept, and Ctrl+Z undoes the assistant's change.
Secure by default: the server listens only on your own computer and needs a token. Requests from web pages are refused, and script or delete actions need an extra switch.
Image → Layout
Attach or paste a screenshot, wireframe or mockup, then click Image → Layout. The assistant rebuilds it as a native, editable page.
Import HTML, CSS or a URL
Use Import in the top bar to paste HTML and CSS, import a URL (with or without AI), or load an .html file. Choose whether to append to the page, replace it, or create a new page.
Import → Whole website (new in 2.6) rebuilds an existing site: Canvasly reads its links and sitemap (respecting robots.txt), you choose up to 50 pages, and you get a new project in the same design. Images, backgrounds, SVGs, videos and web fonts are copied into the project once, the first page's header and footer can become the site header and footer, links between pages point to the new pages, and structured data is kept. The original site's scripts are listed for you, never copied.
Grid and flex sections are kept as columns, and sections keep their padding.
CSS classes become global classes, and :root variables become design tokens.
Open an existing HTML page
File → Open HTML File (Ctrl+O) turns any .html page into a new project, named after its title. It asks how to open the page:
Keep the original look (the default): every element keeps its tag, classes, attributes and inline style, the page's CSS stays as written, and every element can still be selected, moved and styled.
Rebuild with Canvasly units: the page is converted into native units.
Local images, video and audio are copied into the project's assets.
Local stylesheets are imported, and fonts and backgrounds they use are embedded.
Remote images and stylesheets stay as links. Missing files are listed.
Pages that build their content with JavaScript, or style it with Tailwind's CDN, are rendered safely before import, so their content and styles come across.
The original file is never changed. Export or Publish writes the edited site.
Edit HTML Code
Edit → Edit HTML Code (Ctrl+U, or </> HTML in the top bar) shows the current page as it is exported, with a comment line before each block, and opens at the selected block.
HTML tab: edit and click Apply. A Heading stays a Heading, a Button stays a Button, and untouched blocks keep every setting. New HTML becomes new blocks, and a <script> becomes a Custom Code block.
JavaScript tab: code for this page or for all pages, in <head> or before </body>. It runs on the published site and in Preview.
