SurveyJS v3.0.0

Released: August 11, 2026

SurveyJS v3.0.0 is a major platform update that introduces new capabilities and summarizes the work delivered by the SurveyJS team since the previous major release more than a year ago.

• Unified design token system for CSS-based UI customization across all products
• Theme adapters for popular CSS frameworks (Bootstrap, Material UI, shadcn/ui)
• AI-assisted UI adaptation to align SurveyJS components with your application's visual style
• Dashboard
  • Refreshed UI design
  • Chart.js as the default visualization engine
  • Declarative configuration model
  • State-based setup
  • Date filtering support
• PDF Generator
  • CSS-based styling system
  • Theme support
  • Layout presets
• New UI Preset Editor for Survey Creator customization

Refer to the following page for all information on those and other features released in this update:

What's New in SurveyJS v3.0

To migrate your application to SurveyJS v3.0.0, install the following npm packages or replace old source links with the new links:

npm i survey-core@3.0.0 survey-angular-ui@3.0.0
npm i survey-creator-core@3.0.0 survey-creator-angular@3.0.0
npm i survey-analytics@3.0.0
npm i survey-pdf@3.0.0

npm i survey-core@3.0.0 survey-react-ui@3.0.0
npm i survey-creator-core@3.0.0 survey-creator-react@3.0.0
npm i survey-analytics@3.0.0
npm i survey-pdf@3.0.0

npm i survey-core@3.0.0 survey-vue3-ui@3.0.0
npm i survey-creator-core@3.0.0 survey-creator-vue@3.0.0
npm i survey-analytics@3.0.0
npm i survey-pdf@3.0.0

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

<script src="https://unpkg.com/survey-core@3.0.0/themes/index.min.js"></script>

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

<link href="https://unpkg.com/survey-analytics@3.0.0/survey.analytics.min.css" rel="stylesheet">
<script src="https://unpkg.com/survey-analytics@3.0.0/survey.analytics.min.js"></script>

<link href="https://unpkg.com/survey-analytics@3.0.0/survey.analytics.tabulator.min.css" rel="stylesheet">
<script src="https://unpkg.com/survey-analytics@3.0.0/survey.analytics.tabulator.min.js"></script>

<script src="https://unpkg.com/survey-pdf@3.0.0/survey.pdf.min.js"></script>
<script src="https://unpkg.com/survey-pdf@3.0.0/pdf-form-filler.min.js"></script>

After that, you need to get acquainted with breaking changes made in SurveyJS v3.0.0 and update your code as described.

SurveyJS v3.0 introduced a unified set of UI themes that can be applied across all SurveyJS components. As a result, the dedicated Survey Creator themes listed below were removed in Survey Creator v3.0:

• Light
• Dark
• Contrast
• Survey Creator 2020

This change affects applications that:

• Apply Dark, Contrast, or Survey Creator 2020 theme directly.
• Allow users to switch between Survey Creator themes at runtime (for example, as shown in the Dynamic Appearance Customization demo).

To migrate, replace the removed themes with equivalents from the new shared theme collection:

In addition, if your application supports dynamic theme switching, import the theme collection or reference the theme index file from survey-core/themes instead of survey-creator-core/themes.

The following examples demonstrate the required changes:

// Previously
import { DefaultDark } from "survey-creator-core/themes";

// Now
import { DefaultDark } from "survey-core/themes";

// Previously
import { DefaultContrast } from "survey-creator-core/themes";
// ...
creator.applyCreatorTheme(DefaultContrast);

// Now
import { ContrastLight } from "survey-core/themes";
// ...
creator.applyCreatorTheme(ContrastLight);

// Previously
import { SC2020 } from "survey-creator-core/themes";
// ...
creator.applyCreatorTheme(SC2020);

// Now
import { SoftLight } from "survey-core/themes"; // or any other theme
// ...
creator.applyCreatorTheme(SoftLight);

// Previously
import SurveyCreatorTheme from "survey-creator-core/themes";
import { registerCreatorTheme } from "survey-creator-core";
registerCreatorTheme(SurveyCreatorTheme);

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

<!-- Previously -->
<head>
  <script src="https://unpkg.com/survey-creator-core/themes/default-dark.min.js"></script>
</head>
<body>
  <script>
    creator.applyCreatorTheme(SurveyCreatorTheme.DefaultDark);
  </script>
</body>

<!-- Now -->
<head>
  <script src="https://unpkg.com/survey-core/themes/default-dark.min.js"></script>
</head>
<body>
  <script>
    creator.applyCreatorTheme(SurveyTheme.DefaultDark);
  </script>
</body>

<!-- Previously -->
<head>
  <script src="https://unpkg.com/survey-creator-core/themes/default-contrast.min.js"></script>
</head>
<body>
  <script>
    creator.applyCreatorTheme(SurveyCreatorTheme.DefaultContrast);
  </script>
</body>

<!-- Now -->
<head>
  <script src="https://unpkg.com/survey-core/themes/contrast-light.min.js"></script>
</head>
<body>
  <script>
    creator.applyCreatorTheme(SurveyTheme.ContrastLight);
  </script>
</body>

<!-- Previously -->
<head>
  <script src="https://unpkg.com/survey-creator-core/themes/sc2020.min.js"></script>
</head>
<body>
  <script>
    creator.applyCreatorTheme(SurveyCreatorTheme.SC2020);
  </script>
</body>

<!-- Now -->
<head>
  <script src="https://unpkg.com/survey-core/themes/soft-light.min.js"></script>
</head>
<body>
  <script>
    creator.applyCreatorTheme(SurveyTheme.SoftLight); // or any other theme
  </script>
</body>

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

<!-- Now -->
<head>
  <script src="https://unpkg.com/survey-core/themes/index.min.js"></script>
</head>
<body>
  <script>
    SurveyCreatorCore.registerCreatorTheme(SurveyTheme);
  </script>
</body>

Deprecated API names will continue to work until further notice. However, we urge you to migrate your code to the new names to make sure that future updates won't break it.

In order to streamline the set of UI themes available out of the box, several predefined themes were removed in Form Library v3.0. The table below lists the recommended replacements. Although the replacement themes provide a similar visual appearance, they are not exact equivalents of the removed themes.

If your application uses any of the removed themes, replace the theme identifiers shown in the Find column with the corresponding values from the Replace with column.

SurveyJS v3.0 introduces a unified theming system that allows the same themes to be applied across all SurveyJS components. As part of this change, the previous CSS variable naming scheme has been replaced.

CSS variables prefixed with --sjs- are now deprecated. New themes use variables prefixed with --sjs2- instead. Existing customizations based on --sjs- variables will continue to work because SurveyJS maps them internally to the new variables. However, we recommend updating your code to use the new names to ensure compatibility with future releases.

For details about the new CSS variable system, refer to the following help topic:

Design Tokens — CSS-Based Customization

In Form Library v3.0, the File Upload question prompts users to confirm before removing a previously selected file.

This change improves data safety by preventing accidental file deletion, especially for uploads that are difficult to recover. It also aligns File Upload behavior with other destructive actions that already require confirmation.

If you want to revert to the previous behavior (remove files immediately without confirmation), override the default value of the confirmDelete property:

// In modular applications
import { Serializer } from "survey-core";

Serializer.getProperty("file", "confirmDelete").defaultValue = false;

// In classic script applications
Survey.Serializer.getProperty("file", "confirmDelete").defaultValue = false;

In Form Library v3.0, the expressionQuestionTrackDependencies setting is enabled by default, so Expression questions are recalculated only when needed rather than on every value change.

Expressions are recalculated in the following cases:

• During the initial evaluation
• When all expressions are re-evaluated
• When a dependent value or property changes

This improves performance in surveys that contain many Expression questions by reducing unnecessary recalculations.

If you want to restore the previous behavior (recalculation on every survey value change), set expressionQuestionTrackDependencies to false:

import { settings } from "survey-core";

settings.expressionQuestionTrackDependencies = false;

Expressions that use parameterless functions or functions whose parameters do not reference survey values recalculate on every value change, regardless of the expressionQuestionTrackDependencies setting.

In previous versions, survey element IDs were generated using a global counter shared across all survey instances. This approach could produce different IDs during server-side and client-side rendering, causing hydration mismatches in SSR applications.

Starting with Form Library v3.0, each survey instance maintains its own ID counter, which starts at 0. Element IDs are now generated predictably: the first question receives the ID sq_0, the second sq_1, and so on. As a result, the same survey generates identical element IDs on both the server and the client.

This change affects applications that render multiple surveys on the same page. Because each survey now starts its counter at 0, different surveys generate identical element IDs by default.

To avoid duplicate IDs, assign a unique value to the elementIdPrefix property for each survey instance before rendering it.

import { Model } from "survey-core";

const surveyJson1 = { /* First survey JSON schema */ };
const surveyJson2 = { /* Second survey JSON schema */ };

const survey1 = new Model(surveyJson1);
const survey2 = new Model(surveyJson2);

survey1.elementIdPrefix = "first-survey";
survey2.elementIdPrefix = "second-survey";

// Render the surveys

In previous versions, the form navigation bar rendered the Previous, Next, Preview, and Complete controls as <input type="button"> elements. In Form Library v3.0, these controls are rendered as <button> elements that contain a nested <span> for the button text.

This change affects applications that add custom navigation buttons or style custom buttons using SurveyJS CSS classes.

// Previously
survey.addNavigationItem({
  id: "sv-nav-my-button",
  // ...
  innerCss: "sd-btn nav-button"
});

