Clarflow JSON Builder Reference

Build complete quiz funnels with any AI tool and paste them directly into the Clarflow Builder canvas. This document is your complete reference for the JSON format.

How It Works

1. Copy this document — click the "Copy Full Markdown" button at the top of this page
2. Paste into your AI tool — Claude Code, ChatGPT, or any AI assistant
3. Describe your funnel — e.g. "Build me a 10-step quiz funnel for a collagen supplement targeting women 35+"
4. Get JSON output — the AI generates valid Clarflow clipboard JSON
5. Paste into the Builder — open your funnel in Clarflow, click on the canvas, and press Ctrl/Cmd + V

The AI uses this reference to produce JSON that the Clarflow Builder accepts natively via clipboard paste. No manual editing needed.

Clipboard Payload Format

When pasting JSON onto the Clarflow canvas, the clipboard must contain a JSON string with this exact structure:

{
  "type": "clarflow-canvas-nodes",
  "nodes": [ ... ],
  "edges": [ ... ],
  "timestamp": 1710400000000
}

The type field is a discriminator. If it doesn't match exactly, the paste is silently ignored.

Node Types Overview

Clarflow has 4 node types. Each node in the nodes array follows this base structure:

{
  "id": "step_1710400000000_abc123def",
  "type": "quizStep",
  "position": { "x": 100, "y": 200 },
  "data": { ... },
  "width": 280,
  "height": 200
}

Step Node (quizStep)

The primary content node. Contains sub-elements that the end-user sees.

{
  "id": "step_1710400000000_abc123def",
  "type": "quizStep",
  "position": { "x": 100, "y": 200 },
  "data": {
    "name": "Step 1",
    "subEls": [ ... ],
    "size": { "w": 280, "h": 200 },
    "buttonText": "Continue",
    "hideContinueButton": false,
    "isConditional": false,
    "conditionalQuestionIndex": 0,
    "isABTest": false,
    "variantA": null,
    "variantB": null,
    "variantAWeight": 50
  },
  "width": 280,
  "height": 200
}

Conditional Routing: When isConditional: true, the node renders a separate output handle for each option in the referenced question. Edges connect from handles like option-0, option-1, etc.

Sub-Elements

Sub-elements are the content blocks inside a Step Node's subEls array. Each has a kind field that determines its type.

title

Heading text displayed prominently.

{ "kind": "title", "text": "What is your biggest challenge?" }

text

Body text / paragraph content.

{ "kind": "text", "text": "Select the option that best describes you." }

Rich text example with HTML:

{
  "kind": "text",
  "text": "<p style=\"text-align: center;\"><span style=\"font-size: 28px;\">How old are you?</span></p>",
  "isRichText": true,
  "contentFormat": "html"
}

image

Displays one or more images.

{ "kind": "image", "url": "https://example.com/hero.png", "alt": "Hero image" }

question

Interactive question with selectable options. The most important sub-element for quiz funnels.

{
  "kind": "question",
  "kindOf": "single",
  "options": [
    { "id": "opt_1", "text": "Focus issues", "emoji": "\ud83c\udfaf" },
    { "id": "opt_2", "text": "Time management", "emoji": "\u23f0" }
  ],
  "layout": "list",
  "variableName": "challenge"
}

Plain string options (simplest form):

{ "kind": "question", "kindOf": "single", "options": ["Yes", "No", "Maybe"] }

Rich option objects (recommended for most funnels):

{
  "id": "opt_abc123",
  "text": "Focus issues",
  "emoji": "\ud83c\udfaf",
  "imageUrl": "https://example.com/focus.png",
  "subtext": "Difficulty concentrating on tasks",
  "subtextEmoji": "\ud83d\udcad",
  "subtextColor": "#6B7280"
}

Option text tips: Keep text short and scannable. Use subtext for additional context instead of long option text. Use emojis selectively — they help users scan faster but skip them on age ranges, yes/no, or numbers.

