Repolode
Submit
remarkablemark

remarkablemark/html-react-parser

HTML-to-React parser that converts HTML strings into React elements on both Node.js and the browser.

View on GitHubWebsite
Stars
2,431
Forks
144
Open issues
12
Last commit
22 hours ago

What is it?

html-react-parser turns an HTML string into one or more React elements, so markup from a CMS, a database, or an API can be rendered inside a React component without using dangerouslySetInnerHTML. It works on both the server (Node.js) and the client (browser), and can also be loaded from a CDN as a UMD bundle.

The parse function accepts an optional options object. The replace option lets you swap specific DOM nodes for your own React elements, with helpers like domToReact and attributesToProps for handling children and attributes. The transform option lets you modify each parsed element, and the library option allows Preact or a custom UI library in place of React. Other options include trim for whitespace handling, htmlparser2 settings for server-side parsing, and trustedTypePolicy for browser Trusted Types.

The library does not sanitize HTML, so it is not XSS safe by itself; input should be sanitized or protected with a Content Security Policy and Trusted Types when it comes from untrusted sources.

Key features

  • 01Converts HTML strings into React elements that can be rendered directly in components.
  • 02Works on both Node.js for server-side rendering and in the browser.
  • 03The replace option swaps matched DOM nodes for custom React elements.
  • 04The transform option modifies each parsed element after conversion.
  • 05Supports Preact or a custom UI library through the library option.
  • 06Includes a trim option and htmlparser2 settings for controlling whitespace and parsing behavior.

Use cases

  • Rendering HTML content from a CMS or Markdown pipeline inside a React app.
  • Replacing embedded tags such as links or images with React components during rendering.
  • Server-side rendering of HTML fragments in a Node.js React application.

Quick start

  1. 1

    Install via npm

    npm install html-react-parser --save
  2. 2

    Import and parse an HTML string

Things to know

  • Not XSS safe; the README says it does not sanitize HTML.
  • Does not sanitize invalid HTML.
  • htmlparser2 options only work on the server (Node.js), not in the browser.

Topics

#react#html#parser#javascript#typescript#jsx#dom#html-react-parser#library#npm

FAQ

What is html-react-parser?
HTML-to-React parser that converts HTML strings into React elements on both Node.js and the browser. html-react-parser turns an HTML string into one or more React elements, so markup from a CMS, a database, or an API can be rendered inside a React component without using dangerouslySetInnerHTML. It works on both the server (Node.js) and the client (browser), and can also be loaded from a CDN as a UMD bundle.
Is html-react-parser free to use? What license does it have?
html-react-parser is open source under the MIT license. Check the license terms before using it in commercial products.
Is html-react-parser still maintained?
Actively maintained. The last commit to html-react-parser was on Nov 6, 2026.
What can I use html-react-parser for?
Rendering HTML content from a CMS or Markdown pipeline inside a React app. Replacing embedded tags such as links or images with React components during rendering. Server-side rendering of HTML fragments in a Node.js React application.
How do I install html-react-parser?
Install via npm: npm install html-react-parser --save Import and parse an HTML string
Where can I get html-react-parser?
The source code and installation instructions are on GitHub: https://github.com/remarkablemark/html-react-parser

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects