Convert Figma logo to code with AI

surveyjs logosurvey-creator

Scalable open-source survey software to generate dynamic JSON-driven forms within your JavaScript application. The form builder features a drag-and-drop UI, CSS Theme Editor, and GUI for conditional logic and form branching.

1,020
418
1,020
340

Top Related Projects

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.

JavaScript powered Forms with JSON Form Builder

A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design

34,253

Build forms in React, without the tears 😭

A jQuery plugin for drag and drop form creation

Quick Overview

SurveyJS Creator is a powerful survey builder and form designer component for web applications. It provides a drag-and-drop interface for creating and customizing surveys, forms, and quizzes, with support for various question types and advanced features like conditional logic and validation.

Pros

  • User-friendly interface with drag-and-drop functionality
  • Extensive customization options for survey appearance and behavior
  • Support for a wide range of question types and advanced features
  • Integration with popular frameworks like React, Vue, and Angular

Cons

  • Steep learning curve for advanced features and customizations
  • Limited built-in themes and styling options
  • Requires a commercial license for some features and production use
  • Documentation can be overwhelming for beginners

Code Examples

  1. Creating a basic survey creator instance:
import { SurveyCreator } from "survey-creator-core";

const creator = new SurveyCreator({
  showLogicTab: true,
  isAutoSave: true
});

creator.render("creatorElement");
  1. Adding a custom question type:
import { QuestionFactory, ElementFactory } from "survey-core";

QuestionFactory.Instance.registerQuestion("myquestion", (name) => {
  return new MyQuestionModel(name);
});

ElementFactory.Instance.registerElement("myquestion", (json) => {
  return new MyQuestionModel(json.name);
});
  1. Saving survey JSON:
creator.saveSurveyFunc = (saveNo, callback) => {
  const json = creator.JSON;
  saveSurveyJson(json).then(() => {
    callback(saveNo, true);
  });
};

Getting Started

To get started with SurveyJS Creator:

  1. Install the package:

    npm install survey-creator-core
    
  2. Import and create a SurveyCreator instance:

    import { SurveyCreator } from "survey-creator-core";
    
    const creator = new SurveyCreator();
    
  3. Render the creator in your HTML:

    creator.render("creatorElement");
    
  4. Access the survey JSON:

    const surveyJson = creator.JSON;
    

For more advanced usage and customization options, refer to the official documentation.

Competitor Comparisons

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.

Pros of survey-library

  • More lightweight and focused on survey rendering and data collection
  • Easier to integrate into existing projects without additional UI components
  • Higher flexibility for custom implementations and designs

Cons of survey-library

  • Lacks built-in survey creation and editing capabilities
  • Requires more development effort to create a full survey management system
  • May need additional libraries or custom code for advanced features

Code Comparison

survey-library:

import { Model } from 'survey-core';

const survey = new Model({
  questions: [
    { type: 'text', name: 'name', title: 'Your name:' }
  ]
});

survey-creator:

import { SurveyCreator } from 'survey-creator-core';

const creator = new SurveyCreator({
  showLogicTab: true,
  isAutoSave: true
});

The survey-library code focuses on defining and rendering surveys, while survey-creator provides a full-featured survey editing interface. survey-library offers more granular control over survey structure, whereas survey-creator abstracts much of this complexity behind a user-friendly interface.

JavaScript powered Forms with JSON Form Builder

Pros of formio.js

  • More flexible and customizable form builder with extensive API
  • Supports a wider range of form components and field types
  • Better integration with server-side technologies and databases

Cons of formio.js

  • Steeper learning curve due to its complexity and extensive features
  • Less intuitive drag-and-drop interface compared to survey-creator
  • Requires more setup and configuration for basic use cases

Code Comparison

survey-creator:

const creator = new SurveyCreator();
creator.saveSurveyFunc = (saveNo, callback) => {
    saveSurveyJson(creator.text);
    callback(saveNo, true);
};

formio.js:

Formio.createForm(document.getElementById('formio'), {
  components: [
    { type: 'textfield', key: 'firstName', label: 'First Name' },
    { type: 'textfield', key: 'lastName', label: 'Last Name' },
    { type: 'button', action: 'submit', label: 'Submit' }
  ]
});

The code snippets demonstrate the different approaches to creating forms. survey-creator focuses on a high-level creator object, while formio.js provides more granular control over form components and structure.

A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design

Pros of react-admin

  • More comprehensive admin framework with built-in data providers, authentication, and UI components
  • Larger community and ecosystem with extensive documentation and third-party extensions
  • Flexible architecture allowing for custom views and logic beyond just form building

Cons of react-admin

  • Steeper learning curve due to its broader scope and more complex architecture
  • May be overkill for simple survey or form creation tasks
  • Less focused on survey-specific features like question types and logic

Code Comparison

react-admin:

import { Admin, Resource, ListGuesser } from 'react-admin';
import { dataProvider } from './dataProvider';

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="users" list={ListGuesser} />
  </Admin>
);

survey-creator:

var creator = new SurveyCreator.SurveyCreator("creatorElement");
creator.saveSurveyFunc = function (saveNo, callback) {
  // Save survey here
  callback(saveNo, true);
};

The react-admin example shows how to set up a basic admin interface with a resource, while the survey-creator example demonstrates initializing the survey creator and setting up a save function.

34,253

Build forms in React, without the tears 😭

Pros of Formik

  • Lightweight and focused on form state management
  • Seamless integration with React ecosystem
  • Extensive documentation and community support

