---
title: Markdown Support with Marked
product: Survey Creator
description: Learn how to enable Markdown support in your SurveyJS surveys and forms using the Marked library. Check out our demo for JavaScript to give it a try.
framework: Vue 3
source: https://surveyjs.io/survey-creator/examples/markdown-support-with-marked/vue3js
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Markdown Support with Marked (Vue 3)

<a href="https://marked.js.org/" target="_blank">Marked</a> is a JavaScript library used to convert Markdown to HTML. You can integrate this library with Survey Creator to let survey authors format question titles, descriptions, and other textual survey content using <a href="https://www.markdownguide.org/cheat-sheet/" target="_blank">Markdown syntax</a>. This example shows how to enable Markdown support in Survey Creator.

## Access Internal Survey Instances

As Survey Creator is [built upon regular surveys from SurveyJS Form Library](https://surveyjs.io/survey-creator/documentation/property-grid-customization#add-custom-properties-to-the-property-grid), you need to access internal survey instances to process Markdown content. Handle `SurveyCreatorModel`'s [`onSurveyInstanceSetupHandlers`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onSurveyInstanceSetupHandlers) event with a function. The function's `options.survey` parameter exposes one of the internal [`SurveyModel`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model) instances.

## Enable Markdown Support

To enable Markdown support, implement a function that handles `SurveyModel`'s [`onTextMarkdown`](https://surveyjs.io/form-library/documentation/surveymodel#onTextMarkdown) event. The function's `options.text` parameter 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 SurveyJS 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.

## Integrate a Rich Text Editor

If you need advanced formatting capabilities (bullet points, numbered lists, hyperlinks, text alignment), you can integrate a rich content editor into Survey Creator. Refer to the following demo for more information:

[Integrate a Third-Party Rich Content Editor](/survey-creator/examples/form-builder-with-integrated-rich-text-editor/ (linkStyle))

## Files

### `public/index.html`

```html
<div id="app" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;"></div>
```

### `src/survey_json.js`

```js
export const surveyJSON = {
  "title": "*NPS Survey Question*",
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "rating",
          "name": "nps_score",
          "title": "*On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?*",
          "isRequired": true,
          "rateMin": 0,
          "rateMax": 10,
          "minRateDescription": "(Most unlikely)",
          "maxRateDescription": "(Most likely)"
        },
        {
          "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,
          "validators": [
            {
              "type": "answercount",
              "text": "Please select no more than three features.",
              "maxCount": 3
            }
          ],
          "showOtherItem": true,
          "choices": [
            "Performance",
            "Stability",
            "User interface",
            "Complete functionality",
            "Learning materials (documentation, demos, code examples)",
            "Quality support"
          ],
          "otherText": "Other features:",
          "colCount": 2
        },
        {
          "type": "comment",
          "name": "passive_experience",
          "visibleIf": "{nps_score} >= 7  and {nps_score} <= 8",
          "title": "*What can we do to make your experience more satisfying?*"
        },
        {
          "type": "comment",
          "name": "disappointing_experience",
          "visibleIf": "{nps_score} <= 6",
          "title": "*Please let us know why you had such a disappointing experience with our product*"
        }
      ]
    }
  ],
  "completedHtml": "<h3>Thank you for your feedback</h3>",
  "completedHtmlOnCondition": [
    {
      "expression": "{nps_score} >= 9",
      "html": "<h3>Thank you for your feedback</h3> <h4>We are glad that you love our product. Your ideas and suggestions will help us make it even better.</h4>"
    },
    {
      "expression": "{nps_score} >= 6  and {nps_score} <= 8",
      "html": "<h3>Thank you for your feedback</h3> <h4>We are glad that you shared your ideas with us. They will help us make our product better.</h4>"
    }
  ]
};
```

### `src/App.vue`

```html
<template>
    <SurveyCreatorComponent :model="creator" />
</template>
<script setup lang="ts">
    import { SurveyCreatorModel } from "survey-creator-core";
    import { SurveyCreatorComponent } from "survey-creator-vue";
    import { surveyJSON } from "./survey_json";
    import { marked } from "marked";
    import "survey-core/survey.i18n";
    import "survey-creator-core/survey-creator-core.i18n";
    import "survey-core/survey-core.css";
    import "survey-creator-core/survey-creator-core.css";
    import "./index.css";
    import SurveyTheme from "survey-core/themes";
    import { registerCreatorTheme } from "survey-creator-core";

    registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes

    marked.use();
    const creator = new SurveyCreatorModel();
    creator.onSurveyInstanceSetupHandlers.add((_, options) => {
        options.survey.onTextMarkdown.add((_, options) => {
            if (!options.text) return;
            // 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;
        });
    });
    
    creator.JSON = surveyJSON;
</script>
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/main.ts`

```ts
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");
```

### `src/shims-vue.d.ts`

```ts
/* eslint-disable */
declare module "*.vue" {
    import type { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
}
```

### `.eslintrc.js`

```js
module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended",
        "@vue/prettier",
        "@vue/prettier/@typescript-eslint"
    ],
    parserOptions: {
        ecmaVersion: 2020
    },
    rules: {
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
    },
    overrides: [
        {
            files: [
                "**/__tests__/*.{j,t}s?(x)",
                "**/tests/unit/**/*.spec.{j,t}s?(x)"
            ],
            env: {
                jest: true
            }
        }
    ]
};
```

### `babel.config.js`

```js
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"]
};
```

### `package.json`

```json
{
  "name": "surveyjs-library-vue3",
  "version": "0.1.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "tslib": "2.6.1",
    "vue": "^3.4.1",
    "marked": "latest",
    "survey-core": "latest",
    "survey-vue3-ui": "latest",
    "survey-creator-core": "latest",
    "survey-creator-vue": "latest",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3"
  }
}
```

### `tsconfig.json`

```json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/survey-creator/examples/markdown-support-with-marked/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/markdown-support-with-marked/reactjs.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/markdown-support-with-marked/jquery.md)
- [Vanilla JS](https://surveyjs.io/survey-creator/examples/markdown-support-with-marked/vanillajs.md)