---
title: Convert Markdown to HTML with markdown-it
product: Form Library
description: Highlight the contents of your survey - title, questions, answer choices, etc. - with markdown syntax to capture respondents' attention. Free example of a matrix table question with markdown formatting for JavaScript.
framework: React
source: https://surveyjs.io/form-library/examples/edit-survey-questions-markdown/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Convert Markdown to HTML with markdown-it (React)

Markdown is a markup language designed to format plain text and maintain human readability. For publishing, Markdown content is usually converted to a more advanced language, such as HTML. SurveyJS supports Markdown via third-party Markdown-to-HTML JavaScript converters. This demo shows SurveyJS integration with the <a href="https://github.com/markdown-it/markdown-it/tree/master#markdown-it-" target="_blank">`markdown-it`</a> converter.

To enable Markdown support in your survey, implement a function that handles the [`onTextMarkdown`](https://surveyjs.io/form-library/documentation/surveymodel#onTextMarkdown) event. The function's second parameter, `options`, has the `text` property that contains a string value with Markdown content. Pass this value to the `markdown-it` converter to get HTML markup. Assign the result to the `options.html` property.

> `markdown-it` can support HTML tags in the source if you enable the `html` property when instantiating the converter. However, this feature is considered unsafe because the converter allows any HTML markup to pass through, even if it contains malicious code. To ensure that the resulting HTML markup is safe, it must be processed through a sanitizer. This demo does not use any third-party sanitizer, as the SurveyJS Form Library includes basic sanitizing capabilities. However, these capabilities do not guarantee 100% protection against malicious code injections. We highly recommend using a dedicated sanitizing library in production code.

Now you can add formatting to your string values. Refer to the [Markdown Cheat Sheet](https://www.markdownguide.org/cheat-sheet/) to get acquainted with Markdown syntax. This demo shows a Matrix question. Markdown is used to render statements in the rows in italic. You can combine Markdown syntax with raw HTML in string values. In this demo, `<br>` tags are used to insert line breaks into column header texts.

## 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";
import markdownit from "markdown-it";

function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    // Instantiate `markdown-it`
    const converter = markdownit({
        html: true // Support HTML tags in the source (unsafe, see documentation)
    });
    survey.onTextMarkdown.add((_, options) => {
        // Convert Markdown to HTML
        let str = converter.renderInline(options.text);
        // ...
        // Sanitize the HTML markup using a third-party library here
        // ...
        // Set HTML markup to render
        options.html = str;
    });
    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 = {
  "elements": [
    {
      "type": "matrix",
      "name": "vacation-factors",
      "title": "Please indicate the importance of the following factors in choosing a vacation destination.",
      "columns": [
        {
          "value": 1,
          "text": "Not<br>important<br>1"
        },
        {
          "value": 2,
          "text": "<br><br>2"
        },
        {
          "value": 3,
          "text": "<br><br>3"
        },
        {
          "value": 4,
          "text": "<br><br>4"
        },
        {
          "value": 5,
          "text": "Very<br>important<br>5"
        }
      ],
      "rows": [
        {
          "value": "culture",
          "text": "*Cultural activities*"
        },
        {
          "value": "cuisine",
          "text": "*Local cuisine*"
        },
        {
          "value": "outdoor",
          "text": "*Outdoor activities*"
        },
        {
          "value": "safety",
          "text": "*Safety*"
        },
        {
          "value": "accessibility",
          "text": "*Accessibility*"
        },
        {
          "value": "beaches",
          "text": "*Beach water quality*"
        },
        {
          "value": "weather",
          "text": "*Weather*"
        }
      ]
    }
  ]
};
```

### `src/theme.js`

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

### `package.json`

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

## Other Frameworks

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