How Rise Canvas was created

Phase 2 — Rise Canvas

Once I had 19 individual builders, a new problem emerged, they were still 19 separate things. Building a Rise lesson that used multiple custom components meant opening multiple builder files, copying HTML from each one, and pasting them separately into separate code blocks. It worked, but it wasn’t very nice and clunky to do.

Rise Canvas was the answer, a tool that brings all 19 builders together onto a single infinite canvas, lets you arrange them visually, and exports them all in a single HTML blob for one Rise code block.

The canvas architecture

The canvas is itself a single HTML file (index.html) that contains:

• A sidebar listing all 19 component types

• A canvas surface where block cards are placed

• A builder panel, a sliding iframe that loads whichever individual builder the user clicks, fully interactive

• An export function that assembles all block HTML into a single output

When a user selects a component from the sidebar, the relevant builder loads inside the panel iframe. They configure it exactly as they would in the standalone builder. When they click “Add to canvas”, the canvas calls buildHtml() on the builder iframe, pulls the generated HTML string out, and stores it in a block object with position, size and metadata.

Each block on the canvas is rendered as a card, an iframe showing the live component preview, surrounded by a header bar with edit, duplicate and delete controls, plus resize handles at the corners and edges.