Survey Creator

https://github.com/surveyjs/survey-creator
Admin
SurveyJS Creator is an extensible client-side form builder component that allows you to build...
Tokens:80,416
Snippets:878
Trust Score:7.9
Update:5 months ago
Show doc for...
Tokens:
Raw
### Full Code Example for Angular Setup

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/get-started-angular.md

A comprehensive example demonstrating the integration of Survey Creator in an Angular application, including component, module, and template files.

```html
<!-- survey-creator.component.html -->
<div id="surveyCreator">
  <survey-creator [model]="surveyCreatorModel"></survey-creator>
</div>
```

```typescript
// survey-creator.component.ts
import { Component, OnInit } from "@angular/core";
import { SurveyCreatorModel } from "survey-creator-core";

const creatorOptions = {
  autoSaveEnabled: true,
  collapseOnDrag: true
};

@Component({
  selector: 'survey-creator-component',
  templateUrl: './survey-creator.component.html',
  styleUrls: ['./survey-creator.component.css']
})
export class SurveyCreatorComponent implements OnInit {
  surveyCreatorModel: SurveyCreatorModel;
  ngOnInit() {
    const creator = new SurveyCreatorModel(creatorOptions);
    this.surveyCreatorModel = creator;
  }
}
```

```css
/* survey-creator.component.css */
#surveyCreator {
    height: 100vh;
    width: 100vw;
}
```

```typescript
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SurveyCreatorModule } from 'survey-creator-angular';

import { AppComponent } from './app.component';
import { SurveyCreatorComponent } from './survey-creator/survey-creator.component';

@NgModule({
  declarations: [
    AppComponent,
    SurveyCreatorComponent
  ],
  imports: [
    BrowserModule,
    SurveyCreatorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

--------------------------------

### Full Survey Creator Integration Example

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/get-started-vue.md

A complete example demonstrating the setup of Survey Creator, including CSS imports, model creation with options, and rendering the component. Ensure you have purchased a commercial license for Survey Creator.

```html
<!-- components/SurveyCreator.vue -->
<script setup lang="ts">
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";

import type { ICreatorOptions } from "survey-creator-core";
import { SurveyCreatorModel } from "survey-creator-core";
import { SurveyCreatorComponent } from "survey-creator-vue";

const creatorOptions: ICreatorOptions = {
  autoSaveEnabled: true,
  collapseOnDrag: true
};
const creator = new SurveyCreatorModel(creatorOptions);
</script>

<template>
  <SurveyCreatorComponent :model="creator" />
</template>
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-vue/example/README.md

Run this command to install all necessary project dependencies.

```sh
npm install
```

--------------------------------

### Full Survey Creator Component Setup

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/get-started-react.md

This comprehensive example shows the complete setup for a React Survey Creator component, including necessary imports for core and creator CSS, state management for the creator instance, and default configuration options.

```typescript
// components/SurveyCreator.tsx
import { useState } from "react";
import { ICreatorOptions } from "survey-creator-core";
import { SurveyCreator } from "survey-creator-react";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";

const defaultCreatorOptions: ICreatorOptions = {
  autoSaveEnabled: true,
  collapseOnDrag: true
};

export default function SurveyCreatorWidget(props: { json?: Object, options?: ICreatorOptions }) {
  let [creator, setCreator] = useState<SurveyCreator>();

  if (!creator) {
    creator = new SurveyCreator(props.options || defaultCreatorOptions);
    setCreator(creator);
  }

  return "...";
}
```

--------------------------------

### Clone and Install Dependencies

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-core/README.md

Clone the survey-creator repository and install build dependencies. Ensure survey-library is in the same directory.

```bash
git clone https://github.com/surveyjs/survey-creator.git
cd survey-creator/packages/survey-creator-core
npm install
```

--------------------------------

### Full HTML and JavaScript Example for Survey Creator

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/get-started-html-css-javascript.md

This example demonstrates the complete setup for integrating Survey Creator into an HTML page, including linking resources and initializing the creator with options.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Survey Creator / Form Builder</title>
    <meta charset="utf-8">
    <link  href="https://unpkg.com/survey-core/survey-core.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-js-ui/survey-js-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-js/survey-creator-js.min.js"></script>

    <script type="text/javascript" src="index.js"></script>
</head>
<body>

</body>
</html>
```

```javascript
const creatorOptions = {
    autoSaveEnabled: true,
    collapseOnDrag: true
};

const creator = new SurveyCreator.SurveyCreator(creatorOptions);
```

--------------------------------

### Install Survey Creator React npm Package

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/get-started-react.md

Use npm to install the survey-creator-react package. This command also installs survey-creator-core as a dependency.

```cmd
npm install survey-creator-react --save
```

--------------------------------

### Run Development Server

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-vue/example/README.md

Use this command to start the development server with hot-reloading enabled.

```sh
npm run dev
```

--------------------------------

### Full Survey Creator Vue Component Example

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/get-started-vue.md

A complete example of a Survey Creator Vue component, including setup for core CSS, creator options, default JSON, loading from localStorage, and the saveSurveyFunc implementation.

```html
<!-- components/SurveyCreator.vue -->
<script setup lang="ts">
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";

import type { ICreatorOptions } from "survey-creator-core";
import { SurveyCreatorModel } from "survey-creator-core";
import { SurveyCreatorComponent } from "survey-creator-vue";

