Adding a sample to the playground

A. Core type (no extra renderers)

If the type is already in coreQuestionRenderers, add an entry to the right array in samples.js — usually generalSamples or searchFinderSamples:

// samples.js — inside generalSamples (or searchFinderSamples)
{
  title: 'Your field label',
  description: 'Short note for designers/devs.',
  questions: [
    {
      id: 1,
      step: 1,
      visible: true,
      questionType: 'yourQuestionType',   // matches QuestionTypes constant
      fieldName: 'yourField',
      question: 'Question heading',
      errorMessage: 'Please complete this field',
      // …props your component expects
    }
  ]
}

Open General Form Components (or Search & Finders) — the new card appears automatically because those pages use data-fg-section="general" / search-finders mapped in samplesBySection.

B. Module type (custom questionRenderers)

Module-owned types need the playground to pass the same renderer map as production pages:

1. Export your map from pages/YourModule/formQuestions/questionRenderers.js.
2. Import it in form-generator-playground.js and add to rendererMaps:

   import { yourQuestionRenderers } from '../pages/YourModule/formQuestions/questionRenderers';
   
   const rendererMaps = {
     household: householdQuestionRenderers,
     yourModule: yourQuestionRenderers
   };
   

3. Add a sample with formConfig.questionRenderersKey:

   {
     title: 'Your module question',
     description: 'Requires yourModule renderers.',
     formConfig: { questionRenderersKey: 'yourModule' },
     questions: [ /* … */ ]
   }
   

4. Append the sample to the matching array in samples.js (e.g. householdSamples).

Household example: samples set formConfig: { questionRenderersKey: 'household' } and live under Household Components.

C. New playground section (optional)

When a module has several question types, add a dedicated playground page:

1. Create src/site/content/design/form-generator/your-module/your-module.11ty.js with tag design-system-form-generator and playground: true (copied from general/general.11ty.js).
2. Set data-fg-section="your-module" on the root div (must match a key in samplesBySection).
3. Optionally set data-fg-renderers="yourModule" on the root so every card in that section uses your renderer map by default.
4. Add yourModule: yourModuleSamples to samplesBySection in samples.js.

The left nav lists pages tagged design-system-form-generator automatically via _dev-navbar.njk. No manual nav edit is required when the 11ty file uses that tag.

Build / local dev

Ensure scripts/build.js bundles src/client/demos/form-generator-playground.js in the demo entrypoints list. Run npm run dev and open the playground URL — edit JSON in the textarea; preview updates on Apply or after a short debounce while typing.