Build JSON Forms and Surveys
in Plain JavaScript

SurveyJS for Plain JavaScript is a set of client-side libraries for building custom form and survey management systems in applications built with HTML, CSS, and JavaScript (without frontend frameworks).

Form Library Survey Creator Dashboard PDF Generator

Use Form Library to render JSON forms, Survey Creator to design forms visually, Dashboard to analyze responses, and PDF Generator to export forms as PDF files. SurveyJS connects to your own backend, so you keep full control over data storage, access rules, and application logic.

SurveyJS Form Library

Use Form Library to render dynamic forms and surveys from JSON schemas in your VanillaJS application. It supports multi-page forms, conditional logic, validation, calculated values, file upload, matrices, dynamic panels, progress bars, and custom question types.
Get Started View Demos Edit in CodeSandbox →
  • Multi-step forms / form wizard
  • Conditional logic
  • Dynamic panels / repeatable sections
  • Auto-populated fields
  • Custom validation
  • Calculated values
  • Save and restore incomplete forms
const surveyJson = {
  // ...
};

const survey = new Survey.Model(surveyJson);
survey.onComplete.add((sender, options) => {
    // Store data in your data storage
    console.log(
        JSON.stringify(sender.data, null, 3));
});
survey.render(
    document.getElementById("surveyContainer"));

SurveyJS Survey Creator

Survey Creator is a drag-and-drop form builder for VanillaJS applications. Embed it in your app to let users create and edit forms visually, while your application stores and manages the generated JSON schema.
Get Started View Demos Edit in CodeSandbox →
  • White-label UI
  • Customizable Toolbox & Settings Panel
  • UI Preset Editor
  • Theme Editor
  • Custom question types
  • Multi-user form editing
  • Localization / translations
const creatorOptions = {
  // ...
};

const creator = new SurveyCreator.SurveyCreator(creatorOptions);

document.addEventListener("DOMContentLoaded", function () {
  creator.render("surveyCreator");
});

SurveyJS Dashboard

Use Dashboard to visualize survey results with charts, tables, and custom visualizers.
Get Started View Demos Edit in CodeSandbox →
  • Survey results analysis
  • Live response updates
  • Response filtering and sorting
  • Custom visualizers
  • Export responses
  • Pivot chart
  • Table view
const surveyJson = {
  // ...
};

const survey = new Survey.Model(json);
const allQuestions = survey.getAllQuestions();
const node = document.getElementById("survey-dashboard");

fetch("https://www.example.com/survey-results/")
  .then(response => response.json())
  .then(data => {
    const vizPanel = new SurveyAnalytics.VisualizationPanel(
      allQuestions,
      data
    );
    vizPanel.render(node);
});

SurveyJS PDF Generator

Use PDF Generator to create printable, editable, or read-only PDF forms from the same SurveyJS JSON schema.
Get Started View Demos Edit in CodeSandbox →
  • Export web forms to PDF
  • Generate completed response records
  • Fill existing PDF forms
  • Create read-only PDF documents
  • Apply custom fonts
  • Configure PDF page size, orientation, and margins
  • Customize PDF themes and layouts
import { SurveyPDF } from "survey-pdf";

function prepareSurveyPDF() {
  const surveyPDF = new SurveyPDF(json);
  surveyPDF.data = survey.data;
  return surveyPDF;
}
function savePdfAsFile() {
  const surveyPDF = prepareSurveyPDF();
  surveyPDF.save("surveyAsFile.pdf");
}
function savePdfAsBlob() {
  const surveyPDF = prepareSurveyPDF();
  surveyPDF
    .raw("bloburl")
    .then(function (bloburl) {
      const a = document.createElement("a");
      a.href = bloburl;
      a.download = "surveyAsBlob.pdf";
      document.body.appendChild(a);
      a.click();
    });
}
function previewPdf() {
  const surveyPDF = prepareSurveyPDF();
  const oldFrame = document.getElementById("pdf-preview-frame");
  if (oldFrame)
    oldFrame.parentNode.removeChild(oldFrame);
  surveyPDF
    .raw("dataurlstring")
    .then(function (dataurl) {
      const pdfEmbed = document.createElement("embed");
      pdfEmbed.setAttribute("id", "pdf-preview-frame");
      pdfEmbed.setAttribute("type", "application/pdf");
      pdfEmbed.setAttribute("style", "width:100%");
      pdfEmbed.setAttribute("height", 200);
      pdfEmbed.setAttribute("src", dataurl);
      const previewDiv = document.getElementById("pdf-preview");
      previewDiv.appendChild(pdfEmbed);
  });
}
Survey Creator creates the JSON schema. Form Library renders that schema as an interactive form. Submitted responses are saved to your database. Dashboard reads the schema and responses to display results. PDF Generator uses the same schema and response data to create PDF forms.

Survey Management System Examples

SurveyJS UI libraries let you build a full-cycle survey management system inside your VanillaJS application. Users can design forms, publish surveys, submit and review responses, and export completed data to PDF without leaving your app. The same architecture is available for React, Angular, Vue.js, and jQuery.

View examples of such systems for the most popular backend frameworks and CMS.

Node.js

Learn how to integrate SurveyJS components with a Node.js server.

Demo Source Code

ASP.NET Core

View a demo example of how SurveyJS works with an ASP.NET Core backend.

Demo Source Code

PHP

Configure client-server interaction of SurveyJS components with a PHP backend.

Demo Source Code

WordPress

Embed SurveyJS Form Library and Survey Creator in your site using a WordPress plugin.

Demo Source Code

Domain Model

Generate forms for domain models and edit them in Survey Creator.

Documentation Source Code

Node.js + PostgreSQL

Save forms and user responses in a PostgreSQL database on a Node.js server.

Demo Source Code

Node.js + MongoDB

Integrate SurveyJS components with a Node.js server that uses a MongoDB database.

Demo Source Code

Python

Configure client-server interaction of SurveyJS components with a Python backend.

Demo Source Code

To learn more about how SurveyJS libraries interact with your backend, see the following help topic: Integrate SurveyJS Libraries with Backend

Frequently Asked Questions

Get Started Licensing

Still Got Questions?

Check our FAQ or Contact Us

Your cookie settings

We use cookies to make your browsing experience more convenient and personal. Some cookies are essential, while others help us analyse traffic. Your personal data and cookies may be used for ad personalization. By clicking “Accept All”, you consent to the use of all cookies as described in our Terms of Use and Privacy Statement. You can manage your preferences in “Cookie settings.”

Accept All
Cookie Settings

Your renewal subscription expires soon.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.

Renew
Later

Your renewal subscription has expired.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.

Renew
Later