Guide — Canvas Designer

Getting Started

CD What is Canvas Designer?

Canvas Designer is a free page builder for Canvas LMS that runs in your browser. You build a page from sections and blocks — no coding needed — and get HTML that works in Canvas, on mobile and in dark mode.

There is nothing to install. Your work is saved automatically in your browser. To keep designs across computers, you can log in with your email address (no password) and save them in the cloud.

Key features:

Blocks for the page start (hero), headings, text, quotes, activities, boxes, media, interactive content and self-check exercises
Page templates and ready-made sections for module, assignment, discussion and quiz pages
Styles and colours on every block, and one page theme that keeps the headings and the hero consistent
Your institution's colours: change the palette once and every block follows
Universal design: headings in order, and text contrast of at least 4.5:1 (WCAG 2.1 AA) in every colour combination
Tested in Canvas on the web and in the Canvas mobile app, including dark mode
Norwegian and English interface

Step 1

Build

→

Step 2

Preview

→

Step 3

Export or publish

→

Step 4

Live in Canvas

Quick Start

Your first Canvas page in a few minutes.

Open the Designer

Go to learnsmith.eu/designer in a modern browser (Chrome, Firefox, Safari or Edge). There is nothing to install.
Start from a template or a section

Click Templates next to the search field in the sidebar for a complete page (module, assignment, article, quiz, syllabus and more). Or click Add section to choose a column layout or a ready-made section.
Add and edit blocks

Click a block in the sidebar, or drag it into a section. Click text on the page to edit it. The pen button opens the block's editor, and the style button on the block changes its style and colour.
Preview

Click Preview to hide the editing tools, and switch between desktop, tablet and mobile width to check the layout.
Export or publish

Click Export to copy Canvas-ready HTML. Or, once you have connected to Canvas, choose Canvas LMS → Publish to Canvas to send the page straight to your course.
Paste into Canvas

If you exported: open the page in Canvas, click Edit, switch to the HTML editor (</>), paste the code and save.

Tip: Saving your work

Your work is saved automatically in this browser. If you close the tab, just open the designer again. To keep a design for later, or open it on another computer, log in and click Save; you will find it under My designs.

The Interface

1 Sidebar — blocks

The left sidebar holds the blocks, in tabs: Text (hero, headings, paragraphs, quote), Activities, Boxes, Media, Interactive, Self-check and My elements (blocks you have saved). Click a block to add it, or drag it to where you want it. The search field finds any block, and Recent holds the blocks you used last.

Templates, next to the search field, opens the page templates.

2 Top bar — actions and settings

Everything sits in one bar at the top of the window:

Canvas LMS, next to the name — connect to Canvas, load a page from Canvas, publish to Canvas
Undo / Redo — up to 50 steps (Ctrl+Z / Ctrl+Y)
Clear — empty the page
Page frame — a frame around the whole page (gradient, accent or light), or none
Preview — hide the editing tools; the button next to it switches between desktop, tablet and mobile width
Save and My designs — save designs in the cloud and open them again (requires login)
Export — copy Canvas-ready HTML

