Skip to main content
Version: v1 (Current)

Template Demos

Every project created by gxdev init ships with two annotated demo pages under src/. They're not part of your final plugin — they're meant to be read, modified, or replaced as you learn how the platform, devtools, and uikit fit together.

The root component Plugin.vue exposes a lightweight in-app route ref that switches between the two:

<DemoPage v-if="route === 'home'" @navigate="navigate" />
<DemoExperience v-else-if="route === 'experience'" @navigate="navigate" />

Replace this with vue-router — or delete both — once you're building real pages.

DemoPage.vue​

A flat single-screen demo that exercises the core devtools integrations:

FeatureWhat it shows
gxp-stringReplaces an element's text with a value pulled from the datastore
gxp-srcSwaps an <img>'s src to an asset URL from the datastore
gxp-settingsReads from manifest.settings instead of manifest.strings
gxp-stateReads from the live triggerState (updated via sockets or CLI)
gxpStore.getSetting(key)Programmatic read of a setting in <script>
gxpStore.broadcast(socket, event, data)Send a payload on a Socket.IO room
gxpStore.listen(socket, event, cb)Subscribe to events from other windows / clients

Open Ctrl+Shift+D in the dev preview to edit any of these values live and watch the page react.

DemoExperience.vue​

A multi-stage kiosk-style flow built with @gxp-dev/uikit's experience-flow system. It's the most heavily annotated file in the template — read top to bottom to learn the orchestrator end-to-end. What it covers:

  • useExperience(config) — the state-machine composable. Owns navigation, reactive context, busy/error state, action dispatch.
  • useExperienceApi({ callApi }) — adapter that turns a callApi-shaped function into typed named operations (publishPost, createPrintJob, processImage, …). Includes a bridge from gxpStore.callApi(operationId, perm, data) to the uikit's (endpoint, payload) shape, plus a mock fallback for offline development.
  • <ExperienceFlow :flow> — renderer with built-in loading/error overlays, customized via the #loading and #error="{ error, retry }" slots.
  • All three action shapes — named string (action: 'publishPost'), inline async function, and false (disabled). Each is shown in context.
  • Branching paths — three parallel sub-flows (📷 photo, 🎨 drawing, ✍️ note) gated by when: (ctx) => ctx.choice === 'photo'. They converge on a shared final page.
  • withExperienceDefaults — pre-tagging your own page components with a default action and resultKey so you don't repeat the wiring at the call site.
  • Live state inspector — a side panel that mirrors the orchestrator: current page, busy / error refs, the reactive context, per-page jump buttons (validated via goTo), and a "Force error" button for previewing the custom error slot.
  • Reset & loop — onComplete: (ctx) => flow.reset() so the kiosk returns to the welcome screen when the user finishes.

Style isolation​

@gxp-dev/uikit/styles (Tailwind utilities + theme tokens) is imported inside DemoExperience.vue itself, not at the plugin root. That keeps the original DemoPage.vue rendering unchanged until the experience demo is first opened. In a real plugin that uses uikit pages throughout, move the stylesheet import to your Plugin.vue root so it's available everywhere.

Real callApi wiring​

The file ships with a mockCallApi for offline browsing of the demo. To wire it to the live platform, replace the mock with:

const callApi = (endpoint, payload) => gxpStore.callApi(endpoint, "", payload)

…where the empty string is the permissionIdentifier (used by gxpStore.callApi to resolve auth context — see GxP Store). The named operations in the api adapter then become real API calls.

Suggested learning path​

  1. Run gxdev init my-plugin && cd my-plugin && npm run dev-http.
  2. Open the dev preview and explore DemoPage.vue — toggle values in Dev Tools (Ctrl+Shift+D) and watch the directives react.
  3. Click "Open Experience Demo →" to jump to DemoExperience.vue. Open the file alongside the preview and step through the kiosk while reading the code.
  4. Mutate the page list: reorder, remove terms, add a when predicate, swap a default action for an inline function. The state panel makes every change visible.
  5. Once comfortable, delete both demo files and start your real plugin.

See also​