Code Block Creator Tool

New UX/UI version created with much greater functionality

Thank you for sharing. This is really helpful.

In my latest update, Rise Canvas has had a big run of improvements and new functionality. Here's everything that changed.

New completion coordinator. Previously, if you had more than one interactive component on a slide and wanted the lesson to wait for all of them before letting the learner continue, it just didn't work properly, whichever component finished first would trigger completion. That's now fixed. Every block on the canvas has a target toggle, and you can mark exactly which components are required. The lesson will only report as complete once every marked component has been finished. If you don't mark anything, it behaves as before, so nothing breaks for existing projects.

Off the back of that, completion firing is now far more consistent across the whole suite. A lot more components can now signal completion, not just quizzes and checklists. The reveal-based components, accordion, tabs, flip cards, carousel, and the expanding infographic, now fire completion once the learner has opened or viewed every item. The branching scenario completes when an outcome is reached, and the labelled graphic completes once all the hotspots have been viewed. 

There's a brand-new Audio builder. It lets you add narration, music, or ambient sound to a Rise lesson with three player styles, a full player with artwork and progress bar, a slim minimal bar, and an invisible ambient mode that just shows a little animated equalizer. You get three playback modes too: autoplay when the learner reaches the block, a muted start with an unmute button, or manual play. There's a loop toggle, full colour control, optional artwork. It also warns you if an uploaded audio file is large enough to cause problems in a Rise code block.

The Labelled Graphic builder got a lot of attention. You can now control the marker size with a slider, and the markers scale properly, both the circle and the number or icon inside it grow together, with the pulse animation scaling to match. The viewed markers now fade slightly once a learner has opened them, so it's clear at a glance which hotspots are left to explore. You can also now set the modal heading and body text colours independently, which is handy for matching your brand or making text readable against different modal backgrounds. The close button on the modal was also fixed so it stays visible against any background colour, including white.

There's a new global font selector in the canvas toolbar. Pick from twelve fonts commonly used in e-learning, and your choice is applied to the exported HTML with the matching web font loaded automatically. There's a small info button next to it that explains the font change shows up in the final output rather than the in-app previews, so there's no confusion about what it does. Your font choice is remembered between sessions.

A few quality-of-life fixes round things out. The quiz answer boxes used to go semi-transparent when selected or marked correct or incorrect, which made the text hard to read if you had a background image on your Rise lesson, those are now solid, so text stays clear over any background. The cluttered hint text was taken out of the build toolbar. And a stacking bug was fixed where canvas blocks could sometimes display on top of the builder panel when you'd added a lot of components.

As always, everything still exports as standalone HTML that drops straight into a Rise 360 code block, with no external dependencies.

Another big batch of improvements has landed in Rise Canvas. Here's what's new.

The standout addition is a shared brand palette system. If you build courses for multiple clients, you'll know the pain of typing the same brand hex codes into builder after builder. Now you can set them up once. A new Palettes button in the canvas toolbar opens a manager where you create up to four named palettes, one per client, say, "Acme Corp" or "NHS Trust". Within each palette you add colours either by picking them visually or by typing and pasting a hex code directly, and you can drag them to reorder or remove any you don't want. You choose which palette is active, and its colours then appear as a row of one-click swatches next to every single colour picker across all twenty builders. Click a swatch and the colour applies instantly. Switching the active palette only changes which shortcuts are offered, it never recolours work you've already done. Each palette can hold up to twenty colours, and you can delete a whole palette with a quick two-click confirm.

The audio builder picked up a useful new option. When autoplay mode is selected, you can now set a start delay, type any number of seconds and the narration will hold for that long after the block scrolls into view before playing. It's perfect for letting a slide settle before the voiceover kicks in. The delay field only appears when autoplay is selected, since it doesn't apply to the other modes. The audio builder was also tidied up so its toolbar matches the other builders.

This is a fantastic resource. Thank you so much for sharing it! 

Launched another update. This one is less about one big new feature and more about a wave of refinements that make Rise Canvas noticeably nicer to build with, plus a couple of fixes to things that had been quietly annoying. Here’s what’s changed since last time.

The biggest single improvement is around layering and how your layout actually comes out the other end. You can now control the stacking order of overlapping components. Each block on the canvas has four new buttons, bring to front, forward one, backward one, and send to back, so if you want a speech bubble sitting on top of an image, or a callout layered over a card, you can set exactly which sits above which. More importantly, that layer order now carries through to the exported HTML. Previously the canvas worked out stacking purely from position, so the order you carefully set on screen didn’t necessarily survive into Rise. Now it does.

Closely related, and honestly the fix I’m most pleased with, the exported layout now faithfully matches what you arrange in Design mode. There was a subtle but maddening problem where the output didn’t look like the canvas, an image would balloon to full width, and a component layered over it would drift out of position. The export now reproduces your Design-view layout at its true proportions, sized and positioned exactly as you placed everything, and it scales down gracefully if the space it lands in is narrower than your design. What you arrange is what you get.

A lot of work went into the builders themselves becoming more pleasant to use. Across the Card Carousel, Flip Cards, Infographic Cards, Process Steps, Stats & KPI, Accordion and Expanding Infographic builders, the card-editing section has been moved up to sit directly beneath the live preview, laid out in neat rows rather than stranded in a tall column with a big empty grey area beside it. It’s a much more compact, sensible use of the space. While doing that I also fixed a genuinely irritating bug,  when you typed into a card field, the editor boxes would jump and vibrate on every keystroke, because each character was triggering a full rebuild of the preview. Typing is now smooth, your text registers instantly, but the preview quietly catches up a moment after you pause, with no more jitter. Long words that used to spill out past the edge of a carousel card now wrap properly inside it, too.

There was a toggle that affected every builder. When you added a component to the canvas and then reopened it to edit, all the toggle switches showed their default positions even though the component itself was unchanged, so to flip a switch you had to click it twice, the first click just snapping it back into sync. That’s fixed everywhere now, reopen a component and every toggle shows its true state, and a single click does what you’d expect.

Some other minor changes to the UI also applied.

As always, everything you make is exported as standalone HTML that drops straight into a Rise 360 code block.

A quick one this morning, prompted by some helpful feedback from someone 'kicking the tyres' on Rise Canvas. They pointed out that the flip cards weren't reflowing nicely on a phone, instead of stacking into a single column, they stayed in their desktop column count and got crammed into tiny widths with text spilling over. They'd even gone to the trouble of documenting Rise's own responsive breakpoints, which was generous and genuinely useful.

It turned out to be a regression rather than something I'd never built. An earlier version of the flip cards did collapse to a single column on small screens, and somewhere along the way that responsive rule got lost.

So it's now restored, and improved a little while I was at it. The exported card grids reflow as the screen narrows, your chosen column count on desktop, dropping to two columns on tablet widths and a single stacked column on phones, all aligned to the breakpoints Rise itself uses. It never shows more columns than you set, so a two-column layout stays sensible and a four-column one steps down gracefully.

It wasn't just the flip cards, the same fix went across every grid-based component, so Infographic Cards, Stats & KPI, the Expanding Infographic and the Sorting Activity drop zones all stack properly on mobile now too.

Thanks to the reviewer for the nudge; exactly the kind of real-world testing that makes the tool better.

This is a great tool and thank you so much for sharing. I was able to access this last week with no issue, however, today when I attempted to open it, it's requiring a password.  Can you provide me with the password, please?