const creatorOptions: ICreatorOptions = {
  autoSaveEnabled: true,
  collapseOnDrag: 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 SurveyCreatorModel(creatorOptions);
creator.text = window.localStorage.getItem("survey-json") || JSON.stringify(defaultJson);
creator.saveSurveyFunc = (saveNo: number, callback: Function) => { 
  window.localStorage.setItem("survey-json", creator.text);
  callback(saveNo, true);
  // saveSurveyJson(
  //     "https://your-web-service.com/",
  //     creator.JSON,
  //     saveNo,
  //     callback
  // );
};

</script>
```

--------------------------------

### Install Dependencies for Survey Creator React

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-react/README.md

Installs the necessary build dependencies for the Survey Creator / Form Builder React package. Navigate to the package directory before running.

```bash
cd survey-creator/packages/survey-creator-react
npm install
```

--------------------------------

### Full Vue Component Setup for Survey Creator

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/get-started-vue.md

A complete Vue 3 component setup including style imports, creator options configuration, and Survey Creator model instantiation. This provides a foundational structure for integrating the Form Builder.

```html
<script setup lang="ts">
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";

import type { ICreatorOptions } from "survey-creator-core";
import { SurveyCreatorModel } from "survey-creator-core";

const creatorOptions: ICreatorOptions = {
  autoSaveEnabled: true,
  collapseOnDrag: true
};
const creator = new SurveyCreatorModel(creatorOptions);
</script>

<template>
  <!-- ... -->
</template>
```

--------------------------------

### Install Survey Creator JS Dependencies

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-js/README.md

Installs the necessary build dependencies for the Survey Creator / Form Builder package.

```bash
cd survey-creator/packages/survey-creator-js
npm install
```

--------------------------------

### Install survey-creator-angular npm Package

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/get-started-angular.md

Use npm to install the Survey Creator Angular package. The core package is included as a dependency.

```cmd
npm install survey-creator-angular --save
```

--------------------------------

### Install Ace Editor Package

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/get-started-vue.md

Install the `ace-builds` package using npm to add Ace Editor to your project. This is a prerequisite for integrating Ace with Survey Creator.

```sh
npm install ace-builds --save
```

--------------------------------

### Full Survey Creator Component Implementation

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/get-started-react.md

A comprehensive example of the Survey Creator component, including necessary imports for core and creator CSS, and default options.

```typescript
// components/SurveyCreator.tsx
'use client'

import { useState } from "react";
import { ICreatorOptions } from "survey-creator-core";
import { SurveyCreator, SurveyCreatorComponent } from "survey-creator-react";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";

const defaultCreatorOptions: ICreatorOptions = {
  autoSaveEnabled: true,
  collapseOnDrag: true
};

export default function SurveyCreatorWidget(props: { json?: Object, options?: ICreatorOptions }) {
  let [creator, setCreator] = useState<SurveyCreator>();

  if (!creator) {
    creator = new SurveyCreator(props.options || defaultCreatorOptions);
    setCreator(creator);
  }

  return (
    <div style={{ height: "100vh", width: "100%" }}>
      <SurveyCreatorComponent creator={creator} />
    </div>
  );
}
```

--------------------------------

### Install Survey Creator Angular Dependencies

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-angular/README.md

Installs the necessary build dependencies for the Survey Creator Angular package. Ensure you are in the correct directory.

```bash
cd survey-creator/packages/survey-creator-angular
npm install
```

--------------------------------

### Integrate External Translation Service with `onMachineTranslate`

Source: https://context7.com/surveyjs/survey-creator/llms.txt

Wire up an external translation service to the Translation tab's 'Translate' button. This example uses a fetch POST request to an example API endpoint.

```typescript
import { SurveyCreatorModel } from "survey-creator-core";

const creator = new SurveyCreatorModel({ showTranslationTab: true });

creator.onMachineTranslate.add(async (_, options) => {
  try {
    const response = await fetch("https://api.example.com/translate", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        from: options.fromLocale,
        to:   options.toLocale,
        texts: options.strings,
      }),
    });
    const result: string[] = await response.json();
    options.callback(result);
  } catch {
    options.callback([]); // signal failure
  }
});
```

--------------------------------

### Initialize and Render Survey Creator Widget

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-react/test-pages/widget.html

This snippet shows the complete setup for initializing the Survey Creator widget. It includes importing React and ReactDOM, registering themes, creating a SurveyCreator instance with specific configurations, and rendering the SurveyCreatorComponent.

```javascript
import React from "https://esm.sh/react@19/?dev"; import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev"; import ReactDOM from "https://esm.sh/react-dom@19?dev"; window.ReactDOMClient = ReactDOMClient; window.React = React; window.ReactDOM = ReactDOM;

window.addEventListener("DOMContentLoaded", () => {
  SurveyCreatorCore.registerSurveyTheme(SurveyTheme);
  SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTheme.Test);
  const creator = new SurveyCreator.SurveyCreator({
    expandCollapseButtonVisibility: "never",
    showLogicTab: true,
    showTranslationTab: true
  });
  creator.applyCreatorTheme(SurveyCreatorTheme.Test);
  creator.tabResponsivenessMode = "menu";
  creator["animationEnabled"] = false;
  creator.showOneCategoryInPropertyGrid = false;
  creator.allowZoom = false;
  window.creator = creator;

  const root = ReactDOMClient.createRoot(document.getElementById("survey-creator"));
  root.render(React.createElement(React.StrictMode, {
    children: React.createElement(
      SurveyCreator.SurveyCreatorComponent,
      { creator: creator },
      null
    )
  }));
});
```

--------------------------------

### Instantiate Survey Creator with Options

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/get-started-react.md

Pass the configuration object to the SurveyCreator constructor to instantiate the component. This setup is essential for rendering the Survey Creator with custom settings.

```typescript
// components/SurveyCreator.tsx
// ...
import { useState } from "react";
import { SurveyCreator } from "survey-creator-react";

const defaultCreatorOptions: ICreatorOptions = { /* ... */ }

