Build JSON Forms and Surveys
in React

import "survey-core/survey-core.min.css";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";

const surveyJson = {
  // ...
};

export function SurveyComponent() {
    const survey = new Model(surveyJson);
    survey.onComplete.add((sender, options) => {
        // Store data in your data storage
        console.log(
            JSON.stringify(sender.data, null, 3));
    });
    return <Survey model={survey} />;
}

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);
});

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);
  });
}