const options = { showLogicTab: true };
var creator = new SurveyCreator.SurveyCreator(options);
creator.toolboxLocation = "right";
ReactDOM.render(
<React.StrictMode>
<SurveyCreator.SurveyCreatorComponent creator={creator} />
</React.StrictMode>,
document.getElementById("creatorElement")
);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Custom Theme using CSS variables, Survey Creator Example</title>
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
<script src="/DevBuilds/survey-core/survey.core.min.js"></script>
<script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
<script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
<link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ace.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<!-- Uncomment to enable Select2
<script src="https://unpkg.com/jquery"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
-->
<script src="/DevBuilds/survey-creator-core/survey-creator-core.min.js"></script>
<link href="/DevBuilds/survey-creator-core/survey-creator-core.min.css" type="text/css" rel="stylesheet" />
<script src="/DevBuilds/survey-creator-core/survey-creator-core.i18n.min.js"></script>
<script src="/DevBuilds/survey-creator-react/survey-creator-react.min.js"></script>
<style>
:root {
--tab-min-height: 600px;
}
</style>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" /><div id="surveyContainer">
<div id="creatorElement" style="height: 100vh;"></div>
</div>
<script type="text/babel" src="./index.js"></script>
</body>
</html>
body #creatorElement {
/* SurveyJS Creator V2 */
--primary-color: #7ff07f;
--secondary-color: #1ab394;
--primary-text-color: #4a4a4a;
--secondary-text-color: #a7a7a7;
--inverted-text-color: #ffffff;
--primary-hover-color: #6fe06f;
--selection-border-color: #1ab394;
--primary-icon-color: #3d4d5d;
--primary-bg-color: #f8f8f8;
--secondary-bg-color: #f4f4f4;
--primary-border-color: #e7eaec;
--secondary-border-color: #ddd;
--error-color: #ed5565;
/* SurveyJS Creator V2 */
--primary: #7ff07f;
--primary-light: rgba(25, 179, 148, 0.1);
--primary-foreground: #fff;
--secondary: #7ff07f;
--secondary-light: rgba(255, 152, 20, 0.1);
--secondary-foreground: #fff;
--background: #f8f8f8;
--background-dim: #f3f3f3;
--background-for-editors: #f9f9f9;
--foreground: #4a4a4a;
--foreground-light: #909090;
--foreground-disabled: rgba(#161616, 0.16);
--border: #d6d6d6;
--border-inside: rgba(0, 0, 0, 0.16);
--red: #e60a3e;
--red-light: rgba(230, 10, 62, 0.1);
--green: #19b394;
--green-light: rgba(25, 179, 148, 0.1);
}
