Preview System

The preview system lets content editors see how a questionnaire (or policy page, or content modal) looks and behaves in the actual app — without publishing changes or going through the full sync-and-deploy cycle. This is essential for testing changes before they reach real users.

How Preview Works

flowchart LR
    A["Content editor clicks<br/><b>Preview</b> in Strapi"] --> B["Browser opens<br/>preview URL with<br/>document ID"]
    B --> C["App's preview route<br/>fetches data from<br/>Strapi API"]
    C --> D["Questionnaire rendered<br/>with draft content<br/>in the app"]

The Preview Button

Strapi has a preview-button plugin configured for these content types:

Questionnaire
Policy-Page
Content-Modal

When you are editing one of these in Strapi admin, you will see a “Preview” button. Clicking it opens a new browser tab with the preview URL.

Preview URLs

The URL format is: /preview/{status}/{documentId}

Where:

status is draft or published
documentId is the Strapi document’s unique identifier

The actual base URL depends on the environment:

Environment	Preview URL base
Local development	`localhost:3000/preview`
Staging	`app.staging.feather-insurance.com/preview-staging`

What Gets Previewed

Questionnaire Preview

The QuestionnairePreview component:

Reads the documentId from the URL
Calls the useFetchQuestionnaire hook, which fetches the questionnaire data directly from the Strapi API (bypassing the sync pipeline entirely)
Processes the data through the same transforms that the sync script would apply
Renders the full questionnaire flow using qnr-framework

This means you get a fully interactive preview — you can click through questions, see rules in action, and test the entire flow. The data is fetched live from Strapi, so any unsaved draft changes appear immediately.

Other Preview Types

Preview component	What it shows
PreviewSignupPage	The signup/checkout step of a questionnaire
PolicySinglePreview	A single policy details page
PolicyCoveragePreview	The coverage breakdown view
ContentModalPreview	Content modals (information overlays)

Preview vs. Production Rendering

Aspect	Preview	Production
Data source	Live Strapi API (draft or published)	Synced TypeScript files (published, reviewed, deployed)
Translations	Default text only (no i18n)	Full translations
Pricing	May use mock/test data	Real pricing engine
Checkout	Test mode or disabled	Real Stripe integration
Availability	Staging and dev only	All environments

Typical Preview Workflow

Edit a questionnaire in Strapi (add a question, change a rule, update text)
Click Preview to open the draft in the staging app
Walk through the flow — check that questions appear correctly, rules work, and the UI looks right
Iterate — go back to Strapi, make adjustments, refresh the preview
Publish in Strapi when satisfied
Run sync to generate the TypeScript file and create a PR
Deploy through the normal release process

Preview lets you catch issues early — before syncing, before code review, and before deployment. It is the fastest feedback loop available in the Birdhouse system.

Troubleshooting Preview

Issue	Likely cause	Fix
Preview page shows 404	Preview routes not enabled in this environment	Use staging or local dev
Preview shows old content	Browser cache or Strapi draft not saved	Hard refresh, ensure changes are saved in Strapi
Preview loads but questionnaire is empty	Document ID mismatch or questionnaire has no questions	Check the URL’s document ID matches the Strapi entry
Styles or components look different	Preview may not load all app-specific styles or custom components	Some visual differences are expected — preview focuses on flow and content