Canopy In-Page Editor

Overview

The Canopy In-Page Editor was designed to empower non-technical content editors to manage site content seamlessly without code changes. My role was to re-engineer the legacy editor, which suffered from architectural flaws that compromised site styling when using the editor.

The Architectural Challenge: DOM Pollution

The legacy implementation injected bounding boxes and editing logic directly into the DOM tree. By wrapping editable elements in helper divs, it frequently broke CSS inheritance—specifically for Flexbox, Grid, and absolute positioning—as it introduced unexpected child-parent relationships.

The Legacy Issue (Pseudo-code):

Canopy Code

{{ cms_text('mytextcontent', { value: 'Hello World', class: 'font-medium text-purple-500' }) }}

Rendered by Canvas engine as

<div class="font-medium text-purple-500">Hello World</div>

When this element is selected on the Canopy Editor

<div class="canopy-border-overlay">
  <div class="font-medium text-purple-500">Hello World</div>
</div>

To resolve this, I re-engineered the editor to be entirely non-invasive. I moved the editing UI into a separate layer that "floats" above the site content.

I utilised the ResizeObserver to track the precise coordinates and dimensions of editable elements in real-time. This allowed me to project a visual bounding box as a decoupled overlay without modifying the site’s underlying HTML structure or CSS.

To manage the relationship between the UI and the CMS data, I implemented a data-attribute strategy.

<div
  data-editable="true"
  class="text-white text-xl font-bold text-center max-w-4xl leading-7"
  data-options='{
    "name": "hero-description_019c4ef1-f82a-73dd-9845",
    "type": "text",
    "data": {
      "name": "hero-description_019c4ef1-f82a-73dd-9845",
      "value": "Hello World"
    }
  }'
>
  Hello World
</div>

Key Technical Outcomes

Zero Layout Shift: By decoupling the UI, the editor no longer interferes with the developer’s CSS.

Real-time Synchronisation: Used ResizeObserver to ensure the bounding box stays perfectly aligned, even during window resizing or dynamic content updates.

While this overview highlights the Canopy Editor, there are numerous nuances that I haven’t detailed here. If you’re interested in a technical deep-dive into the codebase or my design decisions, I’d be happy to discuss them further.

Email: dionpinto000@gmail.com