HTML to JSX

Introduction

This is an online converter tool which helps to convert HTML to JSX template.

How to use this tool?

You can input/paste your code directly into the editor, then click the Convert button. After converting, you can download or save/share the result. It will create a link for you to share with others. You can also sign-in using Google/GitHub to save results into your account.

What is JSX?

      
const element = <h1>Hello, world!</h1>;
      
    

This funny tag syntax is neither a string nor HTML.

It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

Learn more

JSX Syntax

      
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
      
    

      
<div>
  <div class="awesome" style="border: 1px solid red">
    <label for="name">Enter your name: </label>
    <input type="text" id="name" />
  </div>
  <p>Enter your HTML here</p>
</div>
      
    

      
<div>
  <div className="awesome" style={{border: '1px solid red'}}>
    <label htmlFor="name">Enter your name: </label>
    <input type="text" id="name" />
  </div>
  <p>Enter your HTML here</p>
</div>