How Rise Canvas was created

The problem I was trying to solve

Articulate Rise is a very good authoring tool, but its built-in block library has limits. When you need something beyond the standard set, a stats infographic, a branching scenario with a bit more logic, interactions and infographics mixed in the same block, components you can resize and align yourself, you quickly run out of road.

Then Articulate introduced the code block, which lets you drop raw HTML, CSS and JavaScript straight into a lesson. For me that changed what Rise could be. If I could generate the right HTML, I could put almost anything in a course. So that was the starting point.

Phase 1: the individual component builders

The first question was what format the tools themselves should take, and I settled on self-contained single HTML files. No frameworks, no build step. Every builder is one file that opens in a browser and works. I wanted them trivial to share with colleagues, and trivial for me to maintain a year later without reconstructing a toolchain first.

Each builder is one HTML document with three parts:

• A panel of controls on the left: text inputs, colour pickers, sliders, toggles
• A live preview on the right, an iframe rendering exactly what Rise will render
• A buildHtml() function that reads the current settings and generates the finished HTML string

Building the first few

The earliest builders mattered most because they set the pattern everything since has followed. I started with the components I reached for most in my own courses, accordion first, then tabs and flip cards, and worked through the same questions for each: what content fields does it need, which style options are genuinely useful (as opposed to configurable for its own sake), and what does the exported HTML have to do at runtime in Rise, animation, interaction, accessibility.

Every builder keeps all its settings in a single JavaScript object called S, for State. Every control reads from S and writes back to it, and any change triggers a refresh() that regenerates the preview. The result is that the preview is never a mock-up; it is the actual export, so what you see in the builder is what lands in Rise.