npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

survey-creator-core

v3.2.4

Published

Framework-independent core of SurveyJS Survey Creator, an embeddable drag-and-drop form builder. Holds the editor model, design surface, toolbox, property grid, and logic/theme editors. Pair it with survey-creator-react, -angular, -vue, or -js to render.

Downloads

670,447

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

tsv2013tsv2013andrewtelnovandrewtelnovduodvkduodvknovikov82novikov82dk981234dk981234surveyjsdevelopersurveyjsdevelopergologamesgologames

Keywords

surveyformsurveyjssurvey-creatorsurvey-buildersurvey-editorform-builderform-editorjson-form-builderjson-form-editorjson-formsdrag-and-drop-form-buildervisual-form-builderno-code-form-builderdynamic-form-builderconditional-logicembeddablequestionnairedata-collectionbootstrapbootswatchmuimaterial-uishadcnshadcn-uijavascripttypescript

Readme

SurveyJS Survey Creator — Core Model

SurveyJS Survey Creator

Build Status NPM Version Tested with Playwright Open Issues Closed Issues

survey-creator-core is the platform-independent model of Survey Creator, the drag-and-drop form builder for SurveyJS Form Library. It holds everything that does not depend on a rendering framework: the tab and plugin system, the design surface, the toolbox, the property grid, the logic, translation, and theme editors, undo-redo, localization, and the UI style sheets. It does not render anything on its own — pair it with one of the platform-specific UI packages below. Installing survey-creator-core alone is the most common reason the builder never appears on the page.

Survey Creator produces survey JSON schemas that SurveyJS Form Library renders in your application.

Try Survey Creator / Form Builder

Install

Install the UI package for your framework. survey-creator-core is a peer dependency of each one: npm 7 and later install it automatically; with pnpm or Yarn 1, add it explicitly:

npm install survey-creator-react   # React
npm install survey-creator-angular # Angular
npm install survey-creator-vue     # Vue 3
npm install survey-creator-js      # HTML/CSS/JavaScript

To add the model on its own (for example, in code shared between a UI layer and a Node.js service):

npm install survey-creator-core

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 during application startup, before you construct SurveyCreatorModel. Your key and step-by-step setup instructions are on the How to Remove the Alert Banner page in your SurveyJS account.

Usage

import { SurveyCreatorModel } from "survey-creator-core";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";

const creatorOptions = {
  autoSaveEnabled: true,
  collapseOnDrag: true
};

const creator = new SurveyCreatorModel(creatorOptions);

creator.saveSurveyFunc = (saveNo, callback) => {
  // Save `creator.JSON` or `creator.text` to your database, then:
  callback(saveNo, true);
};

Pass the creator instance to the component from your UI package to render it — for example, <SurveyCreatorComponent creator={creator} /> in React. See the Get Started tutorial for your framework in the table below.

survey-creator-core also holds the model's own string table (editorLocalization), separate from survey-core's. Per-locale strings are imported from survey-creator-core/i18n.

Themes

survey-creator-core/survey-creator-core.css applies the Light UI theme; survey-creator-core.min.css is the minified build. 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);

Because both the style sheets and applyCreatorTheme live in this package, UI theming works identically in every framework — the UI package you pair with survey-creator-core adds nothing to it.

To make a custom creator theme available for selection in the Survey Creator UI, register it with registerCreatorTheme(theme). See Dynamic UI Customization.

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

Themes are built on --sjs-* CSS custom properties (design tokens). A theme adapter maps an existing design system's variables onto those tokens, so a survey inherits the look of the host application instead of being restyled by hand. 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/bootstrap-default.css";

Adapters are available for Bootstrap, Material UI (mui.css), and shadcn/ui (shadcn-default.css, shadcn-new-york.css). Bootstrap additionally ships Bootswatch variants — bootstrap-darkly.css, bootstrap-flatly.css, and others. Because adapters read the host system's live variables, any Bootstrap or Bootswatch build re-skins the survey automatically. Matching icon sets are optional side-effect imports:

import "survey-core/themes/adapters/icons/lucide"; // or ".../icons/mui"

Adapters are framework-independent and require no extra markup or configuration. They restyle the survey; the Survey Creator UI around it is styled by the creator UI themes described above. See Theme Adapters.

Key features

Editor Model

  • Framework-independent editor model shared by every Survey Creator UI package
  • Tab and plugin system, design surface, Toolbox, Property Grid, and logic, translation, and theme editors
  • Undo-redo, localization, and the UI style sheets
  • 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

Appearance Customization

Related packages

| Framework | UI package | Get Started | | --- | --- | --- | | React | survey-creator-react | Tutorial | | Angular | survey-creator-angular | Tutorial | | Vue 3 | survey-creator-vue | Tutorial | | HTML/CSS/JavaScript | survey-creator-js | Tutorial |

Documentation

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 and builds independently, but a root install is still required for the shared tooling (linting, Playwright).

  1. Build survey-library

    Survey Creator resolves survey-core and the framework renderers from the sibling survey-library repository, so clone it into the same parent directory as survey-creator and build it first. Follow Build from sources in the survey-core README.

  2. Clone the repo and install shared dependencies

    git clone https://github.com/surveyjs/survey-creator.git
cd survey-creator
npm install

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

  3. Install and build survey-creator-core

    cd packages/survey-creator-core
npm install
npm run build:all

    Build output goes to the build directory. npm run build produces the JS bundle, the SCSS-compiled styles, and the UI presets; npm run build:all adds i18n and the API documentation. Use npm run watch:dev while developing.

    Every UI package resolves survey-creator-core from ../survey-creator-core/build, so survey-creator-core must be built before you build or test any UI package.

  4. Run unit tests

    Unit tests use Vitest in a jsdom environment and live in packages/survey-creator-core/tests. They are split into two Vitest projects: core and presets.

    npm run test                          # whole suite
npm run test:watch                    # watch mode
npm run test:core                     # only the "core" project
npm run test:presets                  # only the "presets" project
npx vitest run tests/creator-base-1.tests.ts   # a single file
npx vitest run -t "toolbox"                    # tests whose name matches a substring

  5. Run end-to-end tests

    E2E, visual-regression, and accessibility tests are Playwright suites shared by all UI packages and run from a UI package directory (after survey-creator-core is built). Do not start an HTTP server yourself — the Playwright config starts its own.

    cd packages/survey-creator-react
npm install
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

  6. Build a UI package

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.