Kajay — surveys that look like your application

1. Define the survey

A survey definition is plain JSON-compatible data. Names identify questions and become answer keys unless a question declares a different valueName.

survey.tstypescript

const definition: SurveyDefinition = {
  title: 'Product feedback',
  pages: [{
    name: 'feedback',
    elements: [
      {
        type: 'radiogroup',
        name: 'rating',
        title: 'How was your experience?',
        isRequired: true,
        choices: ['Great', 'Fine', 'Poor'],
      },
      {
        type: 'comment',
        name: 'details',
        title: 'What could we improve?',
        visibleIf: "{rating} == 'Poor'",
      },
    ],
  }],
}

2. Parse and render it

parseSurvey creates the stateful runtime model. Build it once for a mounted survey; rebuilding the model during render would discard the respondent’s answers.

FeedbackSurvey.tsxtsx

import { parseSurvey, type SurveyDefinition } from '@kajay/core'
import { Survey } from '@kajay/react'
import { useEffect, useState } from 'react'

function FeedbackSurvey({
  onSubmit,
}: {
  onSubmit: (data: Readonly<Record<string, unknown>>) => void
}) {
  const [model] = useState(() => parseSurvey(definition).survey)

  useEffect(
    () => model.onComplete.add(({ data }) => { onSubmit(data) }),
    [model, onSubmit],
  )

  return <Survey model={model} />
}

3. Try the result

Choose Poor to exercise the expression on visibleIf. Completion emits a snapshot of the submitted answers through model.onComplete.

Where to go next

Learn how conditions react to answers in Expressions and conditional logic, then add required fields and authored checks in Validation.