surveyjs

Open Source

survey-library

<div align="center">  </div> <div align="center"> [](https://dev.azure.com/SurveyJS/V2%20Libraries/_build/latest?definitionId=130&repoName=surveyjs%2Fsurvey-library&branchName=master) [](LICENSE) <a href="https://github.com/microsoft/playwright"> <img alt="Tested with Playwright" src="https://img.shields.io/badge/tested%20with-Playwright-2fa4cf.svg"> </a> <a href="https://github.com/surveyjs/survey-library/issues"> <img alt="Issues" title="Open Issues" src="https://img.shields.io/github/issues/surveyjs/survey-library.svg"> </a> <a href="https://github.com/surveyjs/survey-library/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aclosed+"> <img alt="Closed issues" title="Closed Issues" src="https://img.shields.io/github/issues-closed/surveyjs/survey-library.svg"> </a> <a href="https://surveyjs.io/stay-updated/release-notes"> <img alt="GitHub Release" src="https://img.shields.io/github/v/release/surveyjs/survey-library"> </a> # SurveyJS Form Library </div> <div align="justify"> SurveyJS Form Library is a free to use MIT-licensed client-side component that allows you to render dynamic JSON-based forms in any JavaScript application, collect responses, and send all form submission data to a database of your choice. You can use it for multi-page forms of any length and complexity, pop-up surveys, quizzes, scored surveys, calculator forms, and more. SurveyJS Form Library has **native support for React, Angular, Vue, and Knockout;** jQuery is supported via a wrapper over the Knockout version. The library interacts with the server using JSON objects&mdash;for both form metadata, also known as form JSON schemas, and results. The [SurveyJS product family](https://surveyjs.io/) also includes a robust [form builder library](https://surveyjs.io/survey-creator/documentation/overview) that automatically generates form configuration files in JSON format. The form builder features a drag-and-drop UI, CSS Theme Editor, and GUI for conditional logic and form branching. </div> <br> <p align="center"> <a href="https://surveyjs.io/form-library/documentation/overview">Documentation</a> · <a href="https://surveyjs.io/stay-updated/roadmap">Roadmap</a> · <a href="https://surveyjs.io/form-library/examples/overview">View Demos</a> · <a href="https://surveyjs.io/create-free-survey">Generate JSON form</a> · <a href="https://github.com/surveyjs/survey-library/issues/new">Report Bug</a> · <a href="https://twitter.com/SurveyJS">Twitter</a> </p> <br> https://github.com/surveyjs/survey-library/assets/102306951/844563b2-c7c3-400c-962f-bcdbe7274d55 ## Features - It's suitable for multi-page forms, quizzes, scored surveys, calculator forms, and survey pop-ups - Integration with React, Angular, Vue, jQuery, and Knockout - [Compatible with any server & database](https://surveyjs.io/documentation/backend-integration) - [Integration examples for PHP, ASP.NET Core, and NodeJS](https://surveyjs.io/backend-integration/examples) - [All data is stored on your own servers](https://surveyjs.io/form-library/documentation/how-to-store-survey-results); therefore, there are no limits on the number of forms, submissions, and file uploads - 20+ accessible input types, panels for question grouping, dynamic questions with a duplicate group option - [Input validation](https://surveyjs.io/form-library/documentation/data-validation), partial submits & auto-save, lazy loading, load choices from web services - Custom input fields - Carry forward responses, text piping, autocomplete - Integration with 3rd-party libraries and payment systems - Support for webhooks - Expression language (Built-in & Custom Functions), data aggregation within a form - TypeScript support - [Auto-localization and multi-locale surveys](https://surveyjs.io/form-library/documentation/survey-localization), support for RTL languages - [Weekly updates](https://surveyjs.io/stay-updated/release-notes) - [120+ starter demos & tutorials](https://surveyjs.io/form-library/examples/overview) - Community-supported UI localization to 50+ languages - Built-in themes and CSS customization - e-Signature field - Image capture - All popular types of form navigation ## Get Started - [Angular](https://surveyjs.io/Documentation/Library?id=get-started-angular) - [React](https://surveyjs.io/Documentation/Library?id=get-started-react) - [Vue](https://surveyjs.io/Documentation/Library?id=get-started-vue) - [HTML/CSS/JavaScript](https://surveyjs.io/form-library/documentation/get-started-html-css-javascript) ## Resources - [Website](https://surveyjs.io/) - [Documentation](https://surveyjs.io/form-library/documentation/overview) - [Starter Demos](https://surveyjs.io/form-library/examples/overview) - [What's New](https://surveyjs.io/stay-updated/major-updates/2024) ## SurveyJS Product Family - [**Form Library**](https://surveyjs.io/form-library/documentation/overview) - A free and open-source MIT-licensed JavaScript library that renders dynamic JSON-based forms in your web application, and collects responses. - [**Survey Creator**](https://surveyjs.io/survey-creator/documentation/overview) - 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](https://surveyjs.io/create-free-survey) to evaluate its capabilities. - [**Dashboard**](https://surveyjs.io/dashboard/documentation/overview) - Simplifies survey data visualization and analysis with interactive and customizable charts and tables. - [**PDF Generator**](https://surveyjs.io/pdf-generator/documentation/overview) - 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). ## Build the SurveyJS Form Library from Sources 1. [**Build the platform-independent part**](./packages/survey-core/README.md#survey-model-platform-independent-part) 2. **Build one of the UI packages** - [Angular Form Library](./packages/survey-angular-ui/README.md#build-surveyjs-angular-form-library-from-sources) - [React Form Library](./packages/survey-react-ui/README.md#build-surveyjs-react-form-library-from-sources) - [Vue Form Library](./packages/survey-vue3-ui/README.md#build-surveyjs-vue-form-library-from-sources) - [HTML/CSS/JS Form Library](./packages/survey-js-ui/README.md#build-surveyjs-form-library-ui-from-sources) ## Licensing SurveyJS Form Library is distributed under the [MIT license](https://github.com/surveyjs/survey-library/blob/master/LICENSE).

JavaScript Libraries & Components Form & Survey Builders

4.8K Github Stars

Read more

Open Source

survey-creator

<div align="center">  </div> <div align="center"> [](https://dev.azure.com/SurveyJS/V2%20Libraries/_build/latest?definitionId=149&repoName=surveyjs%2Fsurvey-creator&branchName=master) <a href="https://github.com/microsoft/playwright"> <img alt="Tested with Playwright" src="https://img.shields.io/badge/tested%20with-Playwright-2fa4cf.svg"> </a> <a href="https://github.com/surveyjs/survey-creator/issues"> <img alt="Issues" title="Open Issues" src="https://img.shields.io/github/issues/surveyjs/survey-creator.svg"> </a> <a href="https://github.com/surveyjs/survey-creator/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aclosed+"> <img alt="Closed issues" title="Closed Issues" src="https://img.shields.io/github/issues-closed/surveyjs/survey-creator.svg"> </a> <a href="https://surveyjs.io/stay-updated/release-notes"> <img alt="GitHub Release" src="https://img.shields.io/github/v/release/surveyjs/survey-creator"> </a> # SurveyJS Creator </div> <div align="justify"> 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](https://surveyjs.io/form-library/documentation/overview). 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. </div> </br> </div> <p align="center"> <a href="https://surveyjs.io/survey-creator/documentation/overview">Documentation</a> · <a href="https://surveyjs.io/stay-updated/roadmap">Roadmap</a> · <a href="https://surveyjs.io/survey-creator/examples/free-nps-survey-template/reactjs">Starter Examples</a> · <a href="https://surveyjs.io/create-free-survey">Full-featured Demo</a> · <a href="https://github.com/surveyjs/survey-creator/issues/new">Report Bug</a> · <a href="https://twitter.com/SurveyJS">Twitter</a> </p> </br> 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](https://surveyjs.io/survey-creator/documentation/integration-with-backend) - [Integration examples for PHP, ASP.NET Core, and NodeJS](https://surveyjs.io/backend-integration/examples) - 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](https://surveyjs.io/Documentation/Survey-Creator?id=localization) - 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](https://surveyjs.io/survey-creator/documentation/customize-question-types) - 60+ Starter examples & tutorials - [Free full-featured demo](https://surveyjs.io/create-free-survey) ## Get Started - [Angular](https://surveyjs.io/survey-creator/documentation/get-started-angular) - [Vue](https://surveyjs.io/survey-creator/documentation/get-started-vue) - [React](https://surveyjs.io/survey-creator/documentation/get-started-react) - [HTML/CSS/JavaScript](https://surveyjs.io/survey-creator/documentation/get-started-html-css-javascript) ## Resources - [Website](https://surveyjs.io/) - [Documentation](https://surveyjs.io/survey-creator/documentation/overview) - [Starter Demos](https://surveyjs.io/survey-creator/examples/free-nps-survey-template/reactjs) - [What's New](https://surveyjs.io/stay-updated/major-updates/2024) ## SurveyJS Product Family - [**Form Library**](https://surveyjs.io/form-library/documentation/overview) - A free and open-source MIT-licensed JavaScript library that renders dynamic JSON-based forms in your web application, and collects responses. - [**Survey Creator**](https://surveyjs.io/survey-creator/documentation/overview) - 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](https://surveyjs.io/create-free-survey) to evaluate its capabilities. - [**Dashboard**](https://surveyjs.io/dashboard/documentation/overview) - Simplifies survey data visualization and analysis with interactive and customizable charts and tables. - [**PDF Generator**](https://surveyjs.io/pdf-generator/documentation/overview) - 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](https://surveyjs.io/licensing) 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](https://surveyjs.io/create-free-survey) to generate a form configuration file in the JSON format and render it with SurveyJS Form Library in your application free of charge.

JavaScript Libraries & Components Form & Survey Builders

1.3K Github Stars

Read more

Open Source

surveyjs-nodejs

# SurveyJS + NodeJS Demo Example This demo shows how to integrate [SurveyJS](https://surveyjs.io/) components with a NodeJS backend. [View Demo Online](https://surveyjs-nodejs.azurewebsites.net/) ## Disclaimer This demo must not be used as a real service as it doesn't cover such real-world survey service aspects as authentication, authorization, user management, access levels, and different security issues. These aspects are covered by backend-specific articles, forums, and documentation. ## Run the Application Install [NodeJS](https://nodejs.org/) on your machine. After that, run the following commands: ```bash git clone https://github.com/surveyjs/surveyjs-nodejs.git cd surveyjs-nodejs npm i npm start ``` Open http://localhost:3000 in your web browser. ## Client-Side App The client-side part is the `surveyjs-react-client` React application. The current project includes only the application's build artifacts. Refer to the [surveyjs-react-client](https://github.com/surveyjs/surveyjs-react-client) repo for full code and information about the application.

JavaScript Libraries & Components Form & Survey Builders

151 Github Stars

Read more

Open Source

surveyjs_react_quickstart

# (Obsolete) SurveyJS + React Quickstart Template > This template is built using [Create React App](https://github.com/facebook/create-react-app), which is now deprecated. Use the [SurveyJS + Next.js quickstart template](https://github.com/surveyjs/surveyjs-nextjs) instead. SurveyJS is a set of JavaScript components that allow you and your users to build surveys / forms, store them in your database, and visualize survey results for data analysis. This quick start template is bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app) and uses the following SurveyJS components: - [SurveyJS Form Library](https://surveyjs.io/form-library/documentation/overview) - [Survey Creator / Form Builder](https://surveyjs.io/survey-creator/documentation/overview) - [SurveyJS PDF Generator](https://surveyjs.io/pdf-generator/documentation/overview) - [SurveyJS Dashboard](https://surveyjs.io/dashboard/documentation/overview) ## Run the application ```bash git clone https://github.com/surveyjs/surveyjs_react_quickstart.git cd surveyjs_react_quickstart npm i npm run start ``` Open http://localhost:3000/ in your web browser. ## Template structure This template covers most basic use cases. You can find code examples for them in the following files: - Create a standalone survey - [src/data/survey_json.js](src/data/survey_json.js) - [src/pages/Survey.js](src/pages/Survey.js) - Add Survey Creator to a page - [src/components/SurveyCreator.js](src/components/SurveyCreator.js) - [src/pages/Creator.js](src/pages/Creator.js) - Export a survey to a PDF document - [src/pages/Export.js](src/pages/Export.js) - Visualize survey results - As charts - [src/data/analytics_data.js](src/data/analytics_data.js) - [src/components/SurveyAnalytics.js](src/components/SurveyAnalytics.js) - [src/pages/Analytics.js](src/pages/Analytics.js) - As a table - [src/data/analytics_data.js](src/data/analytics_data.js) - [src/components/SurveyAnalyticsTabulator.js](src/components/SurveyAnalyticsTabulator.js) - [src/pages/AnalyticsTabulator.js](src/pages/AnalyticsTabulator.js) - Create a custom question type - [src/components/MyQuestion.js](src/components/MyQuestion.js) - Register third-party components - [src/App.js](src/App.js#L37)

Frontend Templates Form & Survey Builders

148 Github Stars

Read more

Open Source

surveyjs-aspnet-mvc

# SurveyJS + .NET Core Demo Example This demo shows how to integrate [SurveyJS](https://surveyjs.io/) components with a .NET Core backend. [View Demo Online](https://surveyjs-aspnet-core.azurewebsites.net/) ## Disclaimer This demo must not be used as a real service as it doesn't cover such real-world survey service aspects as authentication, authorization, user management, access levels, and different security issues. These aspects are covered by backend-specific articles, forums, and documentation. ## Run the Application Install [.NET](https://dotnet.microsoft.com/en-us/download) on your machine. After that, run the following commands: ```bash git clone https://github.com/surveyjs/surveyjs-aspnet-mvc.git cd surveyjs-aspnet-mvc dotnet build dotnet run ``` Open http://localhost:5000 in your web browser. ## Client-Side App The client-side part is the `surveyjs-react-client` React application. The current project includes only the application's build artifacts. Refer to the [surveyjs-react-client](https://github.com/surveyjs/surveyjs-react-client) repo for full code and information about the application. ## Other Resources The [Endatix Platform](https://endatix.com/?utm_source=surveyjs&utm_medium=partner+link) is an open-source solution that provides a fully integrated server-side API for managing SurveyJS forms and their results within .NET environments. Endatix provides a complete backend application structure, from API requests to database integration and admin management, allowing users to quickly implement a fully operational server environment with minimal coding. Endatix is an ideal choice for developers looking for an efficient way to implement SurveyJS without extensive server-side development. **Endatix Platform repo:** https://github.com/endatix/endatix

Accounting Form & Survey Builders

116 Github Stars

Read more

Open Source

surveyjs_vue_quickstart

# SurveyJS + Vue 2 Quickstart Template SurveyJS is a set of JavaScript components that allow you and your users to build surveys / forms, store them in your database, and visualize survey results for data analysis. This quick start template uses Vue 2 and the following SurveyJS components: - [SurveyJS Form Library](https://surveyjs.io/form-library/documentation/overview) - [Survey Creator / Form Builder](https://surveyjs.io/survey-creator/documentation/overview) - [SurveyJS PDF Generator](https://surveyjs.io/pdf-generator/documentation/overview) - [SurveyJS Dashboard](https://surveyjs.io/dashboard/documentation/overview) > NOTE: If you are looking for a similar quickstart template for a Vue 3 application, refer to the following project: [SurveyJS + Vue 3 Quickstart Template](https://github.com/surveyjs/surveyjs_vue3_quickstart/). ## Run the application ```bash git clone https://github.com/surveyjs/surveyjs_vue_quickstart.git cd surveyjs_vue_quickstart npm i npm run serve ``` Open http://localhost:8080/ in your web browser. ## Template structure This template covers most basic use cases. You can find code examples for them in the following files: - Create a standalone survey - [src/data/survey_json.js](src/data/survey_json.js) - [src/views/Survey.vue](src/views/Survey.vue) - Add Survey Creator to a page - [src/components/SurveyCreator.vue](src/components/SurveyCreator.vue) - [src/views/Creator.vue](src/views/Creator.vue) - Export a survey to a PDF document - [src/views/ExportToPDF.vue](src/views/ExportToPDF.vue) - Visualize survey results - As charts - [src/data/analytics_data.js](src/data/analytics_data.js) - [src/views/Analytics.vue](src/views/Analytics.vue) - As a table (modern browsers) - [src/data/analytics_data.js](src/data/analytics_data.js) - [src/views/AnalyticsTabulator.vue](src/views/AnalyticsTabulator.vue) - As a table (old browsers) - [src/data/analytics_data.js](src/data/analytics_data.js) - [src/views/AnalyticsDatatables.vue](src/views/AnalyticsDatatables.vue) - Create a custom question type - [src/components/customwidget.js](src/components/customwidget.js) - Register third-party components - [src/components/SurveyCreator.vue](src/components/SurveyCreator.vue#L16)

Frontend Templates Form & Survey Builders

102 Github Stars

Read more

Open Source

surveyjs-php

# SurveyJS + PHP Demo Example This demo shows how to integrate [SurveyJS](https://surveyjs.io/) components with a PHP backend. [View Demo Online](https://surveyjs-php.azurewebsites.net/) ## Disclaimer This demo must not be used as a real service as it doesn't cover such real-world survey service aspects as authentication, authorization, user management, access levels, and different security issues. These aspects are covered by backend-specific articles, forums, and documentation. ## Run the Application Install [Composer](https://getcomposer.org/) on your machine. After that, run the following commands: ```bash git clone https://github.com/surveyjs/surveyjs-php.git cd surveyjs-php composer install composer start ``` Open http://localhost:8000 in your web browser. ## Client-Side App The client-side part is the `surveyjs-react-client` React application. The current project includes only the application's build artifacts. Refer to the [surveyjs-react-client](https://github.com/surveyjs/surveyjs-react-client) repo for full code and information about the application.

Accounting Form & Survey Builders

89 Github Stars

Read more

Open Source

custom-widgets

# Custom Widgets for SurveyJS > **IMPORTANT**: Using a custom widget is no longer the recommended approach to customizing SurveyJS forms. For current best practices and available options, refer to the following help topic: [Question Customization Options](https://surveyjs.io/form-library/documentation/customize-question-types/question-customization-options). [](https://github.com/surveyjs/custom-widgets/actions/workflows/build.node.js.yml) [](LICENSE) - select2: [site](https://select2.org/), [repo](https://github.com/select2/select2), license: MIT - select2tagbox: [site](https://select2.org/), [repo](https://github.com/select2/select2), license: MIT - icheck: [site](http://icheck.fronteed.com/), [repo](https://github.com/fronteed/iCheck/), license: MIT - inputmask: [site](http://robinherbots.github.io/Inputmask/), [repo](https://github.com/RobinHerbots/Inputmask), license: MIT - jquerybarrating: [site](http://antenna.io/demo/jquery-bar-rating/examples/), [repo](https://github.com/antennaio/jquery-bar-rating), license: MIT - jqueryuidatepicker: [site](https://jqueryui.com/datepicker/), [repo](https://github.com/jquery/jquery-ui), license: https://github.com/jquery/jquery-ui/blob/master/LICENSE.txt - nouislider: [site](https://refreshless.com/nouislider/), [repo](https://github.com/leongersen/noUiSlider), license: https://github.com/leongersen/noUiSlider/blob/master/LICENSE - sortablejs: [site](http://sortablejs.github.io/Sortable/), [repo](https://github.com/RubaXa/Sortable), license: MIT - ckeditor: [site](https://ckeditor.com/ckeditor-4/), [repo](https://github.com/ckeditor/ckeditor-dev), license: https://github.com/ckeditor/ckeditor-dev/blob/major/LICENSE.md - pretty-checkbox: [site](https://lokesh-coder.github.io/pretty-checkbox/), [repo](https://github.com/lokesh-coder/pretty-checkbox/), license: https://github.com/lokesh-coder/pretty-checkbox/blob/master/LICENSE - bootstrap-slider: [site](http://seiyria.com/bootstrap-slider/), [repo](https://github.com/seiyria/bootstrap-slider), license: https://github.com/seiyria/bootstrap-slider/blob/master/LICENSE.md - recordrtc: [site](http://recordrtc.org/), [repo](https://github.com/muaz-khan/RecordRTC), license [MIT](http://spdx.org/licenses/MIT.html) - imageHotArea [repo](https://github.com/TheNetworg/surveyjs-plugin-hotarea), licence: MIT ## Getting started es5 examples: https://surveyjs.io/Examples/Library/?id=custom-widget-select2-tagbox es modules examples: https://stackblitz.com/edit/surveyjs-widgets-react Install the library using es5. ``` <script src="https://unpkg.com/surveyjs-widgets"></script> ``` Install the library using npm. ``` npm install surveyjs-widgets ``` Or use unpkg CDN: https://unpkg.com/surveyjs-widgets@{version-number}/surveyjs-widgets.min.js You find all versions/builds in the [surveyjs/build repo](https://github.com/surveyjs/builds). ## Building surveyjs-widgets from sources To build library yourself: 1. **Clone the repo from GitHub** ``` git clone https://github.com/surveyjs/widgets.git cd surveyjs-widgets ``` 2. **Acquire build dependencies.** Make sure you have [Node.js](http://nodejs.org/) installed on your workstation. This is only needed to _build_ surveyjs from sources. ``` npm install ``` 3. **Build the library** ``` npm run build ``` After that you should have the libraries (angular, jquery, knockout, react and vue) at 'packages' directory. 4. **Add your own custom widget** Please go to [this plunker](https://plnkr.co/edit/dL5LwrEmGZsCfsPW) and select `customwidget.js` to review the code and comments. The [same plunker example](https://plnkr.co/edit/8092Z3gQseG32fOA), but for Survey Creator / Form Builder ## License [MIT license](https://github.com/surveyjs/widgets/blob/master/LICENSE)

Web Components & Widgets Form & Survey Builders

88 Github Stars

Read more

Open Source

surveyjs-react-client

[](https://github.com/surveyjs/surveyjs-react-client/actions/workflows/build-node.js.yml) # SurveyJS React Application This project is a client-side React application that uses [SurveyJS](https://surveyjs.io/) components. The application displays a list of surveys with the following buttons that perform actions on the surveys: - **Run** - Uses the [SurveyJS Form Library](https://surveyjs.io/form-library/documentation/overview) component to run the survey. - **Edit** - Uses the [Survey Creator](https://surveyjs.io/survey-creator/documentation/overview) component to configure the survey. - **Results** - Uses the [SurveyJS Dashboard](https://surveyjs.io/dashboard/documentation/overview) component to display survey results as a table. - **Remove** - Deletes the survey.  You can integrate this project with a backend of your choice to create a full-cycle survey management service as shown in the following repos: - [surveyjs-aspnet-mvc](https://github.com/surveyjs/surveyjs-aspnet-mvc) - [surveyjs-nodejs](https://github.com/surveyjs/surveyjs-nodejs) - [surveyjs-php](https://github.com/surveyjs/surveyjs-php) ## Run the Application ```bash git clone https://github.com/surveyjs/surveyjs-react-client.git cd surveyjs-react-client npm i npm start ```

Web Components & Widgets Form & Survey Builders

21 Github Stars

Read more

Open Source

surveyjs-nodejs-postgresql

# SurveyJS + NodeJS + PostgreSQL Demo Example This demo shows how to integrate [SurveyJS](https://surveyjs.io/) components with a NodeJS backend using a PostgreSQL database as a storage. [View Demo Online](https://surveyjs-nodejs.azurewebsites.net/) ## Disclaimer This demo must not be used as a real service as it doesn't cover such real-world survey service aspects as authentication, authorization, user management, access levels, and different security issues. These aspects are covered by backend-specific articles, forums, and documentation. ## Run the Application 1. Install [NodeJS](https://nodejs.org/) and [Docker Desktop](https://docs.docker.com/desktop/) on your machine. 2. Run the following commands: ```bash git clone https://github.com/surveyjs/surveyjs-nodejs-postgresql.git cd surveyjs-nodejs-postgresql docker compose up -d ``` 3. Open http://localhost:9080 in your web browser. ## Client-Side App The client-side part is the `surveyjs-react-client` React application. The current project includes only the application's build artifacts in the [public](./public/) directory. Refer to the [`surveyjs-react-client`](https://github.com/surveyjs/surveyjs-react-client) repo for full code and information about the application. ## Integrate SurveyJS with PostgreSQL SurveyJS communicates with any database using JSON objects that contain either survey schemas or user responses. An SQL database should have two tables to store these objects: `surveys` and `results`. You can use the following SQL script to create them: [`surveyjs.sql`](postgres/initdb/surveyjs.sql). The diagram below shows the structure of these tables:  To modify data in the `surveys` and `results` tables, you need to implement several JavaScript functions. According to the tasks they perform, these functions can be split into three modules: - **SQL query builder** JS functions that construct CRUD SQL queries (see the [`sql-crud-adapter.js`](express-app/db-adapters/sql-crud-adapter.js) file). - **SQL query runner** JS functions that execute queries in an SQL database. The repository you are viewing includes a query runner for PostgreSQL databases (see the [`postgres.js`](express-app/db-adapters/postgres.js) file). You can use it as an example to create a query runner for any other SQL database. - **Survey storage** JS functions that provide an API for working with survey schemas and user responses (see the [`survey-storage.js`](express-app/db-adapters/survey-storage.js) file). This API is used by the NodeJS application router (see the [`index.js`](express-app/index.js) file). These modules interact with each other as shown on the following diagram:  If you want to integrate SurveyJS with other databases, you can modify or replace the query builder and query runner without changing the survey storage module. This approach is applied to MongoDB integration in the following repository: [`surveyjs-nodejs-mongodb`](https://github.com/surveyjs/surveyjs-nodejs-mongodb).

Form & Survey Builders

12 Github Stars

Read more