Formatting part of an option (textHtml): to emphasise part of a label — Best for <strong>fast</strong> results — set textHtml alongside text. text stays the plain source of truth: it is what analytics, response variables, webhooks and CRM payloads receive, so it must match textHtml with the tags stripped. If the two disagree, the plain text renders and textHtml is ignored — so when you edit a label, update both or drop textHtml. The editor keeps them in sync for you.

Supported tags: p, br, strong, b, em, i, u, s, del, mark, span. The only attribute is style, limited to color, background-color, font-weight, font-style and text-decoration — anything else is stripped. Font size and alignment are deliberately not supported: option sizing follows the funnel's audience typography setting.

loading

Displays a loading/progress animation. Three styles available.

Bar style (simple progress bar, best for 2-5s transitions):

{ "kind": "loading", "seconds": 4, "style": "bar", "text": "Analyzing your answers..." }

Circle style (circular spinner, best for 3-6s mid-funnel processing):

{ "kind": "loading", "seconds": 5, "style": "circle", "text": "Building your plan..." }

Steps style (multi-step loader, most engaging, best before results, 15-30s):

{
  "kind": "loading",
  "seconds": 15,
  "style": "steps",
  "steps": [
    {
      "id": "550e8400-e29b-41d4-a716-446655440000",
      "loadingText": "Analyzing your profile...",
      "completedText": "Profile analyzed",
      "seconds": 5,
      "modal": null
    },
    {
      "id": "550e8400-e29b-41d4-a716-446655440001",
      "loadingText": "Building your plan...",
      "completedText": "Plan ready",
      "seconds": 5,
      "modal": {
        "warningText": "To personalize your plan",
        "questionText": "Do you prefer morning or evening routines?",
        "buttonLabelYes": "Morning",
        "buttonLabelNo": "Evening"
      }
    },
    {
      "id": "550e8400-e29b-41d4-a716-446655440002",
      "loadingText": "Finalizing recommendations...",
      "completedText": "Recommendations ready",
      "seconds": 5
    }
  ]
}

Loader step fields:

Modal fields (when present on a loader step):

Use modals sparingly — 1-2 per multi-step loader max.

custom_html

Renders arbitrary HTML content or a pre-built interactive block.

Inline HTML:

{
  "kind": "custom_html",
  "html": "<div style='text-align:center; padding:20px;'><h2>Your Results</h2><p>Based on your answers...</p></div>"
}

Pre-built block (uses templateId + templateConfig, html must be empty string):

{
  "kind": "custom_html",
  "html": "",
  "templateId": "reviews1",
  "templateConfig": {
    "reviews": [
      { "title": "Amazing product", "body": "Really works...", "authorName": "Sarah M." }
    ],
    "starColor": "#F5A623",
    "verifiedColor": "#2ECC87",
    "autoRotateMs": 4000
  }
}

input

Single-line text input field for collecting user data.

{
  "kind": "input",
  "label": "Your email",
  "placeholder": "you@example.com",
  "inputType": "email",
  "required": true,
  "variableName": "user_email",
  "klaviyoEnabled": true
}

dropdown

Dropdown select menu.

{
  "kind": "dropdown",
  "label": "Your country",
  "placeholder": "Select a country",
  "options": [
    { "id": "opt_us", "text": "United States", "emoji": "\ud83c\uddfa\ud83c\uddf8" },
    { "id": "opt_uk", "text": "United Kingdom", "emoji": "\ud83c\uddec\ud83c\udde7" }
  ],
  "defaultOptionIndex": 0,
  "required": true,
  "variableName": "country"
}

Exit Node

Terminal node that redirects the end-user to an external URL.

{
  "id": "exit_1710400000000_abc123def",
  "type": "exitNode",
  "position": { "x": 900, "y": 200 },
  "data": {
    "name": "Exit",
    "redirectUrl": "https://example.com/thank-you",
    "size": { "w": 280, "h": 200 }
  },
  "width": 280,
  "height": 200
}

If/Else Node

Conditional branching node that routes users based on their previous answers.

{
  "id": "ifelse_1710400000000_abc123def",
  "type": "ifElseNode",
  "position": { "x": 500, "y": 200 },
  "data": {
    "name": "Age Router",
    "conditions": [
      {
        "id": "cond_young",
        "label": "If",
        "criteria": [
          { "stepId": "step_q1", "questionIndex": 0, "optionIds": ["opt_under18"] }
        ],
        "handleId": "condition-if",
        "type": "if"
      },
      {
        "id": "cond_adult",
        "label": "Else If 1",
        "criteria": [
          { "stepId": "step_q1", "questionIndex": 0, "optionIds": ["opt_18to35"] }
        ],
        "handleId": "condition-elseif-1",
        "type": "elseIf"
      },
      {
        "id": "cond_fallback",
        "label": "Else",
        "criteria": [],
        "handleId": "condition-else",
        "type": "else"
      }
    ],
    "size": { "w": 240, "h": 180 }
  },
  "width": 240,
  "height": 180
}

Condition fields:

Criteria fields:

Condition ordering rules:

1. First condition must be type: "if"
2. Last condition must be type: "else"
3. Any number of type: "elseIf" conditions between them
4. Between criteria in one condition: AND logic (all must be satisfied)
5. Between conditions: evaluated top to bottom, first match wins

Edges

Edges connect nodes together. Each edge in the edges array:

{
  "id": "edge_1710400000000_abc123def",
  "source": "step_1710400000000_node1",
  "target": "step_1710400000001_node2",
  "sourceHandle": "output",
  "targetHandle": "input",
  "type": "deletable",
  "animated": false,
  "style": { "stroke": "#374151", "strokeWidth": 2 }
}

Source handle types:

Important for If/Else edges: The sourceHandle must be the condition's id field, NOT the handleId pattern. The condition id is what edges reference.

A/B Testing

When isABTest: true on a Step Node, the node shows two variants to different visitors.

Variant structure:

{
  "subEls": [ ... ],
  "buttonText": "Continue",
  "isConditional": false,
  "conditionalQuestionIndex": 0
}

A/B test node example:

{
  "id": "step_abtest_1",
  "type": "quizStep",
  "position": { "x": 500, "y": 200 },
  "data": {
    "name": "A/B Test Step",
    "subEls": [],
    "size": { "w": 280, "h": 200 },
    "isABTest": true,
    "variantAWeight": 50,
    "variantA": {
      "subEls": [
        { "kind": "title", "text": "Version A: Do you struggle with focus?" },
        { "kind": "question", "kindOf": "single", "options": ["Yes", "No"] }
      ],
      "buttonText": "Next"
    },
    "variantB": {
      "subEls": [
        { "kind": "title", "text": "Version B: How's your concentration?" },
        { "kind": "question", "kindOf": "single", "options": ["Good", "Could be better"] }
      ],
      "buttonText": "Continue"
    }
  },
  "width": 280,
  "height": 400
}

Height rule: For A/B test nodes, set height to size.h * 2 (e.g. 200 * 2 = 400).

Pre-Built Blocks

Pre-built blocks are config-driven interactive components. When using a pre-built block, set html to an empty string "" and provide templateId + templateConfig.

{
  "kind": "custom_html",
  "html": "",
  "templateId": "reviews1",
  "templateConfig": { ... }
}

Available Blocks

reviews1 — Review Carousel

Auto-rotating review carousel with 5-star ratings and verified badges.