export default function SurveyCreatorWidget(props: { json?: Object, options?: ICreatorOptions }) {
  let [creator, setCreator] = useState<SurveyCreator>();

  if (!creator) {
    creator = new SurveyCreator(props.options || defaultCreatorOptions);
    setCreator(creator);
  }

  return "...";
}
```

--------------------------------

### Add Help Texts for Specific Question Types in JavaScript

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/property-grid-customization.md

Provide tailored help texts for property editors belonging to specific question types. This example demonstrates adding hints for 'file' and 'comment' question types.

```javascript
translations.pehelp.file = {
  title: "A hint for the Title property editor in File Upload questions"
};
translations.pehelp.comment = {
  title: "A hint for the Title property editor in Long Text questions"
};
```

--------------------------------

### Initialize Survey Creator with Custom Options

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-js/test-pages/dropdown-collapse-view.html

Initializes the Survey Creator with specific configuration options such as 'expandCollapseButtonVisibility', 'maxVisibleChoices', 'tabResponsivenessMode', 'animationEnabled', 'showOneCategoryInPropertyGrid', and 'allowZoom'. This setup is useful for controlling the creator's UI and behavior.

```javascript
window.surveyJSFramework = "react"; SurveyCreatorCore.registerSurveyTheme(SurveyTheme); SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTheme.Test); const creator = new SurveyCreator.SurveyCreator({ expandCollapseButtonVisibility: "never", maxVisibleChoices: 5 }); creator.applyCreatorTheme(SurveyCreatorTheme.Test); creator.tabResponsivenessMode = "menu"; creator["animationEnabled"] = false; creator.showOneCategoryInPropertyGrid = false; creator.allowZoom = false; window.creator = creator;
```

--------------------------------

### Accessing Questions in Dynamic Panels

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/end-user-guide-expression-syntax.md

Use prefixes like `panel`, `prevPanel`, `nextPanel`, and `parentPanel` to access questions within the current, previous, next, or parent dynamic panels, respectively. Examples include `{panel.qid}`, `{prevPanel.qid}`, `{nextPanel.qid}`, and `{parentPanel.qid}`.

```html
<code>{panel.qid}</code>
```

```html
<code>{panel.q1}</code>
```

```html
<code>{prevPanel.qid}</code>
```

```html
<code>{prevPanel.q1}</code>
```

```html
<code>{nextPanel.qid}</code>
```

```html
<code>{nextPanel.q1}</code>
```

```html
<code>{parentPanel.qid}</code>
```

```html
<code>{parentPanel.q1}</code>
```

--------------------------------

### Initialize Survey Creator in React

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-react/test-pages/localized_ui.html

This code initializes the Survey Creator with specific configuration options and renders it into a React DOM element. It includes theme registration and localization setup.

```javascript
import React from "https://esm.sh/react@19/?dev"; import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev"; import ReactDOM from "https://esm.sh/react-dom@19?dev"; window.ReactDOMClient = ReactDOMClient; window.React = React; window.ReactDOM = ReactDOM;   

window.addEventListener("DOMContentLoaded", () => { window.surveyJSFramework = "react"; SurveyCreatorCore.registerSurveyTheme(SurveyTheme); SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTheme.Test); const loc = SurveyCreatorCore.localization.getLocale("de"); loc.ed.logic = "Miner Logik"; SurveyCreatorCore.localization.currentLocale = "de"; const creator = new SurveyCreator.SurveyCreator({ expandCollapseButtonVisibility: "never", showLogicTab: true, showTranslationTab: true }); creator.applyCreatorTheme(SurveyCreatorTheme.Test); creator.tabResponsivenessMode = "menu"; creator["animationEnabled"] = false; creator.showOneCategoryInPropertyGrid = false; creator.allowZoom = false; window.creator = creator; const root = ReactDOMClient.createRoot(document.getElementById("survey-creator")); root.render(React.createElement(React.StrictMode, { children: React.createElement( SurveyCreator.SurveyCreatorComponent, { creator: creator }, null ) })) });
```

--------------------------------

### Initialize Survey Creator with Custom Options

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-js/test-pages/creator-themes.html

Initializes the Survey Creator with specific configuration options such as button visibility, tab settings, responsiveness mode, animation, and property grid behavior. This setup is useful for tailoring the creator's interface and functionality.

```javascript
window.surveyJSFramework = "react"; SurveyCreatorCore.registerSurveyTheme(SurveyTheme); SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTheme); const creator = new SurveyCreator.SurveyCreator({ expandCollapseButtonVisibility: "never", showLogicTab: true, showTranslationTab: true }); creator.tabResponsivenessMode = "menu"; creator["animationEnabled"] = false; creator.showOneCategoryInPropertyGrid = true; creator.allowZoom = true; window.creator = creator;
```

--------------------------------

### Initialize Survey Creator with React

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-react/test-pages/presets.html

Initializes the Survey Creator in a React application. Ensure React and ReactDOM are imported and available globally. This setup registers themes and presets before creating the Survey Creator instance.

```javascript
import React from "https://esm.sh/react@19/?dev"; import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev"; import ReactDOM from "https://esm.sh/react-dom@19?dev"; window.ReactDOMClient = ReactDOMClient; window.React = React; window.ReactDOM = ReactDOM;

window.addEventListener("DOMContentLoaded", () => {
  window.surveyJSFramework = "react";
  SurveyCreatorCore.registerSurveyTheme(SurveyTheme);
  SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTheme.Test);
  SurveyCreatorCore.registerUIPreset(SurveyCreatorUIPreset);

  const creator = new SurveyCreator.SurveyCreator({
    expandCollapseButtonVisibility: "never",
    showLogicTab: true,
    showTranslationTab: true,
    showJSONEditorTab: false
  });

  creator.applyCreatorTheme(SurveyCreatorTheme.Test);
  creator.tabResponsivenessMode = "menu";
  window["Survey"].settings.animationEnabled = false;
  creator["animationEnabled"] = false;
  creator.allowZoom = false;
  window.creator = creator;

  new SurveyCreatorUIPresetEditorCore.UIPresetEditor(creator);

  const root = ReactDOMClient.createRoot(document.getElementById("survey-creator"));
  root.render(React.createElement(React.StrictMode, {
    children: React.createElement( SurveyCreator.SurveyCreatorComponent, {
      creator: creator
    }, null )
  }));
})
```

--------------------------------

### Customize Elements on Creation with onQuestionAdded, onPanelAdded, onPageAdded

Source: https://context7.com/surveyjs/survey-creator/llms.txt

Execute custom logic when new elements are added to the design surface using `onQuestionAdded`, `onPanelAdded`, or `onPageAdded`. This example auto-names questions and marks them as required, and titles new pages.

```typescript
import { SurveyCreatorModel } from "survey-creator-core";

