Guide — Canvas Designer

Getting Started

CD What is Canvas Designer?

Canvas Designer is a free, browser-based visual page builder for Canvas LMS. It lets educators design rich, accessible course pages using drag-and-drop — no coding required.

Everything runs in your browser. No server, no account, no installation. Your work is saved automatically in your browser's local storage.

Key features:

140+ pre-built elements: headers, activities, info boxes, accordions, tabs, tables, and more
Page templates for modules, assignments, discussions, quizzes, and articles
Brand color system — change your palette once, it applies everywhere
Dark mode tested — all output works in Canvas mobile dark mode
WCAG accessible output with proper heading hierarchy and contrast
Bilingual interface (Norwegian/English)

Step 1

Design

→

Step 2

Preview

→

Step 3

Export HTML

→

Step 4

Paste in Canvas

Quick Start

Get your first Canvas page designed in under 5 minutes.

Open the Designer

Open canvas-designer.html in any modern browser (Chrome, Firefox, Safari, Edge). No installation needed — it's a single file.
Pick a Template (or start blank)

Click Templates in the toolbar to start from a pre-built page layout (module landing, assignment, discussion, etc.) — or just start dragging elements from the sidebar.
Drag & Edit Elements

Add elements from the left sidebar by clicking or dragging them onto the canvas. Click any element to edit its content. Rearrange by dragging elements up or down.
Export Your HTML

Click Export HTML in the toolbar. The designer generates Canvas-safe HTML that you can copy to your clipboard.
Paste into Canvas

In Canvas, open your page's editor, switch to HTML view (click </>), paste the code, and save. Your designed page appears instantly.

Tip: Auto-save

Your work is automatically saved to your browser's local storage. If you accidentally close the tab, just reopen the designer and your canvas will be restored.

The Interface

1 Sidebar — Element Palette

The left sidebar contains all available elements organized by category: page types, text, activities, info boxes, and complex structures. Click an element to add it to the canvas, or drag it to a specific position.

Toggle "Extra design" at the bottom to reveal 20+ additional advanced elements.

2 Toolbar — Actions & Settings

The top toolbar contains your main actions:

Templates — browse and load full page templates
Page Style — pick a page type (module, assignment, discussion, quiz) which sets colors and header styles
Brand Colors — customize the color palette for all elements
Export HTML — generate Canvas-ready HTML
Publish — push directly to Canvas via API (optional)
Import — pull an existing Canvas page into the designer
Undo / Redo — up to 50 steps of history

3 Canvas — Your Workspace

The center area is your live canvas. Each element shows a control bar when you hover over it, letting you edit, move, duplicate, or delete it. Click an element to open its editor — most complex elements (tables, accordions, tabs) have dedicated builder modals.

Elements & Templates

Everything you can add to a page.

Element Categories

H

Page Headers

Module, assignment, discussion, and quiz headers in simple or gradient styles.

T

Text & Typography

Headings, paragraphs, lead text, quotes, pull quotes, dividers.

A

Activities

Video, reading, quiz, discussion, submission, and reflection cards with color picker.

i

Info Boxes

Customizable boxes with icon, color, border style, and rich-text content.

S

Structures

Accordions, tabs, tables, numbered steps, rubrics, process timelines.

G

Layout & Grid

Multi-column grids, navigation cards, button rows, anchor navigation.

Page Templates

Templates give you a complete, pre-filled page scaffold. Choose one from the Template picker and customize the content to match your course. Available templates include:

Module Landing Page — overview, learning outcomes, weekly structure
Assignment Page — instructions, rubric, submission guide
Discussion Prompt — topic introduction, guidelines, starter questions
Resource / Article Page — reading-friendly layout with anchor nav
Weekly Learning Path — day-by-day activity schedule
...and more, including blank "skeleton" templates with placeholder text

Publishing to Canvas

Two Ways to Get Your Design into Canvas

A Copy & Paste (Simple)

The zero-config approach. Works with any Canvas instance.

Click Export HTML
Copy the generated code
In Canvas page editor, switch to HTML view
Paste and save

No API keys needed. Works everywhere.

B Publish via API (Direct)

Push directly from the designer to Canvas. Requires a one-time setup.

Generate a Canvas API token
Enter your Canvas URL + token in settings
Select your course
Click Publish — choose new page or update existing

Faster for iterating. Requires proxy server.

How to generate a Canvas API 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.

Free Canvas Account

C Instructure's Free Canvas for Teachers

Instructure (the company behind Canvas) offers a free Canvas account where educators can create course shells to develop and test content. This 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 sandbox environment with no student data concerns

Create Free Canvas Account →

After building your course, export it from Canvas and import it into your institution's LMS.

Privacy note

If you use the direct publish feature (method B above), your Canvas API token gives access to your Canvas account. Never share your token, and consider setting an expiration date. The Canvas Designer stores credentials only in your browser's local storage — nothing is sent to any third-party server.

Export to Other LMS Platforms

Built your course in the free Canvas? You can export it for use in other LMS platforms. Canvas exports in IMSCC format, which is compatible with Blackboard, Brightspace D2L, Moodle, and others.

In Canvas: go to Settings → Export Course Content → download the .imscc file → import it in your institution's LMS.

Tips & Best Practices

Do

Start with a template — customize from there
Use the brand color system for consistency
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

Edit the exported HTML in Canvas's visual editor (it can break layout)
Use custom CSS or JavaScript — Canvas strips it
Rely solely on color to convey meaning (accessibility)
Create overly long pages — break content into modules
Skip the page header — it orients students

Tip: Edit in HTML view only

After pasting your exported HTML into Canvas, always edit in HTML view (the </> button). Canvas's visual (WYSIWYG) editor can sometimes reformat your carefully structured HTML. If you need to make small text changes, the visual editor is usually fine — but for structural edits, use HTML view.

Frequently Asked Questions

Yes, completely free and open source. It runs entirely in your browser — no account, no subscription, no server costs.

Yes. The copy-paste workflow (Method A) works with any Canvas instance. The direct publish workflow (Method B) requires your Canvas instance to allow API access, which most do.

No. Canvas Designer is a single HTML file that runs in any modern browser. Just open it and start designing.

Yes. All elements are built with responsive layouts (flex/grid with wrapping) and tested in both Canvas web and the Canvas mobile app, including dark mode. Grid layouts stack on narrow screens automatically.

Yes, but use the HTML editor (</> button) for structural changes. Small text edits in the visual editor are usually fine, but it may reformat complex HTML layouts.

For best results: make changes in Canvas Designer, re-export, and paste the updated HTML.

Yes. Click Import in the toolbar, enter your Canvas credentials and select a page. The designer will pull the page content and load each block as an editable element. You can then rearrange, edit, and re-export.

The designer follows accessible design patterns: proper heading hierarchy (h2 → h3 → h4), high contrast colors (7:1 ratio for body text), semantic HTML, and ARIA labels. Content is tested to meet WCAG 2.2 AA/AAA standards. That said, always verify with your institution's accessibility tools.

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 complete course migration: build in Canvas (free account), then export as IMSCC and import into Blackboard, Moodle, Brightspace, etc.

Automatically in your browser's local storage. This means:

Your work persists between sessions (as long as you don't clear browser data)
Nothing is sent to any server
If you switch browsers or computers, you'll start fresh

For backup: export your HTML and keep a copy. You can also use the Import feature to reload a Canvas page you previously published.

The interface is available in Norwegian (Bokmål) and English. It auto-detects your browser language and you can switch manually using the language toggle in the header.

Need Help?

? Get in Touch

Canvas Designer is developed by Kaspar Bredahl Rasmussen at Nord University.

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

View on GitHub