Defining surveys in JSON can be error-prone without proper tooling. Visual Studio Code (VS Code) provides IntelliSense, validation, and formatting for JSON files, and with the SurveyJS JSON schema, you can bring these features into your survey development workflow.

This guide shows you how to configure VS Code to recognize SurveyJS JSONs, whether you reference the schema locally or from a CDN, and how to use these validated files directly in your application.

You can access the SurveyJS JSON schema in two ways:

• survey-core npm package
  Once installed, the schema is available at:
  node_modules/survey-core/surveyjs_definition.json.
• CDN
  Use the following URLs to fetch the schema online:
  • Latest version:
    https://unpkg.com/survey-core/surveyjs_definition.json
  • Specific version:
    https://unpkg.com/survey-core@VERSION/surveyjs_definition.json
    Example:
    https://unpkg.com/survey-core@2.3.8/surveyjs_definition.json

Add the schema mapping to your workspace settings (.vscode/settings.json):

{
  "json.schemas": [
    {
      "fileMatch": ["src/surveys/*.json"],
      "url": "./node_modules/survey-core/surveyjs_definition.json"
    }
  ]
}

• fileMatch - Applies the schema to all JSON files inside the src/surveys directory.
• url - Specifies the schema's URL or path to the schema file relative to the workspace root.

With this setup, VS Code will automatically provide property suggestions, autocomplete, and validation when you edit survey JSONs.

Alternatively, you can declare the schema directly in each JSON file using the $schema property. This approach makes the JSON self-contained, so IntelliSense and validation work immediately without additional VS Code settings. It's especially useful if different survey JSON files target different SurveyJS versions.

When referencing a local schema, use a path relative to the JSON file:

{
  "$schema": "../../node_modules/survey-core/surveyjs_definition.json",
  "title": "NPS Survey",
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "rating",
          "name": "nps_question",
          "title": "How likely are you to recommend us?"
        }
      ]
    }
  ]
}

Once your survey JSON files are ready, you can import them into your application and render surveys with SurveyJS components. For example, in React:

// Survey.tsx
import 'survey-core/survey-core.css';
import { Model } from 'survey-core';
import { Survey } from "survey-react-ui";
import npsSurvey from "../surveys/nps.json";

export default function SurveyComponent() {
  const survey = new Model(npsSurvey);

  return <Survey model={survey} />;
}

By connecting the SurveyJS JSON schema with VS Code, you unlock the full power of IntelliSense:

• Autocomplete reduces typing effort and helps discover available properties.
• Validation prevents errors by flagging invalid or misspelled fields.
• Formatting and tooltips improve readability and provide inline documentation.

This setup makes editing survey JSONs faster, more accurate, and less error-prone, so you can focus on designing great surveys rather than debugging JSON.