{
  "templateId": "reviews1",
  "templateConfig": {
    "reviews": [
      { "title": "This actually works", "body": "I was skeptical but after 3 weeks...", "authorName": "Sarah M." },
      { "title": "Best purchase this year", "body": "Noticed results within days...", "authorName": "John G." },
      { "title": "Highly recommend", "body": "My friend recommended this and...", "authorName": "Lisa K." }
    ],
    "starColor": "#F5A623",
    "verifiedColor": "#2ECC87",
    "autoRotateMs": 4000
  }
}

reviews2-trustpilot — Trustpilot Reviews

Trustpilot-style review carousel with green square stars.

{
  "templateId": "reviews2-trustpilot",
  "templateConfig": {
    "reviews": [
      { "title": "Eye-opening information", "body": "Detailed review text...", "authorName": "Patrick N." },
      { "title": "Changed my life", "body": "Another review...", "authorName": "Brian R." }
    ],
    "autoRotateMs": 4000
  }
}

reviews3 — Review Slider

Auto-scrolling horizontal review carousel with overall rating badge. Dark/premium aesthetic.

{
  "templateId": "reviews3",
  "templateConfig": {
    "headerLabel": "Loved by thousands",
    "overallRating": "4.8",
    "primaryColor": "#CA5839",
    "bgGradientStart": "#2e1c18",
    "bgGradientEnd": "#3d2520",
    "textColor": "#ffffff",
    "reviewTextColor": "rgba(255,255,255,0.85)",
    "reviewCardBg": "rgba(202,88,57,0.1)",
    "reviews": [
      { "text": "Review text without a separate title...", "authorName": "Sarah M." },
      { "text": "Another review...", "authorName": "Mike T." }
    ]
  }
}

offer — Offer Card

Full-featured offer card with badge, hero image, feature tags, offer box, and trust badges.

{
  "templateId": "offer",
  "templateConfig": {
    "badgeText": "Your Personalized Plan",
    "headlineHtml": "<p style=\"text-align: center\"><span style=\"font-size: 22px\">Transform your health — <span style=\"color: #D4488C\">or pay nothing.</span></span></p>",
    "descriptionHtml": "<p style=\"text-align: center; font-size: 12px; color: #5C5C5C\">Join 25,000+ people who saw results...</p>",
    "imageUrl": "https://example.com/product.jpeg",
    "feature1": "Results in 28 days",
    "feature2": "Science-backed formula",
    "feature3": "Easy daily routine",
    "socialProofText": "4.9/5 from 14,207 ratings",
    "starColor": "#E88BA0",
    "accentColor": "#D4488C",
    "offerTextHtml": "<p style=\"font-size: 12px; color: #5C5C5C\"><span style=\"color: #D4488C; font-weight: 700\">QUIZ RESULTS OFFER:</span> Unlock <span style=\"font-weight: 700; color: #1A1A1A\">up to 60% off</span>...</p>",
    "trustBadge1": "90-day guarantee",
    "trustBadge2": "Clinically tested",
    "trustBadge3": "Free shipping"
  }
}

offer2 — Product Card

Simpler product card with image, pricing, features, and benefit bullets.

{
  "templateId": "offer2",
  "templateConfig": {
    "imageUrl": "https://example.com/product.webp",
    "badgeText": "RECOMMENDED FOR YOU",
    "productName": "Product Name",
    "featuresText": "Benefit 1 \u2022 Benefit 2 \u2022 Benefit 3",
    "originalPrice": "$89",
    "discountedPrice": "$39",
    "priceCopyHtml": "<p style=\"font-size: 13px; color: rgba(13,27,42,0.72)\">Your quiz unlocked a <strong>$50 credit</strong>...</p>",
    "accentColor": "#5BA4CF",
    "whyTitleHtml": "<p style=\"font-size: 16px; font-weight: 900; text-align: center\">Why this fits your profile</p>",
    "bullets": [
      "First benefit explanation",
      "Second benefit explanation",
      "Third benefit explanation",
      "Fourth benefit explanation"
    ]
  }
}

before-after — Image Comparison Slider

Interactive drag slider to compare two images side by side.

