Light
Dark
All diagrams ← Sync lifecycle CDN script →
Candid Leap · WF-Algolia

Deep Dive — Designer Extension

React 18.3 Vite 7 TanStack Query v5 dark-mode only — mirrors the Designer, no light theme
User flow
Data & API
Build Mode
Session bootstrapDesigner identity → backend JWT

webflow.getSiteInfo() + webflow.getIdToken()

Designer APIs provide site identity.

Designer APIs

POST /auth/resolve-id-token

Exchanges the idToken for a backend JWT.

HS25660-min TTL

SiteContext

JWT held in memory only; silent re-auth on 401 via the onApiAuthError listener.

in-memorysilent re-auth
ScreensConnectScreen ⟷ DashboardScreen — switches on missing config or missing Webflow access token

ConnectScreen

Onboarding + credential entry + recovery entry.

DashboardScreen

Per-mapping health rows — the home screen.

Panels

CollectionSettingsScreen · SyncJobsScreen · ScriptInstallScreen · ScriptReleasesScreen · SettingsScreen · NotificationsScreen · WebflowRecoveryScreen

Modals

CronJobModal — schedule + pause · ForceReindexModal — cost preview → typed confirmation → token · AdminKeyReauthModal

BuildModeShell → BuildModeV2

Entry point to the Build Mode v2 pipeline below.

Server state — TanStack Query v5queries · mutations · derived row health

Queries

site config · sync-jobs (refetch every 5 s while a job is in flight, off otherwise) · Algolia health (every 2 min) · script delivery status (every 2 min)

Mutations

useTriggerSync → POST /api/sites/:siteId/sync-now · useForceReindex → GET sync-cost-preview (returns confirmationToken) then POST force-reindex with the token

deriveHealth()

RowHealth union: syncing · synced · stale · retrying · needs-attention · never-synced · not-mapped

RowHealth
Build Mode v2 pipelineregistry → catalog → spec → canvas

Registry

Component descriptors in @candidleap/wf-algolia-shared-types.

ExperiencePicker / PiecePicker

Catalog UI over the registry.

buildPieceSpec / buildDraftSpec

Assembles the element tree; required internal children auto-added.

insertElementSpec

webflow.insertElementFromWHTML() + wf-algolia-* attributes applied to the canvas.

Foundations

@formconnector/ui

Private npm component library.

shared-types

@candidleap/wf-algolia-shared-types — workspace package.

Vite 7 build

Bundles the extension for the Designer iframe.

Analytics

posthog-js

autocapture OFF · no session recording · no heatmaps · no pageviews. identify(siteId) — explicit typed events only.

Backend API

Express REST API

All data flows through the REST API with JWT — the extension never talks to Algolia or the Webflow Data API directly. Designer APIs are used only for canvas + identity.

JWT