Browser Usage

Loading via CDN

The easiest way to use Turndown in the browser is to load it from a CDN:

<script src="https://unpkg.com/turndown/dist/turndown.js"></script>
<script>
  var turndownService = new TurndownService()
  var markdown = turndownService.turndown('<h1>Hello world!</h1>')
  console.log(markdown) // # Hello world!
</script>

The library is exposed as a global TurndownService constructor that you can instantiate and use immediately.

Loading via RequireJS/UMD

For projects using RequireJS or other UMD-compatible module loaders, Turndown provides a browser-specific UMD build:

require(['turndown'], function(TurndownService) {
  var turndownService = new TurndownService()
  var markdown = turndownService.turndown('<p>Convert this HTML</p>')
})

The UMD build is located at lib/turndown.browser.umd.js in the npm package. If you need to generate it manually:

npm run build

The browser UMD build excludes the @mixmark-io/domino dependency, which is only needed for Node.js environments.

Working with DOM Elements

One of Turndown’s most powerful features in the browser is its ability to accept DOM nodes directly as input:

var turndownService = new TurndownService()

// Convert a specific element
var markdown = turndownService.turndown(document.getElementById('content'))

// Convert the entire document
var markdown = turndownService.turndown(document)

// Convert a document fragment
var fragment = document.createDocumentFragment()
// ... add nodes to fragment
var markdown = turndownService.turndown(fragment)

Turndown accepts element nodes (nodeType 1), document nodes (nodeType 9), and document fragment nodes (nodeType 11).

Complete Browser Example

Here’s a complete example of a browser-based HTML to Markdown converter:

<!DOCTYPE html>
<html>
<head>
  <title>HTML to Markdown Converter</title>
  <script src="https://unpkg.com/turndown/dist/turndown.js"></script>
</head>
<body>
  <h1>HTML to Markdown Converter</h1>
  
  <div id="content">
    <h2>Sample Content</h2>
    <p>This is a <strong>paragraph</strong> with <em>formatting</em>.</p>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
    </ul>
  </div>
  
  <button onclick="convert()">Convert to Markdown</button>
  <pre id="output"></pre>
  
  <script>
    var turndownService = new TurndownService({
      headingStyle: 'atx',
      codeBlockStyle: 'fenced'
    })
    
    function convert() {
      var element = document.getElementById('content')
      var markdown = turndownService.turndown(element)
      document.getElementById('output').textContent = markdown
    }
  </script>
</body>
</html>

Browser-Specific Considerations

Package Configuration

The package.json uses the browser field to provide browser-specific builds:

{
  "browser": {
    "@mixmark-io/domino": false,
    "./lib/turndown.cjs.js": "./lib/turndown.browser.cjs.js",
    "./lib/turndown.es.js": "./lib/turndown.browser.es.js",
    "./lib/turndown.umd.js": "./lib/turndown.browser.umd.js"
  }
}

This ensures that when bundlers like webpack or browserify process your code, they automatically use the browser-optimized builds.

Input Validation

Turndown validates that the input can be converted before processing:

If you pass invalid input (not a string or valid DOM node), Turndown will throw a TypeError: input is not a string, or an element/document/fragment node.

Empty Input

When given an empty string, Turndown returns an empty string immediately without processing:

var markdown = turndownService.turndown('')
console.log(markdown) // ''

Get Started

Core Concepts

Guides

Loading via CDN

Loading via RequireJS/UMD

Working with DOM Elements

Complete Browser Example

Browser-Specific Considerations

Package Configuration

Input Validation

Empty Input

Next Steps

Custom Rules

GFM Plugin

​Loading via CDN

​Loading via RequireJS/UMD

​Working with DOM Elements

​Complete Browser Example

​Browser-Specific Considerations

​Package Configuration

​Input Validation

​Empty Input

​Next Steps

Custom Rules

GFM Plugin

Loading via CDN

Loading via RequireJS/UMD

Working with DOM Elements

Complete Browser Example

Browser-Specific Considerations

Package Configuration

Input Validation

Empty Input

Next Steps