{
  "templateId": "before-after",
  "templateConfig": {
    "beforeImageUrl": "https://example.com/before.jpeg",
    "afterImageUrl": "https://example.com/after.jpeg",
    "beforeLabel": "Before",
    "afterLabel": "After"
  }
}

scratch-to-reveal — Scratch Card

Interactive scratch card with canvas overlay. User scratches to reveal a reward with confetti animation.

{
  "templateId": "scratch-to-reveal",
  "templateConfig": {
    "titleHtml": "<strong>You've Unlocked a <span style=\"color: #CA5839\">Mystery Reward</span></strong>",
    "subtitleText": "Scratch below to reveal your exclusive offer",
    "primaryColor": "#CA5839",
    "scratchBrushSize": 22,
    "revealThreshold": 50,
    "canvasHeight": 340,
    "rewardEyebrow": "Your Exclusive Reward",
    "rewardValue": "FREE",
    "rewardItem": "Growth Activation Serum",
    "rewardDescription": "$49 value - Added to your order",
    "goldColor": "#b8860b",
    "instructionText": "Scratch to Reveal",
    "instructionSubText": "Use your finger to scratch",
    "enableConfetti": true,
    "confettiColors": [],
    "maxWidth": 340,
    "borderRadius": 12
  }
}

swipe-statements — Tinder-Style Cards

Tinder-style swipe cards where users swipe right for yes, left for no.

{
  "templateId": "swipe-statements",
  "templateConfig": {
    "titleText": "Does this sound like you?",
    "subtitleText": "Swipe right for yes, left for no",
    "primaryColor": "#CA5839",
    "yesColor": "#22c55e",
    "noColor": "#ef4444",
    "cardBgColor": "#ffffff",
    "textColor": "#1a1a1a",
    "subtextColor": "#555555",
    "yesLabel": "Yes",
    "noLabel": "Nope",
    "hintText": "Swipe or use buttons below",
    "completeTitle": "We've got your profile!",
    "completeSubtitle": "You matched with {count} common concerns",
    "cards": [
      { "emoji": "\ud83e\ude9e", "text": "I've noticed changes recently" },
      { "emoji": "\ud83d\ude29", "text": "I've tried other products with little results" },
      { "emoji": "\ud83c\udf3f", "text": "I prefer natural, science-backed solutions" },
      { "emoji": "\u23f0", "text": "I want to act before it gets worse" },
      { "emoji": "\ud83d\udcaa", "text": "I'm ready to commit to a daily routine" }
    ],
    "maxWidth": 360,
    "cardHeight": 320
  }
}

graph-goal — Goal Progression Chart

Animated goal progression chart showing growth/decline over time.

{
  "templateId": "graph-goal",
  "templateConfig": {
    "yAxisLabels": [
      "HIGH\nLevels",
      "NORMAL\nLevels",
      "LOW\nLevels"
    ],
    "xAxisLabels": ["TODAY", "MONTH 1", "MONTH 2", "MONTH 3", "MONTH 4"],
    "youAreHereLabel": "YOU ARE HERE",
    "goalLabel": "GOAL: Significant Improvement",
    "trend": "upward"
  }
}

noise-profile — Severity Assessment Card

Severity assessment display with slider, alert box, and stat cards.

{
  "templateId": "noise-profile",
  "templateConfig": {
    "cardTitle": "Your Assessment Results",
    "levelPillText": "Severe",
    "levelPillColor": "#C0392B",
    "imageUrl": "https://example.com/assessment.webp",
    "sliderTooltipText": "Your level",
    "sliderLabels": ["Balanced", "Mild", "Moderate", "Severe"],
    "sliderEndPosition": 90,
    "alertTitle": "SEVERE imbalance detected",
    "alertText": "Based on your responses, your levels are critically disrupted...",
    "stats": [
      { "emoji": "\ud83e\udda0", "bgColor": "#FEF3E2", "label": "Primary metric", "value": "Critically Low", "isHighlighted": true },
      { "emoji": "\ud83d\udca8", "bgColor": "#E3F2FD", "label": "Secondary metric", "value": "Severe", "isHighlighted": true },
      { "emoji": "\ud83e\udde0", "bgColor": "#FCE4EC", "label": "Tertiary metric", "value": "Elevated", "isHighlighted": true },
      { "emoji": "\u26a1", "bgColor": "#E8EAF6", "label": "Fourth metric", "value": "Below 40%", "isHighlighted": true }
    ]
  }
}

