html-to-react-components 0,0,1,0,1 editorconfig eslint travis-ci npm

Extract annotated portions of HTML into React components as separate modules.


Join the chat at

Extract annotated portions of HTML into React components as separate modules. The structure of HTML is preserved by importing child components and replacing appropriate pieces of HTML with them. As a result you get an entire components tree ready to be rendered.

usage example animation

When to use it

This utility was designed to free React developers from a boring work of translating HTML into components.

Imagine you just got a pile of HTML from your designers. The first thing you will do is break HTML into React components. This is boring and we can automate this.


$ npm i -g html-to-react-components


HTML components should be annotated with data-component attribute. The value of the attribute is the name of the React component.

See and run test.js file for usage example and output.


$ html2react ./src/*.html -c stateless -m es6 -d _ -o components -e jsx


import extractReactComponents from 'html-to-react-components';

`<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">

  <header class="header" data-component="Header">

    <h1 class="heading" data-component="Heading">Hello, world!</h1>

    <nav class="nav" data-component="Nav">
      <ul class="list">
        <li class="list-item" data-component="ListItem">#1</li>
        <li class="list-item" data-component="ListItem">#2</li>


  componentType: 'stateless',
  moduleType: false

{ Header: 'const Header = () => <header className="header">\n\n    <Heading></Heading>\n\n    <Nav></Nav>\n\n  </header>;',
  Heading: 'const Heading = () => <h1 className="heading">Hello, world!</h1>;',
  Nav: 'const Nav = () => <nav className="nav">\n      <ul className="list">\n        <ListItem></ListItem>\n        <ListItem></ListItem>\n      </ul>\n    </nav>;',
  ListItem: 'const ListItem = () => <li className="list-item">#2</li>;' }


Use in a browser environment requires some additional setup:


Disable writing to disk by setting the NO_WRITE_FS environment variable:

NO_WRITE_FS=true browserify ...

Alternatively, if you’re using envify;

browserify in.js -g [ envify --NO_WRITE_FS ] ...

Note the use of a global flag (-g) for envify to ensure this module gets transformed when it is a dependency.

Error: Cannot find module './parser' from '.../node_modules/babylon'

This is a bug caused by the babylon package (which this project depends upon). While this bug is still alive, you should follow these instructions to work around it.


componentType, -c

Type of generated React components.


  • stateless
  • es5 (default)
  • es6

moduleType, -m

Type of generated JavaScript modules.


  • false (do not extract components as modules)
  • es6 (default)
  • cjs (CommonJS)

moduleFileNameDelimiter, -d

Delimiter character to be used in modules filename.

If you don’t specify a delimiter, or pass -d without a value, then the component name in the HTML will be used unchanged as the filename. If you do specify a delimiter character, then the module name is broken into words, joined with the delimiter and lower-cased.


Configuration options for output to file system.

path, -o

Output directory path.

Default is components directory in the current directory.

fileExtension, -e

Output files extension.

Default value is js.


A quick video demo on converting a simple HTML page into React components and rendering them into the same looking UI.

Annotating HTML in the editor is not the best experience, because you cannot see rendered UI itself. It’s possible to annotate HTML using DevTools. Be aware that you’ll have to spend time on copying and pasting markup from DevTools into files which will be processed.

usage example with DevTools animation

Browser extension

extract-to-react is an extension for Chrome and Chromium browsers built on top of html-to-react-components which allows you to extract HTML and CSS into React components and load them in CodePen or JSFiddle.



If you spotted a bug, please, submit a pull request with a bug fix. If you would like to add a feature or change existing behaviour, open an issue and tell about what exactly you want to change/add.



Related Repositories



Extract annotated portions of HTML into React components as separate modules. ...



Create framework agnostic components that are truly reusable and interoperable with all the benefits of the React ecosystem – using the HTML5 custom elements API to extend HTML's vocabulary. ...



Webpack plugin that renders React components to HTML files ...



React goes web component – Use custom tags to place react components directly in html. ...



Render react components to html using python ...

Top Contributors

roman01la jesstelford Chun-Yang gitter-badger cubeddu


package version
babel-generator ^6.3.26
babel-traverse ^6.3.26
babel-types ^6.3.24
babylon ^6.3.26
chalk ^1.1.3
glob ^6.0.4
htmltojsx ^0.2.6
meow ^3.7.0
mkdirp ^0.5.1
posthtml ^0.8.7
posthtml-parser ^0.1.3
posthtml-render ^1.0.6
prettier ^1.5.2
dev jest ^20.0.4


-   v1.4.0 zip tar
-   v1.3.2 zip tar
-   v1.3.1 zip tar
-   v1.3.0 zip tar
-   v1.2.1 zip tar
-   v1.2.0 zip tar
-   v1.1.3 zip tar
-   v1.1.2 zip tar
-   v1.1.1 zip tar
-   v1.1.0 zip tar
-   1.0.0 zip tar