JS runtime API reference

Every designer and admin page exposes a global window.Veyop object. Addon JS bundles run after it's ready and register against it — no build-time coupling to core's source.

if (window.Veyop && window.Veyop.apiVersion >= 2) {
  // v2+ adds the stable façades documented below
}

Hooks & events

Member	Use
`Veyop.hooks.on(event, fn)` / `.off(event, fn)` / `.emit(event, payload)`	Plain pub/sub for designer lifecycle events (table below).
`Veyop.hooks.addFilter(name, fn)` / `.applyFilters(name, value, ...args)`	JS-side equivalent of a WordPress filter — transform a value through every registered callback.
`Veyop.hooks.addAction(name, fn)` / `.doAction(name, ...args)`	JS-side equivalent of a WordPress action.
`Veyop.hooks.registerSlot(name, component)`	Inject a Vue component (or raw DOM) into a named slot in the designer/admin UI.

Core façades

Member	Use
`Veyop.api.request(path, options)`	Authenticated request helper for calling core or addon REST/portable endpoints.
`Veyop.ui.confirm(message)` / `Veyop.ui.notify(message, type)`	Use the designer's own confirm dialog / toast system instead of native `alert()`/`confirm()`.
`Veyop.designer.commands.addItem(item)` / `.updateItem(id, patch)`	Mutate the design through the same command path the core UI uses, so undo/redo and autosave stay correct.
`Veyop.admin.registerPageTab({ pageId, id, label, component })`	Inject a new tab into an existing admin addon settings page.
`Veyop.tools.registerTextTool(tool)`	Add a button to the text-item popover toolbar.
`Veyop.itemRenderers.register({ id, matches, render })`	Register how a design item type renders on canvas — required for any custom item type.
`Veyop.imagePipeline.registerItemSvgExporter({ matches, exportSvg })`	Register how a design item type renders to SVG at export time — share the render logic with the canvas renderer so preview and export always match.
`Veyop.designer.registerLayout({ id, theme, component })`	Register an entirely new Vue layout theme for the designer shell.

Adding a brand-new design item type

DesignItem is an open map — there's no closed type union enforced at runtime. Three registrations are enough to add a fully working new item type:

// 1. Create it from a toolbar action
Veyop.designer.commands.addItem({ type: 'my-addon:widget', /* ...initial data */ });

// 2. Render it on canvas
Veyop.itemRenderers.register({
  id: 'my-addon-widget',
  matches: (item) => item.type === 'my-addon:widget',
  render: (item) => buildWidgetSvg(item), // shared, pure render function
});

// 3. Export it identically at print time
Veyop.imagePipeline.registerItemSvgExporter({
  matches: (item) => item.type === 'my-addon:widget',
  exportSvg: (item) => buildWidgetSvg(item), // same function as above
});

Save, load, undo, and multi-select all work automatically — core treats any registered item type the same way.

Slot names

Slot	Location
`veyo_toolbar_after_actions`	End of the main designer toolbar.
`veyo_sidebar_before_panels` / `veyo_sidebar_after_panels`	Around the designer's panel stack (Layers, Text, Upload, etc.).
`veyo_designer_root_start` / `veyo_designer_root_end`	Very start / end of the designer root element.
`veyo_designer_before_toolbar` / `veyo_designer_after_toolbar`	Around the toolbar as a whole.
`veyo_designer_before_canvas` / `veyo_designer_after_canvas`	Around the design canvas.

Lifecycle events

Subscribe with Veyop.hooks.on('event.name', fn).

Event	Fires
`veyop:designer:beforeMount`	Just before the designer app mounts.
`veyop:designer:ready`	After the designer has fully mounted and loaded its config.
`select.item.design`	A design item is selected on canvas.
`add.item.design` / `remove.item.design`	A design item is added or removed.
`update.design`	Any part of the design is mutated.
`before.save.design` / `after.save.design`	Around a save (draft or final).
`before.load.design` / `after.load.design`	Around loading a saved design.
`change.view.design`	Customer switches product view (front/back/left/right).
`add.to.cart.design`	Customer adds the personalized product to cart.

← PHP hooks Next: REST API →