SurveyJS Form Library and Creator within the same jQuery page

To integrate SurveyJS Creator and Library within the same jQuery app, follow the Knockout integration tutorials:

Here is a demo: creator_library_jQuery.zip

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Survey Creator for Knockout</title>
    <meta charset="utf-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/knockout/build/output/knockout-latest.js"></script>

    <link  href="https://unpkg.com/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet">
    <script src="https://unpkg.com/survey-core/survey.core.min.js"></script>
    <script src="https://unpkg.com/survey-knockout-ui/survey-knockout-ui.min.js"></script>

    <link  href="https://unpkg.com/survey-creator-core/survey-creator-core.min.css" type="text/css" rel="stylesheet">
    <script src="https://unpkg.com/survey-creator-core/survey-creator-core.min.js"></script>
    <script src="https://unpkg.com/survey-creator-knockout/survey-creator-knockout.min.js"></script>

    <script type="text/javascript" src="index.js"></script>
</head>
<body>
    <div class="container">
        <survey params="survey: model"></survey>
        <div id="surveyCreator"></div>
    </div>
</body>
</html>

index.js

const creatorOptions = {
    showLogicTab: true,
    isAutoSave: true
};

const defaultJson = {
    pages: [{
        name: "Name",
        elements: [{
            name: "FirstName",
            title: "Enter your first name:",
            type: "text"
        }, {
            name: "LastName",
            title: "Enter your last name:",
            type: "text"
        }]
    }]
};

const creator = new SurveyCreator.SurveyCreator(creatorOptions);
creator.text = window.localStorage.getItem("survey-json") || JSON.stringify(defaultJson);
creator.saveSurveyFunc = (saveNo, callback) => { 
    window.localStorage.setItem("survey-json", creator.text);
    callback(saveNo, true);
};
// Create a survey
const survey = new Survey.Model(defaultJson);
survey.onComplete.add((sender, options) => {
    console.log(JSON.stringify(sender.data, null, 3));
});

document.addEventListener("DOMContentLoaded", function() {
    ko.applyBindings({
        model: survey
    });
    creator.render("surveyCreator");
});

surveyjs / survey-library

SurveyJS Form Library and Creator within the same jQuery page #8366