Solution 1 :

Sounds like you’re looking for ReactDOMServer.renderToStaticMarkup() or ReactDOMServer.renderToString(). Both of the functions can be used in both server and browser environments.

Problem :

I am trying to figure out if I can “render” a React component to an HTML string. It is likely that the word “render” is not correct, as it implies putting it on the actual dom itself, whereas I am saying that I want to create a formatted HTML string from a react component. Example:


renderToString would roughly return…


If it is possible to “render” React down to raw html elements (that are not on the dom) that would be usable as well.

In a React application that I am using, I am wrapping another non-React JavaScript library that manipulates and handles its own rendering. Currently React is being used to build controllers that manipulate the creation of objects for this library.

This library allows callback functions for creating HTML elements (as strings) that it then uses to embed onto a canvas that it manipulates.

I would like to use proper JSX to build the strings.

Any ideas?


Comment posted by renderToString


Comment posted by Mike

@cbr wow, the irony that I made up the exact name of a method that I needed….. This absolutely solves my issue. If you feel like submitting an official answer, I’ll accept it. This is absolutely 100% the answer, and surprisingly impossible to find on google.

Comment posted by cbr

Tell me about it! I opted to post a comment instead of an answer because I wasn’t sure if you knew about the function or not! 🙂