// Now
survey.addNavigationItem({
  id: "sv-nav-my-button",
  // ...
  innerCss: "nav-button"
});

/* Previously */
.nav-button {
  background-color: #ff9814;
  color: #ffffff;
}

/* Now */
.nav-button {
  background-color: #ff9814;
}
.nav-button span {
  color: #ffffff;
}

<!-- Previously -->
<button class="sd-btn">
  Button text
</button>

<!-- Now -->
<button
  class="sd-action sd-action--brand sd-action--primary sd-action--large sd-action--border">
  <span class="sd-action__title">
    Button text
  </span>
</button>

Deprecated API names will continue to work until further notice. However, we urge you to migrate your code to the new names to make sure that future updates won't break it.

SurveyJS Dashboard now uses Chart.js as its default charting engine. Chart.js is a modern, lightweight, and actively maintained library with a modular architecture and streamlined visual design.

In modular environments, Chart.js is installed automatically as a dependency of the survey-analytics package.

In classic script-based applications, you must replace the Plotly.js script with the Chart.js bundle:

<!-- Previously -->
<script src="https://unpkg.com/plotly.js-dist-min/plotly.min.js"></script>

<!-- Now -->
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>

Plotly.js is still supported in SurveyJS Dashboard as an optional rendering engine. If you prefer to continue using Plotly.js, apply the following configuration changes:

// Previously
import 'survey-analytics/survey.analytics.css';
import { VisualizationPanel } from "survey-analytics";

const dashboard = new VisualizationPanel(
  survey.getAllQuestions(),
  surveyResults,
  dashboardOptions
);

// Now
import 'survey-analytics/survey.analytics.plotly.css';
import { Dashboard } from "survey-analytics/plotly";

const dashboard = new Dashboard({
  questions: survey.getAllQuestions(),
  data: surveyResults,
  ...dashboardOptions
});

<!-- Previously -->
<head>
  <link href="https://unpkg.com/survey-analytics/survey.analytics.min.css" rel="stylesheet">
  <script src="https://unpkg.com/survey-analytics/survey.analytics.min.js"></script>
</head>
<body>
  <div id="dashboard"></div>
  <script>
    const dashboard = new SurveyAnalytics.VisualizationPanel(
      survey.getAllQuestions(),
      surveyResults,
      dashboardOptions
    );
  </script>
</body>

<!-- Now -->
<head>
  <link href="https://unpkg.com/survey-analytics/survey.analytics.plotly.min.css" rel="stylesheet">
  <script src="https://unpkg.com/survey-analytics/survey.analytics.plotly.min.js"></script>
</head>
<body>
  <div id="dashboard"></div>
  <script>
    const dashboard = new SurveyAnalyticsPlotly.Dashboard({
      questions: survey.getAllQuestions(),
      data: surveyResults,
      ...dashboardOptions
    });
  </script>
</body>

For details on retaining Plotly.js support, see:

Integrate SurveyJS Dashboard with Plotly.js

To support a more declarative configuration model and simplify the Dashboard API, the VisualizationPanel class and the IVisualizationPanelOptions interface are now deprecated. Use the Dashboard class and IDashboardOptions interface instead.

Unlike VisualizationPanel, which accepts three separate constructor parameters (questions, data, and options), Dashboard accepts a single configuration object that contains all Dashboard settings, including questions and data.

To migrate, replace VisualizationPanel with Dashboard and pass the configuration as one object:

// Previously
import { VisualizationPanel } from "survey-analytics";

const dashboard = new VisualizationPanel(
  survey.getAllQuestions(),
  surveyResults,
  dashboardOptions
);

// Now
import { Dashboard } from "survey-analytics";

const dashboard = new Dashboard({
  questions: survey.getAllQuestions(),
  data: surveyResults,
  ...dashboardOptions
});

// Previously
const dashboard = new SurveyAnalytics.VisualizationPanel(
  survey.getAllQuestions(),
  surveyResults,
  dashboardOptions
);

// Now
const dashboard = new SurveyAnalytics.Dashboard({
  questions: survey.getAllQuestions(),
  data: surveyResults,
  ...dashboardOptions
});

For a complete list of Dashboard configuration options, refer to the following help topic:

IDashboardOptions API Reference

This release raises the minimum supported version of jsPDF. PDF Generator now requires jsPDF v4.0.0 or later.

In modular applications, the jspdf package version is upgraded automatically when you install a newer version of the survey-pdf package.

In classic script-based applications, update the CDN reference to load the new version:

<!-- Previously -->
<head>
  <script type="text/javascript" src="https://unpkg.com/jspdf@2.4.0/dist/jspdf.umd.min.js"></script>
</head>

<!-- Now -->
<head>
  <script type="text/javascript" src="https://unpkg.com/jspdf@4.0.0/dist/jspdf.umd.min.js"></script>
</head>