extension Extend the engine with custom code

1. 1
   extension Extend the engine C1 ⭐ Copy-along schedule ~60 min

   Build a custom Element

   The deepest extension — subclass `BaseElement`, register, ship a Countdown that survives `getData()` ↔ `load()` round-trip. Once this works, every other extension makes sense.

   Open arrow_forward
2. 2
   extension Extend the engine C2 ⭐ Copy-along schedule ~45 min

   Build a custom Control

   Add a custom Settings-panel input — extend `ColorPickerControl` with brand swatches, wire via `getControls()`. Lock the `_applyValue` vs `_notify` footgun before you hit it.

   Open arrow_forward
3. 3
   extension Extend the engine C3 ⭐ Copy-along schedule ~30 min

   Build a custom Widget

   Drop a custom block in the palette — subclass `BaseWidget`, register inside the `load()` callback, style with `[widget-class]`. The fastest of the three extensions.

   Open arrow_forward
4. 4
   extension Extend the engine C4 schedule ~11 min

   Custom overlays (advanced)

   Per-element on-canvas affordances — resize handles, crop popovers, drag toolbars. Read once you need an interaction the Settings panel can't express.

   Open arrow_forward

flag Outcome A custom block class with a custom Settings panel rendering inside your Builder.