Skip to main content

Devtools Examples

Attach Bridge to Core Machine​

import { createJourneyMachine } from "@rxova/journey-core";
import { attachJourneyDevtools } from "@rxova/journey-devtools-bridge";

const machine = createJourneyMachine(journey);
const detach = attachJourneyDevtools(machine, {
  machineId: "checkout",
  label: "Checkout Journey",
  enabled: true
});

Attach Bridge to React Flow​

When using bindings, attach once to the shared machine (outside or before React mount).

Command Examples​

{ type: "goToNextStep" }
{ type: "goToStepById", stepId: "review" }
{ type: "goToPreviousStep", steps: 2 }
{ type: "goToLastVisitedStep" }
{ type: "updateStepMetadata", stepId: "review", metadata: { title: "Review step" } }
{ type: "send", event: { type: "custom", payload: { source: "panel" } } }
{ type: "resetMachine" }
{ type: "clearStepError", stepId: "review" }

Snapshot Fields Used by Panel​

  • currentStepId, history.timeline, history.index
  • visited, stepMeta
  • status, async