Build a custom interface

Now that we've detected the Visual Editor and have the API, we can render our own interface. The Doodle Gallery brings its own UI: a canvas to draw on, a caption field, and a submit button. Because we gated the component on inCloudCannonEditor in the previous step, this interface only renders inside the Visual Editor.

Render whatever markup your interface needs — CloudCannon doesn't require any particular wrapper or class.

return (
  <div className="cloudcannon-visual-editor-component"> 
    <h1>Why not draw something?</h1>

    <DoodleCanvas
      canvasRef={canvasRef}
      finishDraw={(newPixels: CoordArray) => { setSavedPixels([...savedPixels, [...newPixels]]); }} 
    ></DoodleCanvas>

    <label htmlFor="caption">Caption for the new image (required)</label>
    <input type="text" id="caption" onInput={(e) => { setCaption(e.currentTarget.value); }} /> 

    <button type="button" disabled={!!currentStateMessage || !caption} onClick={submit}>Add to the gallery</button> 
  </div>
);

The Doodle Gallery renders this component on its homepage. In Astro, that means importing it and rendering <Doodler client:load /> — the client:load directive hydrates the component in the browser, where it can reach the Visual Editor API. Other frameworks and SSGs each have their own way to mount a client-side component; whichever you use, the only requirement is that your integration runs in the browser.

---
import { Doodler } from "../components/doodle.tsx"; 
---

<Doodler client:load /> 

Bringing your own UI like this gives you complete control over the experience. If instead you want to reuse CloudCannon's native editing surfaces, the Visual Editor API can also open its own Data Panels and make page elements directly editable.

In the next step of this guide, we'll start building the submit function, beginning by uploading the finished doodle as an image.