const creator = new SurveyCreatorModel({});

let counters: Record<string, number> = {};

creator.onQuestionAdded.add((_, options) => {
  const type = options.question.getType();
  counters[type] = (counters[type] ?? 0) + 1;
  // Auto-name: e.g. "DropdownQuestion1", "TextQuestion3"
  options.question.name = `${type[0].toUpperCase()}${type.slice(1)}Question${counters[type]}`;
  // Auto-mark all new questions as required
  options.question.isRequired = true;
});

creator.onPageAdded.add((_, options) => {
  options.page.title = `Section ${creator.survey.pages.length}`;
});
```

--------------------------------

### Handle Image Uploads with onUploadFile Event

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/get-started-react.md

Implement the `onUploadFile` event handler to upload files to your server. The server should respond with a link to the uploaded file, which is then passed to the `options.callback` method. This example demonstrates sending files via `fetch` and handling the server response.

```typescript
// components/SurveyCreator.tsx
// ...
import { SurveyCreatorModel, UploadFileEvent } from "survey-creator-core";

export default function SurveyCreatorWidget(props: { json?: Object, options?: ICreatorOptions }) {
  // ...
  creator.onUploadFile.add((_: SurveyCreatorModel, options: UploadFileEvent) => {
    const formData = new FormData();
    options.files.forEach((file: File) => {
      formData.append(file.name, file);
    });
    fetch("https://example.com/uploadFiles", {
      method: "post",
      body: formData
    }).then(response => response.json())
      .then(result => {
        options.callback(
          "success",
          // A link to the uploaded file
          "https://example.com/files?name=" + result[options.files[0].name]
        );
      })
      .catch(error => {
        options.callback('error');
      });
  });
  // ...
}
```

--------------------------------

### Initialize Survey Creator with Localization and Theme

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-js/test-pages/localized_ui.html

Sets up the Survey Creator by registering themes, applying localization, and configuring UI options. This code should be run before rendering the creator.

```javascript
window.surveyJSFramework = "react";
SurveyCreatorCore.registerSurveyTheme(SurveyTheme);
SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTheme.Test);
const loc = SurveyCreatorCore.localization.getLocale("de");
loc.ed.logic = "Miner Logik";
SurveyCreatorCore.localization.currentLocale = "de";
const creator = new SurveyCreator.SurveyCreator({
    expandCollapseButtonVisibility: "never",
    showLogicTab: true,
    showTranslationTab: true
});
creator.applyCreatorTheme(SurveyCreatorTheme.Test);
creator.tabResponsivenessMode = "menu";
creator["animationEnabled"] = false;
creator.showOneCategoryInPropertyGrid = false;
window.creator = creator;
creator.allowZoom = false;
```

--------------------------------

### Install Survey Creator Vue Package

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/get-started-vue.md

Install the survey-creator-vue npm package to add the Form Builder component to your Vue 3 application. The core package is installed automatically as a dependency.

```cmd
npm install survey-creator-vue --save
```

--------------------------------

### Initialize SurveyCreatorModel with Options

Source: https://context7.com/surveyjs/survey-creator/llms.txt

Demonstrates how to instantiate SurveyCreatorModel with various configuration options to customize tab visibility, editing behavior, toolbox restrictions, and more. Activate a commercial license key using the `slk` method.

```typescript
import { SurveyCreatorModel } from "survey-creator-core";

const creator = new SurveyCreatorModel({
  // --- Tab visibility ---
  showDesignerTab: true,       // default true
  showPreviewTab: true,        // default true
  showJSONEditorTab: true,     // default true
  showLogicTab: true,          // default true
  showTranslationTab: true,    // default false
  showThemeTab: true,          // default false

  // --- Editing behaviour ---
  pageEditMode: "standard",    // "standard" | "single" | "bypage"
  autoSaveEnabled: true,       // save on every change
  collapseOnDrag: true,        // collapse pages while dragging
  readOnly: false,

  // --- Toolbox restrictions ---
  questionTypes: ["text", "checkbox", "radiogroup", "dropdown", "matrix"],
  defaultAddQuestionType: "text",

  // --- Property Grid ---
  propertyGridNavigationMode: "buttons", // "buttons" | "accordion"

  // --- Limits ---
  maxColumns: 5,
  maxChoices: 20,
  maxRows: 10,
  maxPanelNestingLevel: 2,

  // --- Preview tab ---
  previewDevice: "desktop",
  previewOrientation: "landscape",
  previewAllowSimulateDevices: true,
  previewAllowSelectLanguage: "auto",

  // --- Misc ---
  generateValidJSON: true,
  isRTL: false,
});

// Activate a commercial license key
creator.slk("YOUR-LICENSE-KEY");

console.log(creator.JSON);  // current survey schema as a plain object
console.log(creator.text);  // current survey schema as a JSON string

```

--------------------------------

### Initialize and Render Survey Creator with Theme

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-js/test-pages/theme-for-preview-option.html

Sets up the Survey Creator, registers a theme, and renders it within a shadow DOM. Includes essential CSS links for core functionality.

```javascript
window.surveyJSFramework = "react"; SurveyCreatorCore.registerSurveyTheme(SurveyTheme); SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTheme.Test); const creator = new SurveyCreator.SurveyCreator({ expandCollapseButtonVisibility: "never", themeForPreview: "modern" }); creator.applyCreatorTheme(SurveyCreatorTheme.Test); creator.tabResponsivenessMode = "menu"; creator["animationEnabled"] = false; creator.showOneCategoryInPropertyGrid = false; creator.allowZoom = false; window.creator = creator; const container = document.getElementById("survey-creator"); const shadowRoot = container.attachShadow({ mode: "open" }); const rootElement = document.createElement("div"); rootElement.style.position = "fixed"; rootElement.style.top = "0"; rootElement.style.left = "0"; rootElement.style.right = "0"; rootElement.style.bottom = "0"; const styles = document.createElement("style"); styles.textContent = 
     /*imitation of Tailwind CSS, bootstrap and other CSS frameworks (only for survey-creator-js)*/ 
    
    *, ::after, ::before { box-sizing: border-box; } 
    
    
`; shadowRoot.appendChild(styles); const surveyLink = document.createElement("link"); surveyLink.setAttribute("rel", "stylesheet"); surveyLink.setAttribute("href", "../node_modules/survey-core/survey-core.min.css"); shadowRoot.appendChild(surveyLink); const creatorLink = document.createElement("link"); creatorLink.setAttribute("rel", "stylesheet"); creatorLink.setAttribute("href", "../node_modules/survey-creator-core/survey-creator-core.min.css"); shadowRoot.appendChild(creatorLink); shadowRoot.appendChild(rootElement); SurveyCreator.renderSurveyCreator(creator, rootElement);
```

--------------------------------

### Initialize and Render Survey Creator with React

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-react/test-pages/creator-themes.html

Sets up the Survey Creator with React, registers themes, and renders the creator component. Ensure React and ReactDOM are imported and available globally.

```javascript
import React from "https://esm.sh/react@19/?dev"; import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev"; import ReactDOM from "https://esm.sh/react-dom@19?dev"; window.ReactDOMClient = ReactDOMClient; window.React = React; window.ReactDOM = ReactDOM;   

window.addEventListener("DOMContentLoaded", () => { window.surveyJSFramework = "react"; SurveyCreatorCore.registerSurveyTheme(SurveyTheme); SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTheme); const creator = new SurveyCreator.SurveyCreator({ expandCollapseButtonVisibility: "never", showLogicTab: true, showTranslationTab: true }); creator.applyCreatorTheme(SurveyCreatorTheme.Test); window.creator = creator; creator.tabResponsivenessMode = "menu"; creator["animationEnabled"] = false; creator.showOneCategoryInPropertyGrid = true; creator.allowZoom = true; class SurveyCreatorRenderComponent extends React.Component { constructor(props) { super(props); this.state = { creator: creator }; window.updateCreatorModel = (options, json) => { window.prevCreator = window.creator; const creator = new SurveyCreator.SurveyCreator(options); creator.applyCreatorTheme(SurveyCreatorTheme.Test); creator.JSON = json; this.setState({ creator }); creator.tabResponsivenessMode = "menu"; creator["animationEnabled"] = false; creator.showOneCategoryInPropertyGrid = false; creator.allowZoom = false; window.creator = creator; } } render() { return React.createElement(SurveyCreator.SurveyCreatorComponent, { creator: this.state.creator }); } } const root = ReactDOMClient.createRoot(document.getElementById("survey-creator")); root.render(React.createElement(React.StrictMode, { children: React.createElement( SurveyCreatorRenderComponent ) })) });
```

--------------------------------

### Install @angular/cdk

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/get-started-angular.md

Install the Angular CDK package if it's not already present in your project. This is a dependency for SurveyJS for Angular.

```cmd
npm install @angular/cdk@^12.0.0 --save
```

--------------------------------

### Initialize and Configure Survey Creator

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-js/test-pages/preview-theme-switcher.html

Sets up the Survey Creator with a specified framework, registers themes, and configures various creator properties like tab responsiveness, animation, and zoom.

```javascript
window.surveyJSFramework = "react";
SurveyCreatorCore.registerSurveyTheme(SurveyTheme);
SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTheme.Test);
const creator = new SurveyCreator.SurveyCreator();
creator.applyCreatorTheme(SurveyCreatorTheme.Test);
creator.tabResponsivenessMode = "menu";
creator["animationEnabled"] = false;
creator.showOneCategoryInPropertyGrid = false;
creator.allowZoom = false;
window.creator = creator;
```

--------------------------------

### Initialize Survey Creator with Theme Preview (React)

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-react/test-pages/theme-for-preview-option.html

Sets up the Survey Creator component in a React application. It registers themes, creates a creator instance with specific options like `themeForPreview`, and applies a creator theme. The component is then rendered into the DOM.

```javascript
import React from "https://esm.sh/react@19/?dev"; import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev"; import ReactDOM from "https://esm.sh/react-dom@19?dev"; window.ReactDOMClient = ReactDOMClient; window.React = React; window.ReactDOM = ReactDOM;   

window.addEventListener("DOMContentLoaded", () => { window.surveyJSFramework = "react"; SurveyCreatorCore.registerSurveyTheme(SurveyTheme); SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTheme.Test); const creator = new SurveyCreator.SurveyCreator({ expandCollapseButtonVisibility: "never", themeForPreview: "modern" }); creator.applyCreatorTheme(SurveyCreatorTheme.Test); creator.tabResponsivenessMode = "menu"; creator\["animationEnabled"] = false; creator.showOneCategoryInPropertyGrid = false; creator.allowZoom = false; window.creator = creator; const root = ReactDOMClient.createRoot(document.getElementById("survey-creator")); root.render(React.createElement(React.StrictMode, { children: React.createElement( SurveyCreator.SurveyCreatorComponent, { creator: creator }, null ) })) });
```

--------------------------------

### Initialize and Configure Survey Creator

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-js/test-pages/default.html

Initializes the Survey Creator with specific configuration options and applies a theme. This is the standard way to set up the creator for use.

```javascript
window.surveyJSFramework = "react"; SurveyCreatorCore.registerSurveyTheme(SurveyTheme); SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTheme.Test); const creator = new SurveyCreator.SurveyCreator({ expandCollapseButtonVisibility: "never", showLogicTab: true, showTranslationTab: true }); creator.applyCreatorTheme(SurveyCreatorTheme.Test); creator.tabResponsivenessMode = "menu"; creator["animationEnabled"] = false; creator.showOneCategoryInPropertyGrid = false; creator.allowZoom = false; window.creator = creator;
```

--------------------------------

### Initialize Survey Creator with React

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-react/test-pages/preview-theme-switcher.html

Sets up the Survey Creator for a React environment by importing necessary libraries and registering the framework. This code should be run on DOMContentLoaded.

```javascript
import React from "https://esm.sh/react@19/?dev"; import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev"; import ReactDOM from "https://esm.sh/react-dom@19?dev"; window.ReactDOMClient = ReactDOMClient; window.React = React; window.ReactDOM = ReactDOM;   

window.addEventListener("DOMContentLoaded", () => { window.surveyJSFramework = "react"; SurveyCreatorCore.registerSurveyTheme(SurveyTheme); SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTheme.Test); const creator = new SurveyCreator.SurveyCreator(); creator.applyCreatorTheme(SurveyCreatorTheme.Test); creator.tabResponsivenessMode = "menu"; creator["animationEnabled"] = false; creator.showOneCategoryInPropertyGrid = false; creator.allowZoom = false; window.creator = creator; const root = ReactDOMClient.createRoot(document.getElementById("survey-creator")); root.render(React.createElement(React.StrictMode, { children: React.createElement( SurveyCreator.SurveyCreatorComponent, { creator: creator }, null ) })); });
```

--------------------------------

### Install Dependencies for Survey Creator Vue

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-vue/README.md

Installs the necessary build dependencies for the Survey Creator / Form Builder Vue 3 package. Navigate to the package directory before running.

```bash
cd survey-creator/packages/survey-creator-vue
npm install
```

--------------------------------

### Initialize Survey Creator Instance

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/get-started-html-css-javascript.md

Create a new Survey Creator instance with specified options. This instance is then used to render the Survey Creator UI.

```javascript
const creatorOptions = {
    autoSaveEnabled: true,
    collapseOnDrag: true
};

const creator = new SurveyCreator.SurveyCreator(creatorOptions);
```

--------------------------------

### Initialize Survey Creator with React

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-react/test-pages-V2/localized_ui.html

Sets up the Survey Creator in a React application. Ensure React and ReactDOM are imported and available globally. This code should be run after the DOM is fully loaded.

```javascript
import React from "https://esm.sh/react@19/?dev"; import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev"; import ReactDOM from "https://esm.sh/react-dom@19?dev"; window.ReactDOMClient = ReactDOMClient; window.React = React; window.ReactDOM = ReactDOM;   

window.addEventListener("DOMContentLoaded", () => { window.surveyJSFramework = "react"; SurveyCreatorCore.registerSurveyTheme(SurveyTheme); SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTheme); const loc = SurveyCreatorCore.localization.getLocale("de"); loc.ed.logic = "Miner Logik"; SurveyCreatorCore.localization.currentLocale = "de"; const creator = new SurveyCreator.SurveyCreator({ expandCollapseButtonVisibility: "never", showLogicTab: true, showTranslationTab: true }); creator.applyCreatorTheme(SurveyCreatorTheme.SC2020); creator.tabResponsivenessMode = "menu"; creator["animationEnabled"] = false; creator.showOneCategoryInPropertyGrid = false; creator.allowZoom = false; window.creator = creator; const root = ReactDOMClient.createRoot(document.getElementById("survey-creator")); root.render(React.createElement(React.StrictMode, { children: React.createElement( SurveyCreator.SurveyCreatorComponent, { creator: creator }, null ) })) });
```

--------------------------------

### Initialize Survey Creator with Presets and Themes

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-js/test-pages/presets.html

Initializes the Survey Creator, registers custom themes and UI presets, and configures creator properties. This is typically done on page load.

```javascript
window.addEventListener("DOMContentLoaded", () => { window.surveyJSFramework = "react"; SurveyCreatorCore.registerSurveyTheme(SurveyTheme); SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTheme.Test); SurveyCreatorCore.registerUIPreset(SurveyCreatorUIPreset); const creator = new SurveyCreator.SurveyCreator({ expandCollapseButtonVisibility: "never", showLogicTab: true, showTranslationTab: true, showJSONEditorTab: false }); creator.applyCreatorTheme(SurveyCreatorTheme.Test); creator.tabResponsivenessMode = "menu"; creator["animationEnabled"] = false; window["Survey"].settings.animationEnabled = false; creator.allowZoom = false; window.creator = creator; new SurveyCreatorUIPresetEditorCore.UIPresetEditor(creator); class SurveyCreatorRenderComponent extends SurveyUI.Component { constructor(props) { super(props); this.state = { creator: creator }; window.updateCreatorModel = (options, json) => { window.prevCreator = window.creator; const creator = new SurveyCreator.SurveyCreator(options); creator.applyCreatorTheme(SurveyCreatorTheme.Test); creator.JSON = json; this.setState({ creator }); creator.tabResponsivenessMode = "menu"; creator["animationEnabled"] = false; creator.allowZoom = false; window.creator = creator; new SurveyCreatorUIPresetEditorCore.UIPresetEditor(creator); } } render() { return SurveyUI.createElement(SurveyCreator.SurveyCreatorComponent, { creator: this.state.creator }); } } // SurveyCreator.renderSurveyCreator(creator, document.getElementById("survey-creator")); const survey = SurveyUI.createElement(SurveyCreatorRenderComponent, { creator }); const container = document.getElementById("survey-creator"); const shadowRoot = container.attachShadow({ mode: "open" }); const rootElement = document.createElement("div"); rootElement.style.position = "fixed"; rootElement.style.top = "0"; rootElement.style.left = "0"; rootElement.style.right = "0"; rootElement.style.bottom = "0"; const styles = document.createElement("style"); styles.textContent = ` *, ::after, ::before { box-sizing: border-box; } `; shadowRoot.appendChild(styles); const surveyLink = document.createElement("link"); surveyLink.setAttribute("rel", "stylesheet"); surveyLink.setAttribute("href", "../node_modules/survey-core/survey-core.min.css"); shadowRoot.appendChild(surveyLink); const creatorLink = document.createElement("link"); creatorLink.setAttribute("rel", "stylesheet"); creatorLink.setAttribute("href", "../node_modules/survey-creator-core/survey-creator-core.min.css"); shadowRoot.appendChild(creatorLink); const presetEditorLink = document.createElement("link"); presetEditorLink.setAttribute("rel", "stylesheet"); presetEditorLink.setAttribute("href", "../node_modules/survey-creator-core/ui-preset-editor.css"); shadowRoot.appendChild(presetEditorLink); shadowRoot.appendChild(rootElement); SurveyUI.render(survey, rootElement); }) 
```

--------------------------------

### Survey Creator Component TS (Angular)

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/get-started-angular.md

The TypeScript component for Survey Creator, including initialization and event handling setup.

```typescript
// survey-creator.component.ts
import { Component, OnInit } from "@angular/core";
import { SurveyCreatorModel } from "survey-creator-core";

const creatorOptions = {
  autoSaveEnabled: true,
  collapseOnDrag: 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"
    }]
  }]
};

@Component({
  selector: 'survey-creator-component',
  templateUrl: './survey-creator.component.html',
  styleUrls: ['./survey-creator.component.css']
})
export class SurveyCreatorComponent implements OnInit {
  surveyCreatorModel: SurveyCreatorModel;
  ngOnInit() {
    const creator = new SurveyCreatorModel(creatorOptions);
    creator.text = window.localStorage.getItem("survey-json") || JSON.stringify(defaultJson);

    creator.saveSurveyFunc = (saveNo: number, callback: Function) => { 
      window.localStorage.setItem("survey-json", creator.text);
      callback(saveNo, true);
      // saveSurveyJson(
      //     "https://your-web-service.com/",
      //     creator.JSON,
      //     saveNo,
      //     callback
      // );
    };

    // creator.onUploadFile.add((_, options) => {
    //   const formData = new FormData();
    //   options.files.forEach((file: File) => {
    //     formData.append(file.name, file);
    //   });
    //   fetch("https://example.com/uploadFiles", {
    //     method: "post",
    //     body: formData
    //   }).then(response => response.json())
    //     .then(result => {
    //       options.callback(
    //         "success",
    //         // A link to the uploaded file
    //         "https://example.com/files?name=" + result[options.files[0].name]
    //       );
    //     })
    //     .catch(error => {
    //       options.callback('error');
    //     });
    // });

    this.surveyCreatorModel = creator;
  }
}

// function saveSurveyJson(url: string | URL, json: object, saveNo: number, callback: Function) {
//   fetch(url, {
//     method: 'POST',
//     headers: {
//       'Content-Type': 'application/json;charset=UTF-8'
//     },
//     body: JSON.stringify(json)
//   })
//   .then(response => {
//     if (response.ok) {
//       callback(saveNo, true);
//     } else {
//       callback(saveNo, false);
//     }
//   })
//   .catch(error => {
//     callback(saveNo, false);
//   });
// }
```

--------------------------------

### Apply All Predefined Themes (Modular JS)

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/survey-creator-interface-themes.md

Import all theme objects from 'survey-creator-core/themes' and apply a specific theme using its property.

```javascript
import SurveyCreatorTheme from "survey-creator-core/themes";

const creatorOptions = { /* ... */ };
const creator = new SurveyCreatorModel(creatorOptions);
creator.applyCreatorTheme(SurveyCreatorTheme.SC2020);
// creator.applyCreatorTheme(SurveyCreatorTheme.DefaultDark);
// creator.applyCreatorTheme(SurveyCreatorTheme.DefaultContrast);
```

--------------------------------

### Angular Module Setup for Survey Creator

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/get-started-angular.md

Configure your Angular application's AppModule to include SurveyCreatorModule for survey creation functionality.

```typescript
import {
  NgModule
} from '@angular/core';
import {
  BrowserModule
} from '@angular/platform-browser';
import {
  SurveyCreatorModule
} from 'survey-creator-angular';

import {
  AppComponent
} from './app.component';
import {
  SurveyCreatorComponent
} from './survey-creator/survey-creator.component';

@NgModule({
  declarations: [
    AppComponent,
    SurveyCreatorComponent
  ],
  imports: [
    BrowserModule,
    SurveyCreatorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

--------------------------------

### Import Specific Language Dictionaries (Modular)

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/survey-localization-translate-surveys-to-different-languages.md

Import only the necessary language modules into your component for a more optimized localization setup in modular applications.

```javascript
import "survey-creator-core/i18n/french";
import "survey-creator-core/i18n/german";
import "survey-creator-core/i18n/italian";
```

--------------------------------

### Build Survey Creator Angular Library

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-angular/README.md

Builds the Survey Creator / Form Builder for Angular library after installing dependencies. The output will be in the 'build' directory.

```bash
npm run build
```

--------------------------------

### Initialize Survey Creator with Theme Tab

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-js/test-pages/theme-tab.html

Initializes the Survey Creator with the theme tab enabled and custom configuration options. This code sets up the creator instance and applies a specific creator theme.

```javascript
window.surveyJSFramework = "react";
SurveyCreatorCore.registerSurveyTheme(SurveyTheme);
SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTheme.Test);
const creator = new SurveyCreator.SurveyCreator({
    expandCollapseButtonVisibility: "never",
    showThemeTab: true
});
creator.applyCreatorTheme(SurveyCreatorCreatorTheme.Test);
creator.tabResponsivenessMode = "menu";
creator["animationEnabled"] = false;
creator.showOneCategoryInPropertyGrid = false;
creator.allowZoom = false;
window.creator = creator;
```

--------------------------------

### Remote Save Survey JSON Function

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/get-started-html-css-javascript.md

A commented-out example function demonstrating how to save survey JSON to a remote web service using the fetch API.

```javascript
// function saveSurveyJson(url, json, saveNo, callback) {
//   fetch(url, {
//     method: 'POST',
//     headers: {
//       'Content-Type': 'application/json;charset=UTF-8'
//     },
//     body: JSON.stringify(json)
//   })
//   .then(response => {
//     if (response.ok) {
//       callback(saveNo, true);
//     } else {
//       callback(saveNo, false);
//     }
//   })
//   .catch(error => {
//     callback(saveNo, false);
//   });
// }
```

--------------------------------

### Initialize Survey Creator in React

Source: https://github.com/surveyjs/survey-creator/blob/master/packages/survey-creator-react/test-pages/dropdown-collapse-view.html

Sets up the Survey Creator for React, registering themes and configuring creator properties like button visibility, choice limits, and responsiveness. Renders the creator component within a strict mode wrapper.

```javascript
import React from "https://esm.sh/react@19/?dev"; import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev"; import ReactDOM from "https://esm.sh/react-dom@19?dev"; window.ReactDOMClient = ReactDOMClient; window.React = React; window.ReactDOM = ReactDOM;   

window.addEventListener("DOMContentLoaded", () => { window.surveyJSFramework = "react"; SurveyCreatorCore.registerSurveyTheme(SurveyTheme); SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTheme.Test); const creator = new SurveyCreator.SurveyCreator({ expandCollapseButtonVisibility: "never", maxVisibleChoices: 5 }); creator.applyCreatorTheme(SurveyCreatorTheme.Test); creator.tabResponsivenessMode = "menu"; creator["animationEnabled"] = false; creator.showOneCategoryInPropertyGrid = false; creator.allowZoom = false; window.creator = creator; const root = ReactDOMClient.createRoot(document.getElementById("survey-creator")); root.render(React.createElement(React.StrictMode, { children: React.createElement( SurveyCreator.SurveyCreatorComponent, { creator: creator }, null ) })) });
```

--------------------------------

### Accessing Dynamic Matrix Cells

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/end-user-guide-expression-syntax.md

Use `dmatrixid[rowindex].columnid` to access individual cells in a Dynamic Matrix. An example is provided with `dmatrix1[0].column1`.

```html
<code>{dmatrixid[rowindex].columnid}</code>
```

```html
<code>{dmatrix1[0].column1}</code>
```

--------------------------------

### Attach onProcessHtml Event Handler for Preview Tab

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/customize-survey-creation-process.md

Use the `onSurveyInstanceSetupHandlers` event to attach handlers for survey events. This example specifically attaches an `onProcessHtml` handler for the `preview-tab` area to process HTML content when the reason is `html-question`. Ensure you implement your sanitizing logic within the handler.

```javascript
creator.onSurveyInstanceSetupHandlers.add((_, options) => {
  if (options.area === "preview-tab") {
    options.survey.onProcessHtml.add((_, options) => {
      if (options.reason === "html-question") {
        // ...
        // Encode `options.html` here with your favorite sanitizing tool
        // ...
      }
    });
  }
});
```

--------------------------------

### Register All Predefined Themes (Classic Script)

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/survey-creator-interface-themes.md

Include the themes script and register all predefined themes in classic script applications. This makes all themes available for customization.

```html
<!-- In classic script applications -->
<head>
    <!-- ... -->
    <script src="https://unpkg.com/survey-creator-core/themes/index.min.js"></script>
    <!-- ... -->
</head>
<body>
    <script>
        SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTheme);
    </script>
</body>
```

--------------------------------

### Accessing Matrix Row Index

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/end-user-guide-expression-syntax.md

Use 'rowIndex' to get the 1-based index of the current row within all rows, and 'visibleRowIndex' for the index within visible rows.

```javascript
{rowIndex}
```

```javascript
{visibleRowIndex}
```

--------------------------------

### Reorder Toolbox Categories

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/toolbox-customization.md

Access and modify the `categories` array of the Toolbox to reorder categories. This example swaps the positions of the 'Text Input Questions' and 'Choice Questions' categories.

```javascript
import { SurveyCreatorModel } from "survey-creator-core";

function swapItems(arr, index1, index2) {
  const item1 = arr[index1];
  arr[index1] = arr[index2];
  arr[index2] = item1;
}

const creator = new SurveyCreatorModel();

const categories = creator.toolbox.categories;
const choiceCatIndex = categories.findIndex(c => c.name === "choice");
const textCatIndex = categories.findIndex(c => c.name === "text");
swapItems(categories, choiceCatIndex, textCatIndex);
```

--------------------------------

### Dynamic Panel Validation Rule

Source: https://github.com/surveyjs/survey-creator/blob/master/docs/end-user-guide-expression-syntax.md

This expression is used in the 'Valid when' editor for data validation within a Dynamic Panel. It checks if the start date is less than the end date.

```javascript
{panel.start-date} < {panel.end-date}
```
Tokens:
Raw