---
title: Embed Ace Editor into Survey Creator
product: Survey Creator
description: Integrate the Ace code editor into SurveyJS Survey Creator to enhance the JSON Editor tab with advanced editing features like syntax highlighting, search, replace, code folding, and more. View detailed installation and setup instructions for both modular applications and classic script-based web pages.
framework: React
source: https://surveyjs.io/survey-creator/examples/ace-editor-integration/reactjs
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Embed Ace Editor into Survey Creator (React)

<a href="https://ace.c9.io/" target="_blank">Ace</a> is a lightweight, extensible code editor that supports search, syntax highlighting, code folding, UI theming, and more. These features are provided through extensions, so you can easily add missing functionality when needed. Survey Creator allows you to use Ace for editing the survey JSON schema in the JSON Editor tab.

Depending on your setup, you can either install Ace as an npm package or include it from a CDN.

In **modular applications**, install the <a href="https://www.npmjs.com/package/ace-builds" target="_blank">`ace-builds`</a> npm package and import Ace along with any required extensions in the component that renders Survey Creator. For instance, the following code imports the extensions that enable the Find/Replace dialog in Ace and add support for the dark theme:

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

```js
// A component that renders Survey Creator
// ...
import "ace-builds/src-noconflict/ace";
import "ace-builds/src-noconflict/ext-searchbox";
import "ace-builds/src-noconflict/theme-clouds_midnight";
// ...
```

In **classic script applications**, add Ace and its extensions directly to your HTML page. The following code includes the same extensions and theme:

```html
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ace.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ext-searchbox.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/theme-clouds_midnight.js"></script>
```

To enable code highlighting, set the path to the directory containing the `ace.js` script using the `AceJsonEditorModel.aceBasePath` property. If you host `ace.js` on your server, specify your server path. If you use a CDN or installed Ace via npm, you can use the following path:

```js
// Modular applications
import { AceJsonEditorModel } from "survey-creator-core";
AceJsonEditorModel.aceBasePath = "https://unpkg.com/ace-builds/src-min-noconflict/";

// Classic script applications
SurveyCreatorCore.AceJsonEditorModel.aceBasePath = "https://unpkg.com/ace-builds/src-min-noconflict/";
```

## Files

### `public/index.html`

```html
<!-- Uncomment the following lines to enable Ace Editor in the JSON Editor tab -->
<!-- 
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ace.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ext-searchbox.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/theme-clouds_midnight.js"></script>
-->

<div id="surveyCreatorContainer" style="position: absolute; height: 100%; width: 100%"></div>
```

### `src/survey_json.js`

```js
export const surveyJSON = {
  "title": "NPS Survey Question",
  "logo": "https://surveyjs.io/Content/Images/examples/logo.png",        
  "logoHeight": "60px",
  "headerView": "advanced",
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "rating",
          "name": "nps_score",
          "title": "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
          "isRequired": true,
          "rateMin": 0,
          "rateMax": 10,
          "minRateDescription": "(Most unlikely)",
          "maxRateDescription": "(Most likely)"
        },
        {
          "type": "checkbox",
          "name": "promoter_features",
          "visibleIf": "{nps_score} >= 9",
          "title": "Which of the following features do you value the most?",
          "description": "Please select no more than three features.",
          "isRequired": true,
          "validators": [
            {
              "type": "answercount",
              "text": "Please select no more than three features.",
              "maxCount": 3
            }
          ],
          "showOtherItem": true,
          "choices": [
            "Performance",
            "Stability",
            "User interface",
            "Complete functionality",
            "Learning materials (documentation, demos, code examples)",
            "Quality support"
          ],
          "otherText": "Other features:",
          "colCount": 2
        },
        {
          "type": "comment",
          "name": "passive_experience",
          "visibleIf": "{nps_score} >= 7  and {nps_score} <= 8",
          "title": "What can we do to make your experience more satisfying?"
        },
        {
          "type": "comment",
          "name": "disappointing_experience",
          "visibleIf": "{nps_score} <= 6",
          "title": "Please let us know why you had such a disappointing experience with our product"
        }
      ]
    }
  ],
  "completedHtml": "<h3>Thank you for your feedback</h3>",
  "completedHtmlOnCondition": [
    {
      "expression": "{nps_score} >= 9",
      "html": "<h3>Thank you for your feedback</h3> <h4>We are glad that you love our product. Your ideas and suggestions will help us make it even better.</h4>"
    },
    {
      "expression": "{nps_score} >= 6  and {nps_score} <= 8",
      "html": "<h3>Thank you for your feedback</h3> <h4>We are glad that you shared your ideas with us. They will help us make our product better.</h4>"
    }
  ]
};
```

### `src/SurveyCreatorComponent.jsx`

```js
import React from "react";
import { SurveyCreator, SurveyCreatorComponent } from "survey-creator-react";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import { surveyJSON } from "./survey_json";
import "ace-builds/src-noconflict/ace";
import "ace-builds/src-noconflict/ext-searchbox";
import "ace-builds/src-noconflict/theme-clouds_midnight";
import { AceJsonEditorModel } from "survey-creator-core";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";
import "./index.css";

import SurveyTheme from "survey-core/themes";
import { registerCreatorTheme } from "survey-creator-core";

registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes

AceJsonEditorModel.aceBasePath = "https://unpkg.com/ace-builds/src-min-noconflict/";

function SurveyCreatorRenderComponent() {
    const creator = new SurveyCreator();
    creator.JSON = surveyJSON;
    creator.switchTab("json");
    return (<SurveyCreatorComponent creator={creator} />);
}

export default SurveyCreatorRenderComponent;
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyCreatorRenderComponent from "./SurveyCreatorComponent";

const root = createRoot(document.getElementById("surveyCreatorContainer"));
root.render(<SurveyCreatorRenderComponent />);
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "ace-builds": "^1.43.2",
    "survey-core": "latest",
    "survey-react-ui": "latest",
    "survey-creator-core": "latest",
    "survey-creator-react": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/survey-creator/examples/ace-editor-integration/angular.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/ace-editor-integration/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/ace-editor-integration/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/ace-editor-integration/vanillajs.md)