At the right end are Help (this guide, the HTML course, quick help with shortcuts and an accessibility checklist, licence and privacy), Settings (the gear: hover preview, the icons in the blocks — emoji by default, Lucide icons, letters, or Font Awesome, which you turn on there only if your institution has added it to Canvas — and Color theme for your institution's colours), the language switch and Log in.

3 Page — your workspace

The centre is your page. It is built from sections, each with one to four columns. Hover over a block to see its controls: the drag handle, Edit (the pen) and More actions (move, duplicate, copy HTML, save to my library, delete).

Boxes, activities, quotes, headings and the hero have a style button that shows their name. Use it to change style, colour and background without retyping anything. Headings and the hero share one page theme: change it on one of them and the whole page follows.

Blocks & Templates

What you can add to a page.

Blocks

H

Hero & Headings

A page start with presets for module, assignment, discussion, quiz and resource pages — as a theme banner, a panel, or an image or pattern banner. Headings (H2–H4) with an optional label and icon.

T

Text & Quotes

Paragraph, lead paragraph, divider and numbered steps. Quotes in six styles, from a simple stripe to big quote marks and speech bubbles.

A

Activities

Video, reading, quiz, discussion, submission, reflection, group work, peer review, podcast and more — plus a learning path for a week's sequence.

i

Boxes

One box with ten types — info, highlight, note, reflection, definition, example, prerequisites, summary, key points and neutral — in two styles and nine colours. Plus boxes for resources and references.

M

Media & Interactive

Images, video with transcript, galleries and hotspot images. Accordions, tabs, tables, FAQ, buttons, navigation cards and grading criteria.

✓

Self-check

True or false, flashcards, worked examples, concept checks, sorting quiz and self-test worksheets — they work in Canvas without plug-ins.

Page Templates

A template gives you a complete page with placeholder text. Open the templates with Start from template. The recommended ones come first:

Module page — introduction, learning outcomes, structure and working methods
Assignment page — instructions, requirements and submission
Article page — a reading-friendly page with subtopics and a highlighted quote
Quiz page — instructions, scenarios, questions and feedback
Syllabus and Welcome page — course information and a start for new students
…and more under “More templates”: course front page, weekly learning path, discussion page, group work, resource hub and others

Ready-made Sections

Add section also offers ready-made sections: one finished part of a page, such as learning outcomes, module structure, instructions, submission or discussion guidelines. They are grouped by page type, so you can build a page piece by piece.

One Page Theme

Headings and the hero share a page theme — Clean, Ring, Tinted or Article — and one colour. Choose it with the style button on any heading or the hero, or under “Whole page” in their editors, and the whole page follows.

Publishing to Canvas

Two Ways to Get Your Design into Canvas

A Copy & Paste (Simple)

Nothing to set up. Works with any Canvas.

Click Export
Copy the HTML
In the Canvas page editor, open the HTML editor (</>)
Paste and save

No access token needed. Works everywhere.

B Publish to Canvas (Direct)

Send the page straight from the designer to Canvas. Needs a one-time setup, and a Canvas where the administrator allows access tokens.

Create a Canvas access token (see below)
Choose Canvas LMS → Connect to Canvas and enter your Canvas address and the token
Choose your course
Choose Canvas LMS → Publish to Canvas — a new page, or update an existing one

Quicker when you make many changes. Load from Canvas brings a page back into the designer.

How to create a Canvas access token

In your Canvas account: go to Account (sidebar) → Settings → scroll to Approved Integrations → click + New Access Token. Give it a name, optionally set an expiration date, and click Generate Token. Copy the token immediately — it won't be shown again. Is + New Access Token greyed out? Then your Canvas administrators have limited who can create tokens. They can create one for you — or use copy and paste (method A).

Free Canvas Lite Account

C Canvas Lite — free Canvas for educators

Instructure (the company behind Canvas) offers Canvas Lite, a free Canvas account for individual educators. It replaces the old Free-for-Teacher accounts, which Instructure closed for good in June 2026 after the security incident that spring. Canvas Lite is a good option if:

You want to test the Canvas Designer output before touching your institution's Canvas
You don't have Canvas access yet but want to start building
You want a place to try things out without real student data

Try Canvas Lite →

Canvas Lite is for educators at schools, colleges and universities, and for home schooling; commercial use is not allowed. It has limits (five published courses, 50 students per course, 500 MB of files) and no access tokens — so use Export and copy-paste there (method A); direct publishing (method B) needs an institution's Canvas where the administrator allows access tokens.

Privacy note

If you publish directly (method B above), your Canvas access token gives the same access as your Canvas account. Never share it, and consider setting an expiry date. The token is stored only in your browser and is sent to Canvas through the Canvas Designer proxy on learnsmith.eu, which is hosted in the EU.

Moving a Course to Another LMS

Canvas can export a course as a Common Cartridge file (.imscc), which Blackboard, Brightspace D2L, Moodle and others can import. Canvas Lite's terms don't say whether course export is included, so check before you build a whole course there.

In Canvas: go to Settings → Export Course Content → download the .imscc file → import it in the other LMS.

Tips & Best Practices

Do

Start with a template — customize from there
Use one page theme and your institution's colours for a calm, consistent page
Preview your page in Canvas Student View
Check how it looks on mobile
Use accordions and tabs to reduce scrolling
Keep headings in order (h2 → h3 → h4)

Don't

Rework the layout in Canvas's visual editor (it can break the layout)
Put your own <style> or <script> in the page — Canvas removes them. Classes are kept, and an institution can add CSS and JavaScript to its Canvas theme, but the designer's blocks don't rely on it, so they work at any institution and in the Canvas app
Rely solely on color to convey meaning (accessibility)
Create overly long pages — break content into modules
Skip the page start (a hero or a first heading) — it orients students

Tip: Make bigger changes in the designer

Small text changes are fine in Canvas's editor. For bigger changes, load the page back into the designer with Canvas LMS → Load from Canvas, edit it there and publish again. If you change the structure in Canvas, use the HTML editor (</>): the visual editor can reformat the layout.

Frequently Asked Questions

Yes. Canvas Designer is free and open source: AGPL-3.0 for the code and CC BY-SA 4.0 for the content. The HTML you make is yours. You only need to log in if you want to save designs in the cloud.

Yes. Copy and paste (method A) works with any Canvas. Publishing directly (method B) needs a Canvas access token, and that depends on your institution: the Canvas administrator decides whether users may create tokens. If + New Access Token under Account → Settings is greyed out, your Canvas administrators can create a token for you. The free Canvas Lite has no access tokens, so use copy and paste there.

No. Canvas Designer runs in your browser at learnsmith.eu/designer. Just open it and start building.

Yes. All blocks use layouts that wrap on narrow screens, and they are tested in Canvas on the web and in the Canvas mobile app, including dark mode. Columns stack on narrow screens automatically. A few interactive blocks (tabs, the sorting quiz) need Canvas in a web browser: they are marked in the sidebar, and the mobile app shows their content as plain text.

Yes. Small text changes in Canvas's editor are usually fine. For structural changes, use the HTML editor (</> button) — the visual editor may reformat complex layouts.

For bigger changes: load the page back into Canvas Designer (Canvas LMS → Load from Canvas), make the changes, and publish or paste it again.

Yes. Choose Canvas LMS → Load from Canvas, connect with your Canvas address and access token, and pick a page. The page comes in as blocks you can edit; blocks made with Canvas Designer keep their style and colour.

The designer is built on universal design: headings in order, decorative icons hidden from screen readers, text contrast of at least 4.5:1 (WCAG 2.1 AA) in every colour combination it offers, and no meaning carried by colour alone. Your own text and images matter too, so check the finished page with Canvas's accessibility checker.

The HTML output is standard and can work in any LMS that accepts custom HTML. The designs are specifically optimized for Canvas's HTML sanitizer (which is stricter than most), so they'll work anywhere Canvas-safe HTML works.

For a whole course: build it in Canvas, export it as a Common Cartridge file (IMSCC) and import it into Blackboard, Moodle, Brightspace and others.

Automatically in your browser (local storage). This means:

Your work persists between sessions (as long as you don't clear browser data)
Nothing leaves your computer unless you log in and save
If you switch browser or computer, you start fresh — unless you saved the design in the cloud

To save in the cloud, click Log in: you get a one-time login link by email, no password. Then Save keeps the design, and My designs opens it on any computer. Designs are stored in Helsinki, Finland (EU). See the privacy policy.

Norwegian (Bokmål) and English. It follows your browser's language, and you can switch with NB / EN at the top.

Yes, with the AI service your institution has approved. Open a page whose design you like and choose AI → Copy as AI prompt. Paste the prompt into your AI service with your text, or attach your document. The AI answers with a page description, not HTML. Copy the answer and choose AI → Paste from AI: the designer checks it and builds the page from its own blocks, so it works in Canvas, in dark mode and in the Canvas app. If something is wrong, the designer gives you a message to paste back to the AI. The designer sends nothing anywhere, and the page starts unpublished.

Need Help?

? Get in Touch

Canvas Designer is a personal project by Kaspar Bredahl Rasmussen, who works at Nord University.

Found a bug or have a feature request? Open an issue on GitHub:

View on GitHub