survey-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.
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
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
- Creating a basic survey creator instance:
import { SurveyCreator } from "survey-creator-core";
const creator = new SurveyCreator({
showLogicTab: true,
isAutoSave: true
});
creator.render("creatorElement");
- 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);
});
- 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:
-
Install the package:
npm install survey-creator-core
-
Import and create a SurveyCreator instance:
import { SurveyCreator } from "survey-creator-core"; const creator = new SurveyCreator();
-
Render the creator in your HTML:
creator.render("creatorElement");
-
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.
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
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
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.
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
Build forms in React, without the tears 😭
A jQuery plugin for drag and drop form creation
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot