FAQ
Frequently asked questions about react-minimal-survey-builder.
Is this library only for React?
The main hook (useSurvey) and renderer (SurveyRenderer) require React 17+. However, the core engine — schema parser, validation engine, condition evaluator, and state manager — is framework-agnostic and can be imported from react-minimal-survey-builder/core for use with Vue, Svelte, vanilla JS, or server-side code.
Does it support multi-page surveys?
Yes. Define multiple objects in the pages array of your schema. The library handles navigation, per-page validation, progress tracking, and back/next buttons automatically.
Can I use it with Next.js / Remix / Gatsby?
Absolutely. The library is a standard React package that works in any React framework. For SSR frameworks like Next.js, wrap the survey in a client component since it uses hooks and event handlers.
How do I style the survey?
You have several options: override the default CSS class names (rmsb-*), pass a className prop, supply custom React components for each question type, or go fully headless with the useSurvey hook and write all your own markup.
Does it support conditional (branching) logic?
Yes. Add a visibleIf property to any question or page. It accepts an expression like "{satisfaction} === 'dissatisfied'" that is evaluated against the current answers. Questions hidden by conditions are automatically excluded from validation.
Can I create custom question types?
Yes. Provide custom React components via the components prop on SurveyRenderer. Any string can be used as a question type — it's matched against the components map at render time. You can also use the plugin system for reusable packages.
Is the schema JSON-serializable?
Yes, except for inline custom validators (functions). The schema is designed to be stored in a database, sent over an API, or exported as a JSON file. Custom validators should be registered separately via the validators option.
Does the builder require any extra dependencies?
No. The SurveyBuilder uses native HTML5 drag-and-drop and ships as part of the library under the react-minimal-survey-builder/builder entry point. No additional packages are required.
How is validation handled?
Validation rules are defined on each question in the schema (required, minLength, maxLength, pattern, min, max, email, custom). Validation runs automatically on page navigation and submit. You can also trigger it programmatically via validate() or validateCurrentPage().
Can I pre-populate answers?
Yes. Pass initialAnswers in the options object to useSurvey or SurveyRenderer. This is useful for edit forms, saved progress, or restoring state.
Does it support TypeScript?
Fully. The library ships with complete TypeScript declarations. All types (SurveySchema, Question, ValidationRule, etc.) are exported from the main entry point.
What's the bundle size?
The full package (all 16 question types + renderer) is ~13 KB gzipped. If you only use the headless core (useSurvey + validation, no default renderers), it drops to ~4–5 KB gzipped. The builder is an optional separate entry point and is not included in the renderer bundle.
Can I handle async submission?
Yes. The onSubmit callback can return a Promise. The library awaits it before marking the survey as submitted.
How do I reset a survey?
Call the reset() function returned from useSurvey. It clears all answers, resets to the first page, and clears validation errors.
Is the library accessible / WCAG compliant?
Yes. All built-in form components are fully WCAG 2.1 AA compliant. Every input includes proper aria-required, aria-invalid, aria-describedby, aria-labelledby, and ARIA roles. Keyboard focus-visible outlines are provided out of the box. Error messages use role="alert" with aria-live for screen reader announcements. No extra configuration is needed — accessibility works automatically with the default components.
Still have questions?
Open an issue on GitHub or start a discussion. We're happy to help!