Rendering a React component

Generating an image from a React component.

Here we will generate an image from a React Clock component.

<p>Rendered with React</p>
<Clock format="LT" ticking={true} interval={1000} />

Load event

The API waits for the browser to send a load event before taking a screenshot. As long as everything on the page is rendered at that point, it will be included in the image.


Here's the end result.


<link href="" rel="stylesheet">
<script src="[email protected]/babel.min.js"></script>
<!-- babel is required in order to parse JSX -->
<script src="[email protected]/umd/react.development.js"></script>
<!-- import react.js -->
<script src="[email protected]/umd/react-dom.development.js"> </script>
<!-- import react-dom.js -->
<script src=""> </script>
<div id="app"></div>
<!-- Note: type is set to babel -->
<script type="text/babel">
const Clock = ReactLiveClock;
class MyComponent extends React.Component {
render() {
return (
<p>Rendered with React</p>
<Clock format="LT" ticking={true} interval={1000} />
ReactDOM.render(<MyComponent />, document.querySelector("#app"));


body {
font-size: 20px;
margin: 40px;
color: #03B875;
font-family: "Germania One";
h1 {
margin: 5px;
font-size: 72px;
background: -webkit-linear-gradient(#eee, #03B875);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Alternative: renderToString()

An alternative approach to the above example is using React's renderToString to generate the HTML from your component. This can then be passed to the API for rendering.