Cons of Formik

  • Limited built-in UI components
  • Requires additional libraries for complex form layouts
  • Less suitable for non-React projects

Code Comparison

Formik:

import { Formik, Form, Field } from 'formik';

<Formik initialValues={{ name: '' }} onSubmit={handleSubmit}>
  <Form>
    <Field name="name" />
    <button type="submit">Submit</button>
  </Form>
</Formik>

Survey Creator:

import { SurveyCreator } from "survey-creator";

const creator = new SurveyCreator();
creator.JSON = { elements: [{ type: "text", name: "name" }] };
creator.render("creatorElement");

Key Differences

  • Formik focuses on form state management in React, while Survey Creator is a full-featured survey builder
  • Survey Creator provides a visual editor, whereas Formik requires manual form construction
  • Formik offers more flexibility for custom form layouts, while Survey Creator has pre-built templates and themes

Use Cases

  • Choose Formik for React-based projects requiring custom form implementations
  • Opt for Survey Creator when building complex surveys or questionnaires with a visual editor

A jQuery plugin for drag and drop form creation

Pros of formBuilder

  • Lightweight and easy to integrate
  • Extensive customization options for form fields
  • Active community and regular updates

Cons of formBuilder

  • Limited advanced survey features compared to survey-creator
  • Less comprehensive documentation and examples

Code Comparison

formBuilder:

$(document).ready(function() {
  $('#fb-editor').formBuilder();
});

survey-creator:

var creator = new SurveyCreator.SurveyCreator("creatorElement");
creator.saveSurveyFunc = function(saveNo, callback) {
  // Save survey logic here
};

Key Differences

  • formBuilder focuses on simple form creation, while survey-creator offers more advanced survey functionality
  • survey-creator provides a more comprehensive set of tools for complex surveys and questionnaires
  • formBuilder has a simpler API and is easier to set up for basic use cases
  • survey-creator offers more robust data analysis and reporting features

Use Cases

  • formBuilder: Best for simple contact forms, feedback forms, and basic data collection
  • survey-creator: Ideal for complex surveys, market research, and advanced data gathering scenarios

Community and Support

  • Both projects have active communities and regular updates
  • survey-creator has more extensive documentation and examples available
  • formBuilder has a larger number of GitHub stars and forks, indicating broader adoption

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Creator

Issues Closed issues GitHub Release

SurveyJS Creator

SurveyJS Creator is an extensible client-side form builder component that seamlessly integrates with any backend system and allows you to build dynamic JSON-based forms right in your JavaScript application. It features a drag-and-drop UI, CSS Theme Editor, and GUI for conditional logic and form branching. Each form created in a no-code form builder UI has a JSON definition (schema) generated behind the scenes. Such schema contains form configurations, including its style, contents, layout, and behavior in response to user interactions, such as data submission, input validation, error messages, etc. You can export a form to JSON, save it to your database and render in your application using SurveyJS Form Library. SurveyJS Creator has native support for React, Angular, Vue, and Knockout; jQuery is supported via a wrapper over the Knockout version. The form builder UI is fully customizable and can be modified to meet any functional and brand requirements.


Documentation · Roadmap · Starter Examples · Full-featured Demo · Report Bug · Twitter


https://github.com/surveyjs/survey-creator/assets/102306951/afb8a75d-921e-4e5f-89bb-961b9b89388d

Features

  • Native support for React, Angular, Vue, and Knockout
  • Integration of the Knockout version into Vue and jQuery applications
  • Work directly in a browser, doesn't execute any server code
  • Any web application (including SaaS)
  • Integrates with any backend system
  • Integration examples for PHP, ASP.NET Core, and NodeJS
  • TypeScript support
  • White-labeled
  • Unlimited form creators
  • You can implement user access control (integrates with any user management system)
  • Drag-and-drop interface
  • No limitations on advanced input types or form freatures
  • GUI for conditional logic & form branching
  • Automatically generates form JSON schemas
  • CSS Theme Editor with a panel of UI controls
  • Predefined form themes
  • Reusable custom form themes
  • Community-supported UI localization to 25+ languages
  • Supports RTL languages
  • Customizable form builder UI
  • Reusable form components
  • Reusable form templates
  • Custom question library
  • Toolbox customization (rename, rearrange, or add new input fields)
  • Property Grid customization (limit available settings or add new ones)
  • Support for custom widgets
  • 60+ Starter examples & tutorials
  • Free full-featured demo

Get Started

Resources

SurveyJS Product Family

  • Form Library - A free and open-source MIT-licensed JavaScript library that renders dynamic JSON-based forms in your web application, and collects responses.
  • Survey Creator - A self-hosted drag-and-drop form builder that automatically generates JSON definition (schemas) of your forms in real time. Try out a free full-featured demo to evaluate its capabilities.
  • Dashboard - Simplifies survey data visualization and analysis with interactive and customizable charts and tables.
  • PDF Generator - An open-source JavaScript library that renders SurveyJS surveys and forms as PDF files in a browser. With PDF Generator you can save an unlimited number of custom-built forms to PDF (both editable and read-only).

Licensing

Survey Creator is not available for free commercial usage. If you want to integrate it into your application, you must purchase a commercial license for software developer(s) who will be working with the SurveyJS product's APIs and implementing their integration. However, you can use our free full-featured demo to generate a form configuration file in the JSON format and render it with SurveyJS Form Library in your application free of charge.

NPM DownloadsLast 30 Days