A decade of Canvas at your command — powered by our custom cutting-edge, continuously trained AI engineStart Building →
Generation Guide

Build anything with Canvas

Learn how to write great prompts, understand generation types, and get the most out of every credit you spend.

1,658+

Canvas components

85+

Industry niches

244

Block patterns

~3min

Avg generation time

Generation Types

Three ways to build

Choose the right generation type based on what you need. Each has its own credit cost, scope, and output.

Multi Page Niche Demos

20 credits
Multi-pageUp to 5 pagesShared nav & footerAll interlinked

Generates a complete multi-page website with up to 5 interlinked pages. All pages share a consistent header, navigation, and footer. Perfect for business websites, agency sites, niche demos, or full product sites.

What you get

  • index.html (home page)
  • about.html, services.html
  • portfolio.html or pricing.html
  • contact.html
  • Shared CSS + full navigation

Best for

  • Business / agency websites
  • Niche industry demos
  • Client project mockups
  • Portfolio websites
  • Product landing sites

Prompt tip

Specify the niche, style, and pages you need. Example: "Modern dental clinic website with home, services, about, team, and contact pages. Clean clinical design with navy and white."

One Page Demos

5 credits
1 HTML file4–7 sectionsHeader + footer included

Generates a single, complete HTML page with 4–7 content sections (based on your niche) (header and footer are always included but don't count toward the limit). The most popular type — ideal for landing pages, product pages, and inner pages.

Included sections

  • Header (always included)
  • Hero / banner section
  • Up to 5 more sections
  • Footer (always included)
  • Fully responsive layout

Best for

  • SaaS / app landing pages
  • Product pages
  • Service pages
  • About or team pages
  • Event / conference pages

Prompt tip

List the sections you want in order. Example: "SaaS landing page with: hero with product screenshot, 3-feature highlight row, how-it-works steps, pricing table with 3 tiers, and CTA banner."

Block / Section

1 credit
Single componentSelf-containedDrop-in ready

Generates a single reusable block or section — no header or footer. Output is self-contained HTML that you can drop into any existing Canvas page. The cheapest and fastest generation type.

Example blocks

  • Testimonials / reviews grid
  • Pricing comparison table
  • Feature bento grid
  • Team members section
  • FAQ accordion section

Best for

  • Filling gaps in existing pages
  • Testing new layout ideas
  • Reusable pattern library
  • Quick prototyping
  • Adding sections to templates

Prompt tip

Be specific about the layout style. Example: "Pricing table with 3 tiers (Starter, Pro, Enterprise) in a card layout. Highlight the Pro tier. Include annual/monthly toggle."

Edit Mode

Edit Mode — Customize Any Template

Browse the entire Canvas template library and modify any template using natural language prompts.

How Edit Mode works

Five steps from template to customized page

Step 1·

Browse by category

Explore the full Canvas template library — Niche Demos, Block Patterns, Portfolio, Blog, Events, and more.

Step 2·

Select and preview

Click any template to see a live preview before editing. No commitment required.

Step 3·

Describe your changes

Type what you want to change in plain English. No code required — just describe the outcome you want.

Step 4·

See cost analysis

Review the credit cost before committing. Know exactly what you'll spend before the AI touches a single line.

Step 5·

Watch changes in real-time

The AI applies your edits live. Watch the template update as the changes are streamed in.

Edit credit costs

Add section

Each new section added to the page

1 credit / section

Tweak 1–2 sections

Minor changes to existing content or styling

1 credit

Replace 1–2 sections

Swap out a section with a different one

1 credit

Tweak / replace 3+ sections

Larger edits spanning multiple sections

1 credit / section

Full page redesign

Rebuild the entire page from scratch

5 credits

Error fix

Fix a broken layout from a previous paid edit

FREE

1 per paid edit

Free fix system

Every paid edit includes 1 free fix. If something breaks or doesn't look right after an edit, request a fix at no extra cost. Free fixes cover layout issues, broken styles, or anything that went wrong — not new features.

Chained edits

Keep refining the same template — each edit updates the same file. Credits accumulate as you go. You can make as many chained edits as you like; the file is always the latest version.

Prompt tips for Edit Mode

Good prompts

  • "Replace the hero section with a dark gradient background and centered text"
  • "Add a testimonials section with 3 cards after the features section"
  • "Change the colour palette to navy and gold throughout"
  • "Swap the team section for a stats / numbers highlight row"

Bad prompts

  • "Make it better"

    Too vague — the AI needs to know what to change

  • "Fix the whole page"

    That's a redesign — costs 5 credits

  • "Make it look modern"

    No clear action; describe specific changes

  • "I don't like it, redo everything"

    Use Full page redesign instead

Credits

How credits work

Credits are deducted when you start a generation. Failed generations are automatically refunded. Credits never expire.

1

Submit prompt

Write your prompt and choose a generation type

2

Credits deducted

Credits are reserved upfront before generation starts

3

AI generates

Canvas AI builds your layout in real time

4

Download ready

Download your HTML or auto-refund if failed

Credit costs at a glance

Multi Page Niche Demos

Up to 5 interlinked pages

20 credits

$1.44 per page on Starter plan

One Page Demos

1 page, 4–7 sections

5 credits

$1.80 per page on Starter plan

Block / Section

1 reusable component

2 credits

$0.72 per block on Starter plan

Edit Mode

Modify any Canvas template

1–6 credits

Depends on edit scope

Revision

Modify an existing generation

1 credits

$0.36 per tweak on Starter plan

Auto-refunded

  • Generation fails due to a server error
  • AI cannot complete the requested layout
  • Network timeout during generation

Credits consumed (not refunded)

  • Successful generation (even if you don't download)
  • Generation completed but output doesn't match expectations
  • You cancel after generation has started

Prompt Guide

Write prompts that work

The better your prompt, the better your output. Here's how to get the most from Canvas AI.

Vague prompt

"Make a website for a restaurant"

AI makes all decisions. Output may not match your vision.

Specific prompt

"Upscale Italian restaurant landing page. Dark, moody aesthetic with deep burgundy and cream. Sections: hero with full-screen food photo, menu highlights (3 courses), about chef, reservations form, and Instagram gallery strip."

AI has a clear direction. Output matches expectations.

01

Name the niche

Always specify the industry or niche. "SaaS landing page", "medical clinic", "law firm" — the AI uses this to pick the right design language.

02

Describe the aesthetic

Add style adjectives: "dark and bold", "clean and minimal", "warm and inviting", "corporate and professional". This shapes typography, color, and imagery.

03

List your sections

For One Page Demos, list the sections you want: hero, features, pricing, testimonials, CTA. For Full Page, list the pages: home, about, services, contact.

04

Specify key content

Mention important content elements: "3 pricing tiers", "team of 4 people", "5-step how-it-works", "before/after comparison". The AI will include them.

05

Call out colours

If you have brand colours in mind, say so: "navy and gold", "emerald green with white", "warm terracotta palette". Avoids generic blue-and-white defaults.

06

Use revisions

Start with a base generation (5 credits), then refine with revisions (1 credit each). Cheaper than regenerating from scratch when you need tweaks.

Behind the Scenes

What happens when you generate

Canvas AI follows a multi-step process to ensure every output is production-ready, accessible, and fully responsive.

Analyzing requirements

~2s

Parses your prompt to identify niche, layout type, sections, colour palette, and content requirements.

Planning structure

~3s

Designs the page hierarchy, section order, grid layout, and component selection from the Canvas library.

Building hero section

~4s

Creates the hero/banner first — sets the visual tone, typography, and background treatment for the entire page.

Generating content sections

~10s

Builds each content section in sequence — features, pricing, testimonials, etc. — following Canvas conventions.

Adding images & media

~3s

Selects relevant stock images from Unsplash, applies proper aspect ratios and object-fit rules.

Optimizing for mobile

~3s

Validates responsive breakpoints, adjusts column stacks, and ensures touch targets meet minimum sizes.

Adding SEO metadata

~2s

Writes meta title, description, Open Graph tags, structured data (JSON-LD), and canonical URLs.

Checking accessibility

~2s

Validates ARIA labels, colour contrast (WCAG 2.1 AA), keyboard navigation, and alt text.

Final polish & review

~1s

Validates HTML structure, removes dev artefacts, and packages the clean output for download.

Be Informed

What to expect

CanvasBuilder is a powerful tool — but we believe in being upfront about how it works and where its edges are.

Inline styles are normal

Niche Demos and generated sections use custom inline CSS for colour palettes, typography, and layout. This is intentional — each layout is self-contained and ready to preview without external stylesheets beyond the Canvas framework.

Block sections = one section at a time

When your prompt describes multiple sections (e.g. hero + features + pricing), CanvasBuilder will ask you to choose which one to build. You can generate each section separately and combine them in the editor.

Multilingual content, English structure

You can generate layouts in 17 languages — but HTML classes, CSS property names, and Canvas framework attributes always remain in English. The visual content adapts; the code does not.

Generation times vary

Most layouts complete in under 3 minutes. Complex multi-page demos can take up to 5–8 minutes. If the AI servers are under heavy load, you may be asked to try again shortly.

Images are placeholder CDN assets

Generated layouts use niche-matched stock photography from our CDN library. These are for demo and layout purposes — you'll replace them with your own images before going live.

Download Package includes everything

Generated layouts bundle all CSS, JavaScript, fonts, and images in the ZIP. No additional purchase needed — download and deploy straight away.

FAQ

Frequently asked questions

Can I use the generated HTML commercially?

Yes. You own the generated HTML output and can use it for any commercial purpose. The Download Package includes all CSS, JavaScript, fonts, and images — everything you need to deploy.

Do credits expire?

No. Credits never expire as long as your account remains active. You can purchase once and use them over time.

What if my generation fails?

Credits are automatically refunded to your balance if a generation fails due to a server-side error or if the AI cannot complete the output. You'll see the refund in your credits instantly.

Can I revise a generated layout?

Yes. Revisions cost only 1 credit. From your History page, open any completed generation and submit a revision prompt describing the changes you want.

How does Edit Mode work?

Edit Mode lets you browse the full Canvas template library, pick any template, and modify it using plain English prompts. You see the credit cost before committing, and changes are applied in real-time. Each edit updates the same file — perfect for iterative refinement.

What counts as a 'free fix'?

Every paid Edit Mode edit includes 1 free fix. A free fix covers layout issues, broken styles, or anything that went wrong as a direct result of the edit — like a section that didn't render correctly or a style that broke unexpectedly. It does not cover new features or additional changes.

Can I edit the same template multiple times?

Yes — this is by design. Edit Mode uses chained edits: each edit updates the same file. You can keep refining until it's exactly right. Credits accumulate per edit, but you're always working on the latest version of the file.

What HTML files do I get?

One Page Demos and Block types produce a single .html file with inline or embedded CSS. Multi Page Niche Demos produces multiple .html files (one per page) with shared styles, all interlinked and ready to deploy.

Does the AI use my prompts to train future models?

No. Your prompts are used only to generate your layout and are stored in your history for re-download. They are never used to train AI models.

What is the Canvas template system?

Canvas is one of the most popular HTML/WordPress themes on ThemeForest (1,658+ HTML files, 85+ niche demos). Canvas Builder uses it as the design foundation — so every generated layout is built on a battle-tested, enterprise-grade template system. The Download Package bundles everything you need to deploy without any additional purchase.

Can I get a Canvas buyer bonus?

Yes. If you've purchased the Canvas HTML template on ThemeForest, you can verify via Envato login in Account settings and receive 10 free credits instantly. Requires active support.

Ready to start building?

Describe any layout — our AI builds it in under 3 minutes using 1,658+ Canvas components.