Introduction

react-minimal-survey-builder is a lightweight, headless survey engine for React. It provides everything you need to build, render, and manage surveys — from simple feedback forms to complex multi-page questionnaires with conditional logic.

Key Philosophy

Unlike monolithic solutions, this library is headless by design. You own the UI. Use the built-in components for quick prototyping, or bring your own design system and render surveys exactly how you want.

Features

JSON-based survey schema

useSurvey headless hook

Built-in question components

Drag & drop builder

Multi-page with progress

Conditional visibility

Rich validation engine

Custom question types

Plugin system

Full TypeScript support

Framework-agnostic core

Zero heavy dependencies

WCAG 2.1 accessible form fields

Architecture

The library is organized into three layers:

Core Engine

react-minimal-survey-builder/core

Schema parsing, validation, condition evaluation, state management. Framework-agnostic.

React Bindings

react-minimal-survey-builder

useSurvey hook, SurveyRenderer, QuestionRenderer. Built on top of the core. All default components are WCAG 2.1 accessible.

Builder

react-minimal-survey-builder/builder

Drag & drop survey builder with visual editor, live preview, and JSON editing.

Quick Example

Quick Starttsx

import { SurveyRenderer } from 'react-minimal-survey-builder';

const schema = {
  id: 'quick-demo',
  pages: [{
    id: 'page1',
    questions: [
      { id: 'name', type: 'text', label: 'Your Name', required: true },
      { id: 'email', type: 'email', label: 'Email', required: true },
      { id: 'rating', type: 'rating', label: 'Rate your experience' },
    ],
  }],
};

export default function App() {
  return (
    <SurveyRenderer
      schema={schema}
      options={{ onSubmit: (answers) => console.log(answers) }}
    />
  );
}