How to Add HTML to Canvas So Games & Quizzes Work

You asked ChatGPT, Gemini, Claude, or Copilot for an HTML game, simulation, or quiz, and it ran right away when you opened it on your computer. Then you switched a Canvas page to the HTML Editor, pasted the code, and clicked Save—and the buttons, layout, or the whole activity stopped doing anything. That happens because Canvas's Rich Content Editor only keeps HTML elements on its security allowlist when you save, stripping out <script>, <style>, <form>, <input>, <button>, and <canvas>—the JavaScript, buttons, and drawing area an interactive activity relies on.

This guide walks through why HTML stops working inside a Canvas page, compares three ways to put HTML in Canvas depending on what you have, and gives the 5 steps to publish the page and add it to a module as an External URL with Load in a new tab checked. It also shows how to update your HTML without touching the Canvas module and how to check what students see using Student View.

Why Pasting HTML Into a Canvas Page Breaks Interactive Code

You can paste code into the Rich Content Editor by clicking the HTML Editor icon in the toolbar, yet an interactive game, simulation, or quiz from ChatGPT, Gemini, Claude, or Copilot will stop working as soon as you save. For security reasons, Canvas filters both custom HTML and pasted code against an allowlist (canvas_sanitize in Instructure's open-source instructure/canvas-lms code) and strips out any tag that is not on the list. While Canvas keeps static layout and media elements like headings, paragraphs, lists, tables, links, images, audio, video, and iframe, it removes script, style, form, input, button, and canvas tags when you save—wiping out a game's JavaScript, stylesheet rules, interactive buttons, and drawing area.

Because Canvas strips interactive code from pages—and .html is not among the file types Canvas DocViewer previews (such as .pdf, .docx, .pptx, and .txt)—an interactive HTML page needs to be hosted on an external link rather than pasted into the editor. In Canvas, go to Modules, click Add Item, select External URL from the drop-down menu, paste the URL, enter a page name, check Load in a new tab (which Canvas remembers as the default for your next External URL), and click Add Item. Leaving that box unchecked embeds the link in an iframe, and because a published Convika page refuses to be displayed inside another site, an unchecked External URL or a page iframe will only show an empty frame; with Load in a new tab selected, Canvas opens the activity outside of Canvas while still registering module progression. After publishing the item to the course, click View as Student to test it in Student View (indicated by the bar at the bottom of the screen), then click Leave Student View when you are done.

How to add HTML to Canvas by what you have

How you add HTML to Canvas depends on whether you are formatting a course page or running an interactive tool from ChatGPT, Gemini, Claude, or Copilot. Canvas's Rich Content Editor has an HTML Editor icon in the toolbar for pasting markup, and it keeps standard elements like headings, paragraphs, lists, tables, links, images, audio, video, and <iframe> tags. For security reasons, Canvas strips out tags that are not on its allowlist—including <script>, <style>, <form>, <input>, <button>, and <canvas>—the moment you save, which removes a game's or quiz's JavaScript, buttons, and drawing area.

If you only need formatted text, tables, or an <iframe> to a site that allows embedding, paste the code straight into the Rich Content Editor's HTML view. Uploading a .html file to Course Files is less predictable: Instructure's preview guide lists .pdf, .docx, .pptx, and .txt as files Canvas DocViewer can preview, leaves .html off the list, and doesn't cover what students see when they open one (and we didn't test it). When your HTML needs <script>, <button>, or <canvas> to work, publish the file to its own web address—such as with the upload box on this page—and add that link to a Canvas module as an External URL with Load in a new tab checked.

Publish your HTML and add it to a Canvas module in 5 steps

When you paste HTML into Canvas's Rich Content Editor, Canvas removes script, style, form, input, button, and canvas tags on save, so a quiz, simulation, or game stops working. Publishing the file on Convika gives it a working link you can add to your Canvas module.

1. Drop your file or paste the code in the upload box

In the upload box on this page, drop one .html or .htm file (up to 2 MB) under Upload a file, or switch to Paste code and paste the HTML from ChatGPT, Gemini, Claude, or Copilot. Then click Get my preview link. You don't need an account or an email for this step, though scripts and forms stay off in the initial preview (which lasts 3 minutes).

2. Keep the page and check that it runs

Click Keep this page — free, no card and sign up. Your page moves into your account exactly as you uploaded it, and its scripts, buttons, and styles now run so you can test the game or quiz yourself. The Free plan requires no credit card and includes 1 published page and 10,000 page views a month.

3. Publish the page for your course

On the page's screen, click Publish. In the dialog, choose Public (free) or Private link (Pro or pass). Anyone with the link can open either one without a password or an account. A Public page may show up in search results and in Convika's gallery; with a private link, Convika tells search engines to keep it out of their results.

4. Copy the live link

