SurveyJS Survey Creator for React — Drag-and-Drop Form Builder

Survey Creator for React is an embeddable drag-and-drop form builder for creating and editing dynamic, JSON-based forms and surveys in React applications.

The survey-creator-react package provides the React rendering layer for SurveyJS Creator. It works with the framework-independent survey-creator-core package, which manages the form builder model, editor state, form-editing logic, Toolbox, Property Grid, tabs, actions, and other core behavior. survey-creator-core is a peer dependency: npm 7 and later install it automatically; with pnpm or Yarn 1, add it explicitly. You configure a builder instance with survey-creator-core and hand it to this package's SurveyCreatorComponent through its creator prop: <SurveyCreatorComponent creator={creator} />.

Use Survey Creator to build multi-page forms, surveys, quizzes, assessments, and other data-entry tools, configure conditional logic and validation, and customize the form builder UI. Survey Creator generates SurveyJS JSON form definitions that you can save in your own backend and render with SurveyJS React Form Library.

Try Survey Creator for React

Install

npm install survey-creator-react --save

License key

Survey Creator displays an alert banner until you activate a purchased commercial license. Activate your key with setLicenseKey from survey-core:

import { setLicenseKey } from "survey-core";

setLicenseKey("your-license-key-goes-here");

Call it once before the component renders — at module scope in the file that renders SurveyCreatorComponent, or in your application's entry file. Your key and step-by-step setup instructions are on the How to Remove the Alert Banner page in your SurveyJS account.

Usage

'use client'
import { useState } from "react";
import { ICreatorOptions } from "survey-creator-core";
import { SurveyCreator, SurveyCreatorComponent } from "survey-creator-react";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";

const defaultCreatorOptions: ICreatorOptions = {
  autoSaveEnabled: true,
  collapseOnDrag: true
};

export default function SurveyCreatorWidget(props: { options?: ICreatorOptions }) {
  let [creator, setCreator] = useState<SurveyCreator>();

  if (!creator) {
    creator = new SurveyCreator(props.options || defaultCreatorOptions);
    creator.saveSurveyFunc = (saveNo, callback) => {
      // Save `creator.JSON` or `creator.text` to your database, then:
      callback(saveNo, true);
    };
    setCreator(creator);
  }

  return <SurveyCreatorComponent creator={creator} />;
}

Survey Creator is interactive: it relies on state, event handlers, and drag-and-drop. Under Next.js or another framework with React Server Components, mark the component that renders it as client code with the 'use client' directive.

Give the component's container an explicit height — for example, height: 100vh — because Survey Creator fills the space it is given.

Themes

survey-creator-core/survey-creator-core.css applies the Light UI theme. The Dark, Contrast, and Survey Creator 2020 themes are imported from survey-creator-core/themes and applied with creator.applyCreatorTheme(theme):

import { DefaultDark } from "survey-creator-core/themes";

creator.applyCreatorTheme(DefaultDark);

The UI theme styles the builder itself. The look of the forms it produces is edited in the built-in Theme tab and stored in the survey theme JSON. See Themes & Styles and Theme Editor.

Theme adapters

A theme adapter maps an existing design system's CSS variables onto SurveyJS design tokens, so a survey inherits the look of the host application. Survey Creator supports adapters: the form on the design surface and in the Preview tab is a real survey, so it picks up whichever adapter the page loads. Adapters ship with survey-core as plain CSS — import one after the base style sheets:

import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";
import "survey-core/themes/adapters/shadcn-default.css";

Adapters are available for Bootstrap (plus Bootswatch variants), Material UI, and shadcn/ui, with matching icon sets (survey-core/themes/adapters/icons/lucide, .../icons/mui). See Theme Adapters.

Key features

React Integration

• React rendering package for SurveyJS Creator
• Framework-independent editor model through survey-creator-core
• TypeScript support
• Client-side form editing without a required SurveyJS backend

Visual Form Editing

• Drag-and-drop form builder UI
• Multi-page forms and form wizards
• Conditional visibility, branching, validation, and calculated values
• Dedicated Logic and JSON Editor interfaces
• Form preview before publication

Customizable Editor UI

• Configure the Toolbox, Property Grid, tabs, actions, and editor behavior
• Create reusable configurations with the UI Preset Editor
• Add custom question types and reusable components
• Configure different editor experiences for roles, tenants, or subscription plans

Appearance Customization

• Built-in themes and custom branding
• Shared design token system based on CSS variables
• Theme Adapters for Bootstrap, Material UI, and shadcn/ui
• Localization and right-to-left language support

Related packages

| Package | Purpose | | --- | --- | | survey-creator-core | Platform-independent Survey Creator model (peer dependency) | | survey-creator-angular | Angular renderer | | survey-creator-vue | Vue 3 renderer | | survey-creator-js | HTML/CSS/JavaScript renderer | | survey-react-ui | Renders the forms that Survey Creator produces |

Documentation

• Website
• Documentation
• Get Started with React
• API Reference
• Survey Creator Demos for React
• What's New

For AI coding agents: https://surveyjs.io/llms.txt indexes the documentation. Any documentation page is also available as raw Markdown — append .md to its URL, for example https://surveyjs.io/survey-creator/documentation/get-started-react.md.

SurveyJS ecosystem

| Product | Purpose | License | | --- | --- | --- | | Form Library | Render dynamic forms from JSON | MIT | | Survey Creator | Drag-and-drop form builder UI (this package) | Commercial | | Dashboard | Visualize and analyze collected results | Commercial | | PDF Generator | Render forms and responses as PDF | Commercial | | AI Form Response Extractor | Extract responses from paper forms, PDFs, and images into a SurveyJS schema (ai-form-response-extractor) | MIT |

Build from sources

This monorepo does not use npm workspaces: each package installs independently, but a root install is still required for the shared tooling (linting, Playwright).

1. Build survey-library and survey-creator-core first

   This package resolves survey-core, survey-react-ui, and survey-creator-core from sibling build folders, so those must be built before this library can be built or tested. Refer to the following instructions:

   • Build from sources in the survey-core README — build survey-core, then survey-react-ui.
   • Build from sources in the survey-creator-core README.

   NOTE: Make sure that the folders with the cloned survey-library and survey-creator repositories are in the same directory.

2. Install dependencies and build this library

   cd packages/survey-creator-react
   npm install
   npm run build

   Build output goes to the build directory. Use npm run watch:dev while developing.

3. Run a test application

   npm run start

   This serves the package directory at http://localhost:8080/.

4. Run unit tests

   Unit tests use Jest and live in tests.

   npm run test                        # whole suite
   npm run test:dev                    # watch mode
   npm run test:update                 # update snapshots

5. Run end-to-end tests

   E2E, visual-regression, and accessibility tests are Playwright suites. Do not start an HTTP server yourself — the Playwright config starts its own.

   npm run e2e:ci                        # e2e
   npm run e2e:ci -- --grep "TestName"   # a single test
   npm run test:scr:ci                   # visual regression
   npm run test:a11y:ci                  # accessibility

Licensing

You can install Survey Creator and evaluate its full functionality right away — no license is needed to prototype, test, or build a proof of concept. Production use requires a commercial license for each developer who works with the SurveyJS APIs or implements the integration, and activating a license key removes the alert banner. The forms Survey Creator produces are rendered by SurveyJS Form Library, which is MIT-licensed and runs free of charge.