results-by-date — Month-Over-Month Bar Chart

Animated bar chart showing projected results over time.

{
  "templateId": "results-by-date",
  "templateConfig": {
    "titleHtml": "<p style=\"text-align: center; font-size: 28px; font-weight: 700\">The last plan you'll ever need</p>",
    "descriptionHtml": "<p style=\"text-align: center; font-size: 16px; color: #555\">Based on your answers, we expect visible results by May 2026</p>",
    "trend": "upward",
    "startMonth": "February",
    "endMonth": "May"
  }
}

ID Conventions

IDs use a timestamp + random suffix pattern for uniqueness:

• {timestamp} = Date.now() (milliseconds since epoch)
• {random} = 9-character random alphanumeric string

When pasting, the system automatically remaps all IDs to new unique values. So the exact IDs don't need to be globally unique — they just need to be internally consistent (e.g., an edge's source must match a node's id).

Positioning

Linear flow: Space nodes 400px apart horizontally, constant Y.

position.x = startX + (stepIndex * 400)
position.y = 200

Branching: Offset branches vertically.

Main path:   y = 200
Branch A:    y = 50
Branch B:    y = 350

Variable References

When a quiz captures user input (via variableName on questions, inputs, or dropdowns), you can reference that value in later title/text elements using double-bracket syntax:

{{variable_name}}

For example, if an input stores to variableName: "first_name", a later title can use:

{ "kind": "title", "text": "Great news, {{first_name}}!" }

Validation Rules & Common Pitfalls

The paste deserializer checks:

1. The parsed object must have type === "clarflow-canvas-nodes" (exact match)
2. nodes must be an array
3. edges must be an array
4. If any check fails, the paste is silently ignored (no error shown)

Complete Examples

Example 1: Minimal Single Step

A single question step with no connections:

{
  "type": "clarflow-canvas-nodes",
  "nodes": [
    {
      "id": "step_1_a",
      "type": "quizStep",
      "position": { "x": 300, "y": 200 },
      "data": {
        "name": "Quick Question",
        "subEls": [
          { "kind": "title", "text": "How did you hear about us?" },
          {
            "kind": "question",
            "kindOf": "single",
            "options": ["Google", "Friend", "Social Media", "Other"]
          }
        ],
        "size": { "w": 280, "h": 200 }
      },
      "width": 280,
      "height": 200
    }
  ],
  "edges": [],
  "timestamp": 1710400000000
}

Example 2: Two Connected Steps

Two steps connected by a default edge:

{
  "type": "clarflow-canvas-nodes",
  "nodes": [
    {
      "id": "step_1_intro",
      "type": "quizStep",
      "position": { "x": 100, "y": 200 },
      "data": {
        "name": "Introduction",
        "subEls": [
          { "kind": "title", "text": "Welcome to our assessment" },
          { "kind": "text", "text": "This will take about 2 minutes." }
        ],
        "size": { "w": 280, "h": 200 },
        "buttonText": "Let's Go"
      },
      "width": 280,
      "height": 200
    },
    {
      "id": "step_2_question",
      "type": "quizStep",
      "position": { "x": 500, "y": 200 },
      "data": {
        "name": "Main Question",
        "subEls": [
          { "kind": "title", "text": "What is your primary goal?" },
          {
            "kind": "question",
            "kindOf": "single",
            "options": [
              { "id": "opt_focus", "text": "Better focus", "emoji": "\ud83c\udfaf" },
              { "id": "opt_sleep", "text": "Better sleep", "emoji": "\ud83d\ude34" },
              { "id": "opt_stress", "text": "Less stress", "emoji": "\ud83e\uddd8" }
            ],
            "layout": "list"
          }
        ],
        "size": { "w": 280, "h": 200 }
      },
      "width": 280,
      "height": 200
    }
  ],
  "edges": [
    {
      "id": "edge_1_2",
      "source": "step_1_intro",
      "target": "step_2_question",
      "sourceHandle": "output",
      "targetHandle": "input",
      "type": "deletable",
      "animated": false,
      "style": { "stroke": "#374151", "strokeWidth": 2 }
    }
  ],
  "timestamp": 1710400000000
}

Example 3: Conditional Routing

A step with conditional routing that sends users to different nodes based on their answer:

{
  "type": "clarflow-canvas-nodes",
  "nodes": [
    {
      "id": "step_q1",
      "type": "quizStep",
      "position": { "x": 100, "y": 200 },
      "data": {
        "name": "Router Question",
        "subEls": [
          { "kind": "title", "text": "Are you a morning or evening person?" },
          {
            "kind": "question",
            "kindOf": "single",
            "options": [
              { "id": "opt_morning", "text": "Morning person", "emoji": "\ud83c\udf05" },
              { "id": "opt_evening", "text": "Evening person", "emoji": "\ud83c\udf19" }
            ]
          }
        ],
        "size": { "w": 280, "h": 200 },
        "isConditional": true,
        "conditionalQuestionIndex": 0
      },
      "width": 280,
      "height": 200
    },
    {
      "id": "step_morning",
      "type": "quizStep",
      "position": { "x": 500, "y": 100 },
      "data": {
        "name": "Morning Path",
        "subEls": [
          { "kind": "title", "text": "Great! Early birds get the worm." }
        ],
        "size": { "w": 280, "h": 200 }
      },
      "width": 280,
      "height": 200
    },
    {
      "id": "step_evening",
      "type": "quizStep",
      "position": { "x": 500, "y": 350 },
      "data": {
        "name": "Evening Path",
        "subEls": [
          { "kind": "title", "text": "Night owls are creative!" }
        ],
        "size": { "w": 280, "h": 200 }
      },
      "width": 280,
      "height": 200
    }
  ],
  "edges": [
    {
      "id": "edge_morning",
      "source": "step_q1",
      "target": "step_morning",
      "sourceHandle": "option-0",
      "targetHandle": "input",
      "type": "deletable",
      "animated": false,
      "style": { "stroke": "#374151", "strokeWidth": 2 }
    },
    {
      "id": "edge_evening",
      "source": "step_q1",
      "target": "step_evening",
      "sourceHandle": "option-1",
      "targetHandle": "input",
      "type": "deletable",
      "animated": false,
      "style": { "stroke": "#374151", "strokeWidth": 2 }
    }
  ],
  "timestamp": 1710400000000
}

option-0 maps to the first option ("Morning person"), option-1 to the second ("Evening person"). The index corresponds to the option's position in the options array.

Example 4: Full Flow with Email Capture, Loading, and Exit

A complete flow showcasing multiple sub-element types:

{
  "type": "clarflow-canvas-nodes",
  "nodes": [
    {
      "id": "step_welcome",
      "type": "quizStep",
      "position": { "x": 100, "y": 200 },
      "data": {
        "name": "Welcome",
        "subEls": [
          { "kind": "image", "url": "https://example.com/logo.png", "alt": "Brand logo" },
          { "kind": "title", "text": "Find your perfect routine" },
          { "kind": "text", "text": "Answer a few quick questions and we'll build a personalized plan." }
        ],
        "size": { "w": 280, "h": 200 },
        "buttonText": "Start Quiz"
      },
      "width": 280,
      "height": 200
    },
    {
      "id": "step_q1",
      "type": "quizStep",
      "position": { "x": 500, "y": 200 },
      "data": {
        "name": "Goal Selection",
        "subEls": [
          { "kind": "title", "text": "What's your #1 goal?" },
          {
            "kind": "question",
            "kindOf": "single",
            "options": [
              { "id": "opt_focus", "text": "Improve focus", "emoji": "\ud83c\udfaf", "subtext": "Stay on task longer" },
              { "id": "opt_energy", "text": "More energy", "emoji": "\u26a1", "subtext": "Feel less drained" },
              { "id": "opt_calm", "text": "Reduce anxiety", "emoji": "\ud83e\uddd8", "subtext": "Feel more at peace" }
            ],
            "layout": "list",
            "variableName": "primary_goal"
          }
        ],
        "size": { "w": 280, "h": 200 }
      },
      "width": 280,
      "height": 200
    },
    {
      "id": "step_email",
      "type": "quizStep",
      "position": { "x": 900, "y": 200 },
      "data": {
        "name": "Email Capture",
        "subEls": [
          { "kind": "title", "text": "Almost done!" },
          { "kind": "text", "text": "Enter your email to get your personalized results." },
          {
            "kind": "input",
            "label": "Email",
            "placeholder": "you@example.com",
            "inputType": "email",
            "required": true,
            "klaviyoEnabled": true,
            "variableName": "email"
          }
        ],
        "size": { "w": 280, "h": 200 },
        "buttonText": "Get My Results"
      },
      "width": 280,
      "height": 200
    },
    {
      "id": "step_loading",
      "type": "quizStep",
      "position": { "x": 1300, "y": 200 },
      "data": {
        "name": "Processing",
        "subEls": [
          { "kind": "title", "text": "Building your plan..." },
          {
            "kind": "loading",
            "seconds": 8,
            "style": "steps",
            "steps": [
              {
                "id": "ls_1",
                "loadingText": "Analyzing your responses...",
                "completedText": "Responses analyzed",
                "seconds": 3
              },
              {
                "id": "ls_2",
                "loadingText": "Creating personalized plan...",
                "completedText": "Plan created",
                "seconds": 5
              }
            ]
          }
        ],
        "size": { "w": 280, "h": 200 }
      },
      "width": 280,
      "height": 200
    },
    {
      "id": "exit_results",
      "type": "exitNode",
      "position": { "x": 1700, "y": 200 },
      "data": {
        "name": "Results Page",
        "redirectUrl": "https://example.com/results",
        "size": { "w": 280, "h": 200 }
      },
      "width": 280,
      "height": 200
    }
  ],
  "edges": [
    {
      "id": "e1",
      "source": "step_welcome",
      "target": "step_q1",
      "sourceHandle": "output",
      "targetHandle": "input",
      "type": "deletable",
      "animated": false,
      "style": { "stroke": "#374151", "strokeWidth": 2 }
    },
    {
      "id": "e2",
      "source": "step_q1",
      "target": "step_email",
      "sourceHandle": "output",
      "targetHandle": "input",
      "type": "deletable",
      "animated": false,
      "style": { "stroke": "#374151", "strokeWidth": 2 }
    },
    {
      "id": "e3",
      "source": "step_email",
      "target": "step_loading",
      "sourceHandle": "output",
      "targetHandle": "input",
      "type": "deletable",
      "animated": false,
      "style": { "stroke": "#374151", "strokeWidth": 2 }
    },
    {
      "id": "e4",
      "source": "step_loading",
      "target": "exit_results",
      "sourceHandle": "output",
      "targetHandle": "input",
      "type": "deletable",
      "animated": false,
      "style": { "stroke": "#374151", "strokeWidth": 2 }
    }
  ],
  "timestamp": 1710400000000
}