Your page goes live at an address like yourpage.convika.page, which stays the same until you click Unpublish. Free includes 10,000 page views a month across all your pages. Click Copy next to the Live URL to copy the address. (You can also click Show QR code next to it to put a QR code on the classroom screen or save it as a PNG.)

5. Add it to a Canvas module as an External URL in a new tab

In Canvas, open Modules, click Add Item, and choose External URL in the drop-down. Paste the URL, give it a page name, tick the Load in a new tab checkbox, and click Add Item. Be sure to tick Load in a new tab—published Convika pages refuse to be shown inside an iframe, so leaving it unchecked shows an empty frame. Publish the module item in Canvas, then click View as Student to test it (and Leave Student View when you're done).

Updating your HTML mid-term and keeping it to your course

If you fix a question or adjust the game mid-term, you do not have to edit the Canvas module item. On the page's screen in Convika, go to New version from a file, drop the updated .html file, and click Upload as a new version. You can check the changes in the preview while students keep seeing the current live version. When you are ready, click Publish v2 at the same link. Your yourpage.convika.page address and any QR code you saved from Show QR code stay the same, so the link in Canvas already points to the updated version.

When you click Publish, the dialog offers Public, which is free, and Private link (Pro or pass). Either way, anyone who clicks the link inside your Canvas course opens the page right away without an account or password. A Public page may show up in search results and in Convika's gallery; with a private link, Convika tells search engines to keep the page out of their results. If you want an extra gate, you can switch to Only people with the password on the Pro plan ($12 a month). Students enter the password once on Convika's password screen—not a school Microsoft or Canvas login—and their browser remembers it for 7 days.

Test the module item in Student View before class

Once you add the link to a module, use Canvas's Student View (detailed in Instructure's guide "How do I view a course as a test student using Student View?", checked October 19, 2026) to see what your students will see. Remember that both the module and the module item must be published for the Test Student to see them.

1. In your course, make sure the module and the External URL item are both published, then click View as Student. A box at the bottom of the screen confirms you are in Student View.
2. Go to Modules, click your new module item, and open the link in a new tab to make sure your HTML game, simulation, or quiz loads and responds the way you expect.
3. When you're done checking, click Leave Student View at the bottom of the screen to return to your course.

If you open the module item and see an empty frame inside Canvas instead of a button to open the link outside of Canvas, "Load in a new tab" wasn't checked when you added the External URL. Because a published Convika page refuses to be shown inside another site, Canvas can't display it in an iFrame inside the course page.

Frequently asked questions

Can you embed HTML in Canvas?

You can paste basic HTML into Canvas with the Rich Content Editor's HTML Editor icon, wait to save, and keep simple tags like headings, paragraphs, lists, tables, links, images, audio, video, and iframe. However, Canvas strips out script, style, form, input, button, and canvas tags when you save, so an interactive game, quiz, or simulation stops working. To run the full page, publish it on Convika from the upload box and add its Live URL to a Canvas Module as an External URL with Load in a new tab checked (since Convika pages refuse to load inside an iframe).

How do I upload an HTML file to Canvas?

Canvas DocViewer doesn't preview .html files, and pasting the code into the Rich Content Editor strips out the scripts and buttons that make an interactive file work. Instead, drop your .html or .htm file (up to 2 MB) into the upload box, click Keep this page — free, no card to sign up, and click Publish so its scripts run at a yourpage.convika.page address. Then in Canvas, go to Modules, click Add Item, choose External URL, paste your Live URL, check Load in a new tab, and click Add Item.

Why doesn't JavaScript work in Canvas?

Canvas removes <script> tags—along with style, form, input, button, and canvas—whenever you save in the Rich Content Editor for security reasons. Because those elements aren't on Canvas's allowlist, your game's JavaScript, buttons, and drawing area are stripped out before students ever see the page. When you publish the file on Convika instead (including on the Free plan) and link it from Canvas in a new tab, your scripts and https:// CDN libraries run. What stays blocked is a script calling another site, such as a leaderboard on another server or an AI model's API.

Can students open it without an account?

Yes—students don't need a Convika account to open your published page. When you click Publish, anyone with the link can open the page without a password or sign-in, whether you choose Public (free; it may show up in search results and in Convika's gallery) or Private link (Pro or pass; it stays out of both). If you want a shared password, Only people with the password is part of Pro ($12 a month) and remembers a student's browser for 7 days without using a school Microsoft or Canvas login.

Sources

• Instructure Community: How do I use the HTML view in the Rich Content Editor? (checked October 19, 2026)
• Instructure Community: How do I add an external URL as a module item? (checked October 19, 2026)
• Instructure Community: What types of files can I preview in Canvas? (checked October 19, 2026)
• Instructure Community: How do I view a course as a test student using Student View? (checked October 19, 2026)
• instructure/canvas-lms on GitHub: the HTML allowlist (canvas_sanitize.rb) (checked October 19, 2026)