How to Convert a React Component to HTML

Recently, I was working on a React project where I needed to convert a React component into plain HTML. At first, it seemed easy, after all, React renders HTML in the browser, right? But when I needed the static HTML output for an email template and server-side rendering, I realized there’s no one-click way to do it.

Over the years, I’ve used different methods to achieve this, from using ReactDOMServer for server-side rendering to browser-based DOM extraction and even third-party packages. In this post, I’ll walk you through how I do it, step by step, with full working examples so you can do the same.

Table of Contents

Convert React Components to HTML

There are a few practical reasons why you might want to convert a React component to HTML:

Email templates: Many email clients only accept raw HTML.
Static website generation: You may want to pre-render pages for SEO or performance.
Exporting components: Sometimes, you need to export a React UI as HTML for documentation or embedding.
Server-side rendering (SSR): You might want to render HTML before sending it to the client.

Method 1 – Use ReactDOMServer in Node.js

This is the most reliable and professional way to convert a React component into an HTML string. I use this method whenever I’m working on server-side rendering or generating static HTML files for a React app.

Steps:

Create a simple React component.
Use ReactDOMServer.renderToString() or renderToStaticMarkup() to convert it to HTML.
Save or log the HTML output.

Here’s a complete example:

// File: convertToHTML.js
import React from "react";
import ReactDOMServer from "react-dom/server";

// Step 1: Create a simple React component
function ProductCard({ name, price, description }) {
  return (
    <div className="product-card">
      <h2>{name}</h2>
      <p>{description}</p>
      <strong>Price: ${price}</strong>
    </div>
  );
}

// Step 2: Render the component to HTML
const htmlOutput = ReactDOMServer.renderToStaticMarkup(
  <ProductCard
    name="Apple MacBook Air M3"
    price="1199"
    description="A powerful yet lightweight laptop loved by professionals across the USA."
  />
);

// Step 3: Display or save the HTML
console.log(htmlOutput);

Output:

<div class="product-card">
  <h2>Apple MacBook Air M3</h2>
  <p>A powerful yet lightweight laptop loved by professionals across the USA.</p>
  <strong>Price: $1199</strong>
</div>

You can see the output in the screenshot below.

You can now write this HTML to a file or send it as part of an API response.

Method 2 – Extract HTML from the Browser DOM

If you’re running your React app in the browser and want to get the rendered HTML directly from the DOM, you can do this easily using JavaScript.

Here’s how I do it:

Render your component normally in the browser.
Use document.getElementById() to select the root element.
Get the inner HTML using .innerHTML.

import React from "react";
import ReactDOM from "react-dom/client";

function CityCard({ city, population }) {
  return (
    <div className="city-card">
      <h3>{city}</h3>
      <p>Population: {population.toLocaleString()}</p>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<CityCard city="New York" population={8419600} />);

// Extract the HTML after rendering
setTimeout(() => {
  const html = document.getElementById("root").innerHTML;
  console.log("Extracted HTML:", html);
}, 1000);

You can see the output in the screenshot below.

How to Convert a React Component to HTML

This approach is perfect for browser-based conversions or when you want to export a rendered component’s HTML for preview or download.

Method 3 – Use a Third-Party Package (react-to-html-element)

If you prefer a ready-made solution, you can use the react-to-html-element package from npm. It wraps your React component into a reusable HTML element (custom element or web component).

Installation:

npm install react-to-html-element

Example:

import React from "react";
import reactToHTML from "react-to-html-element";

// Step 1: Create your React component
function UserProfile({ name, email }) {
  return (
    <div className="user-profile">
      <h2>{name}</h2>
      <p>Email: {email}</p>
    </div>
  );
}

// Step 2: Convert to an HTML element
const UserProfileElement = reactToHTML(UserProfile);

// Step 3: Register it as a custom element
customElements.define("user-profile", UserProfileElement);

// Step 4: Use it in plain HTML
document.body.innerHTML = `
  <user-profile name="John Doe" email="john.doe@example.com"></user-profile>
`;

You can see the output in the screenshot below.

This approach is great when you want to reuse React components as web components, for example, embedding them into a CMS or non-React website.

Method 4 – Export React Components to Static HTML Files

Sometimes, I need to export multiple React components into static .html files for documentation or marketing pages.
Here’s how I automate it using Node.js and the fs module.

import fs from "fs";
import React from "react";
import ReactDOMServer from "react-dom/server";

function PromoBanner() {
  return (
    <section className="promo-banner">
      <h1>Black Friday Sale</h1>
      <p>Get up to 50% off on all electronics across the USA!</p>
    </section>
  );
}

const html = ReactDOMServer.renderToStaticMarkup(<PromoBanner />);

// Write HTML to a file
fs.writeFileSync("promo.html", html);

console.log("✅ promo.html file created successfully!");

Now, when you open promo.html, you’ll see a fully static HTML version of your React component, no JavaScript required.

Tips for Better Conversion

Use renderToStaticMarkup() instead of renderToString() if you don’t need React attributes like data-reactroot.
Always sanitize or validate props before rendering to prevent XSS vulnerabilities.
If you’re exporting multiple components, create a small Node.js script to automate the process.
For large apps, consider Next.js — it handles server-side rendering and static HTML generation automatically.

Converting React components to HTML isn’t as complicated as it seems once you understand the right tools. I personally use ReactDOMServer for most of my professional projects, especially when I need clean, SEO-friendly HTML.

If you just want to grab the rendered HTML from the browser, the DOM extraction method works perfectly. And if you’re building reusable web components, the react-to-html-element package is a real time-saver.

These methods have helped me countless times, from building email templates to generating static pages for clients. I hope they help you, too.

You may read:

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/