---
title: Convert Markdown to HTML with Marked
product: Form Library
description: Learn how to enable Markdown support in your SurveyJS surveys and forms using the Marked library. Check out our JavaScript form builder demo to give it a try.
framework: React
source: https://surveyjs.io/form-library/examples/enable-markdown-in-surveys/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Convert Markdown to HTML with Marked (React)

<a href="https://marked.js.org/" target="_blank">Marked</a> is a lightweight and extensible JavaScript library for converting Markdown to HTML. This library allows you to add Markdown support to survey JSON schemas. This example shows how to integrate Marked with SurveyJS Form Library.

To enable Markdown support, 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 Marked converter to get HTML markup. Note that the converter wraps the passed Markdown string into an unnecessary paragraph (`<p>` tag). Remove this tag and assign the result to the `options.html` property.

> The Marked library supports HTML tags in the source. 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.

Markdown provides <a href="https://www.markdownguide.org/cheat-sheet/" target="_blank">rich formatting capabilities</a> that can be extended if required. For example, this demo allows you to specify image sizes next to the image URL in a survey JSON schema. See the code examples for further details.

## 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 { marked } from "marked";

// Support specifying image size next to its URL
const renderer = {
  image: function (src, _, alt) {
    src = src.href || src;
    const sizeStr = ',size=';
    let i = src.indexOf(sizeStr);
    let height = '';
    let width = '';
    if (i > -1) {
      let str = src.substring(i + sizeStr.length);
      src = src.substring(0, i);
      i = str.indexOf('x');
      if (i > -1) {
        height = str.substring(0, i) + 'px';
        width = str.substring(i + 1) + 'px';
      }
    }
    let res = '<img src="' + src + '" alt="' + alt;
    if (height) res += '" height="' + height;
    if (width) res += '" width="' + width;
    return res + '">';
  }
};

marked.use({ renderer });
function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    survey.onTextMarkdown.add((_, options) => {
        // Convert Markdown to HTML
        let str = marked(options.text);
        // ...
        // Sanitize the HTML markup using a third-party library here
        // ...
        // Remove root paragraphs <p></p>
        str = str.substring(3);
        str = str.substring(0, str.length - 5);
        // 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": "radiogroup",
      "name": "favoritePet",
      "title": "What is your favorite pet?",
      "choices": [
        {
          "value": "dog",
          "text": "![Dog](https://surveyjs.io/Content/Images/examples/markdown/dog.svg,size=14x14) Dog"
        },
        {
          "value": "cat",
          "text": "![Cat](https://surveyjs.io/Content/Images/examples/markdown/cat.svg,size=14x14) Cat"
        },
        {
          "value": "parrot",
          "text": "![Parrot](https://surveyjs.io/Content/Images/examples/markdown/parrot.svg,size=14x14) Parrot"
        }
      ]
    }
  ]
};
```

### `src/theme.js`

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

### `package.json`

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

## Other Frameworks

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