Input (HTML)
<div class="card">
<label for="email">Email</label>
<input id="email">
</div>HTML → JSX
About the HTML → JSX playground
HTML → JSX converts plain HTML markup into React-ready JSX. It renames HTML attributes to their JSX equivalents — class becomes className, for becomes htmlFor, and event/style attributes are adjusted — closes void elements like <img> and <br>, and camelCases attributes such as tabindex. Paste a chunk of HTML and get a component-ready fragment you can drop straight into a React render.
HTML (HyperText Markup Language) is the browser's native markup, where attributes like class and for collide with JavaScript reserved words. JSX is React's XML-like syntax extension that compiles to JavaScript, so it requires those reserved names renamed, all tags closed, and inline styles written as objects. This converter applies those rules automatically so legacy HTML or design snippets become valid JSX.
HostedHTML → JSX runtime
mainentry file
single fileworkspace
stdinprogram input
How it works
1
Write
The main file is the entry point for each run.
2
Give it input
Use the Input panel to pipe standard input to your program when it needs data.
3
Run
Run sends your code to a fresh hosted runtime and streams the result into the output panel.
4
Keep or share
Your draft stays in this browser, and Share creates a separate snapshot link.
External resources
- html.spec.whatwg.org— Format reference
Output (JSX)
<div className="card">
<label htmlFor="email">Email</label>
<input id="email" />
</div>Input (HTML with style)
<p style="color: red; font-size: 14px">Hi</p>Output (JSX)
<p style={{ color: 'red', fontSize: '14px' }}>Hi</p>Input (HTML void elements)
<img src="logo.png" alt="Logo">
<br>
<hr>Output (JSX)
<img src="logo.png" alt="Logo" />
<br />
<hr />Input (HTML form attributes)
<input type="text" tabindex="1" maxlength="20" readonly>Output (JSX)
<input type="text" tabIndex="1" maxLength="20" readOnly />Input (HTML with comment)
<!-- header -->
<header class="top">
<h1>Title</h1>
</header>Output (JSX)
{/* header */}
<header className="top">
<h1>Title</h1>
</header>Input (HTML SVG attributes)
<svg viewBox="0 0 10 10">
<rect stroke-width="2" fill-opacity="0.5"/>
</svg>Output (JSX)
<svg viewBox="0 0 10 10">
<rect strokeWidth="2" fillOpacity="0.5" />
</svg>Input (HTML label & checkbox)
<label class="row">
<input type="checkbox" checked>
Subscribe
</label>Output (JSX)
<label className="row">
<input type="checkbox" defaultChecked />
Subscribe
</label>How it works
The editor uses Monaco, the engine behind VS Code, with language-aware editing tools and familiar keyboard controls.
Workflow
Paste raw HTML; get a React-ready JSX fragment back.
Drop the result straight into a component's render output.
Transforms applied
class becomes className and for becomes htmlFor.
Attributes like tabindex are camelCased (tabIndex).
Void elements such as <img> and <br> are self-closed.
Privacy
Markup is rewritten in your browser; nothing is sent to a server.
Safe for proprietary design snippets.
Tips
Inline style strings are adjusted toward JSX's object form.
Handy for porting legacy HTML or design exports into React.
Every shortcut, searchable:
Editing
Undo
Ctrl+Z
Redo
Ctrl+⇧+Z
Select next occurrence
Ctrl+D
Delete line
Ctrl+⇧+K
Move line up / down
Alt+↑ / ↓
Copy line up / down
Alt+⇧+↑ / ↓
Toggle comment
Ctrl+/
Indent line
Ctrl+]
Outdent line
Ctrl+[
Navigation
Find
Ctrl+F
Find & replace
Ctrl+H
Go to line
Ctrl+G
Go to symbol
Ctrl+⇧+O
Selection
Select all
Ctrl+A
Select line
Ctrl+L
Select all occurrences
Ctrl+⇧+L
Shortcuts follow your OS — ⌘ becomes Ctrl on Windows and Linux.
It rewrites HTML into valid JSX by renaming reserved attributes (class, for), closing void elements, and converting inline styles to objects.
No. The conversion runs in your browser, so your HTML never leaves your device.
Yes, completely free with no sign-up.
class is a reserved word in JavaScript, so React/JSX uses className instead; similarly for becomes htmlFor.
A style string is turned into a JavaScript object with camelCased property names, e.g. font-size becomes fontSize.
html
javascript
Output
JSX output