---
title: Survey Preview
product: Form Library
description: You can show users a summary of their responses before they submit the survey. Learn how to add the preview page to the end of your survey and customize its content, including the caption of the Preview button and the types of questions (all or answered only) to display. View this free demo for JavaScript to learn more.
framework: React
source: https://surveyjs.io/form-library/examples/survey-preview/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Survey Preview (React)

Before submitting results, respondents can view and edit their answers on the preview page. This page displays all visible survey pages as panels. Each panel has an Edit button that sends users back to the corresponding page. This example shows how to enable the survey preview and customize its content.

To add the preview page to a survey, enable the [`showPreviewBeforeComplete`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showPreviewBeforeComplete) property. By default, the preview page displays all visible questions. If it should display only answered questions, change the [`previewMode`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#previewMode) property value to `"answeredQuestions"`. In this demo, you can change the values of both properties in Settings.

When the preview page is added, the last page in the survey displays the Preview button instead of the Complete button. Set the [`previewText`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#previewText) property to a custom string value if you want to change the Preview button caption.

You can also call the following methods to control preview page visibility in code:

- [`showPreview()`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showPreview)       
Shows the preview page. Fails and returns `false` if the current page has validation errors.

- [`cancelPreview()`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#cancelPreview)     
Hides the preview page and switches the survey back to edit mode.

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `src/SurveyComponent.jsx`

```js
import React from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";

function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    return (<Survey model={survey} />);
}

export default SurveyComponent;
```

### `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 SurveyComponent from "./SurveyComponent";

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

### `src/json.js`

```js
export const json = {
  "showPreviewBeforeComplete": true,
  "previewMode": "answeredQuestions",
  "elements": [
    {
      "type": "panel",
      "name": "nps-panel",
      "elements": [
        {
          "type": "rating",
          "name": "nps-score",
          "title": "On a scale from 0 to 10, how likely are you to recommend us to a friend or colleague?",
          "rateMin": 0,
          "rateMax": 10,
          "minRateDescription": "Very unlikely",
          "maxRateDescription": "Very likely"
        },
        {
          "type": "comment",
          "name": "disappointing-experience",
          "visibleIf": "{nps-score} <= 5",
          "title": "How did we disappoint you and what can we do to make things right?",
          "maxLength": 300
        },
        {
          "type": "comment",
          "name": "improvements-required",
          "visibleIf": "{nps-score} >= 6",
          "title": "What can we do to make your experience more satisfying?",
          "maxLength": 300
        },
        {
          "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,
          "choices": [
            { "value": "performance", "text": "Performance" },
            { "value": "stability", "text": "Stability" },
            { "value": "ui", "text": "User interface" },
            { "value": "complete-functionality", "text": "Complete functionality" },
            { "value": "learning-materials", "text": "Learning materials (documentation, demos, code examples)" },
            { "value": "support", "text": "Quality support" }
          ],
          "showOtherItem": true,
          "otherPlaceholder": "Please specify...",
          "otherText": "Other features",
          "colCount": 2,
          "maxSelectedChoices": 3
        }
      ]
    },
    {
      "type": "boolean",
      "name": "rebuy",
      "title": "Would you buy our product again?"
    },
    {
      "type": "panel",
      "name": "testimonial-request",
      "elements": [
        {
          "type": "radiogroup",
          "name": "testimonial",
          "title": "Would you mind providing us a brief testimonial for the website?",
          "choices": [
            { "value": "yes", "text": "Sure!" },
            { "value": "no", "text": "No" }
          ]
        },
        {
          "type": "text",
          "name": "email",
          "visibleIf": "{testimonial} = 'yes'",
          "title": "What is your email address?",
          "validators": [
            { "type": "email" }
          ],
          "placeholder": "Enter your email here"
        }
      ]
    }
  ],
  "questionsOnPageMode": "questionPerPage"
};
```

### `src/theme.js`

```js
export const themeJson = {};
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "survey-core": "latest",
    "survey-react-ui": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/survey-preview/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/survey-preview/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/survey-preview/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/survey-preview/vanillajs.md)