HTML to JSX

Loading…

All tools › Turned into something else

HTML to JSX

Markup as a component, with the three things that are a syntax error if left alone.

It runs entirely in this browser tab: the code you paste is never uploaded, and nothing here is executed, built or fetched — it is read and something else is written. Open your browser's network panel and try it.

What it takes

A HTML document.

An example

<div class="card" style="background-color: #fff; border-radius: 4px">
  <label for="name">Name</label>
  <input id="name" maxlength="40" readonly>
  <!-- a comment -->
</div>

Settings

Name
What the declaration or the component is called.
Wrap in a component
Wrapped in a function that returns it, ready to import.
Styles as objects
A style attribute is a string in markup and an object in a component.

How to use it

  1. Paste your text into the box above, or open a file.
  2. Adjust the settings beside it until the result is what you wanted.
  3. Copy the result, or save it as a file. The result updates as you type.

Questions

Is my code uploaded anywhere?
No. The whole application is carried as WebAssembly and runs on your own device. That matters here as much as anywhere: a curl command pasted out of a terminal has a live token in it, a stack trace has your customers' identifiers in it, and a configuration file has a password in the middle of a connection address.
Does anything here run what I paste?
Never. The command explainer explains and does not execute; the Dockerfile reader reads and does not build; the request builder writes a command and does not send it. Each tool says so on its own result, and each says what that costs it — a linter that did not build the image cannot tell you the image builds.
Will an escape survive a round trip?
Yes, and there is a test that says so: every language's escaper has its unescaper beside it, and an awkward string with quotation marks, backslashes, tabs, a null and an emoji in it goes through both for every language on every run of the test suite.
Why does it refuse a pattern instead of matching nothing?
Because matching nothing looks like an answer. The glob matcher reads a stated subset — the stars, the question mark, character classes, brace lists and a leading negation — and a pattern using anything else comes back named rather than quietly matching none of your files.

Other tools for turned into something else

HTML to Markdown
A page as prose, with the tags it cannot convert named rather than swallowed.

Drawing to component
A drawing as an icon whose size is a parameter and whose colour follows the text around it.

Snippet as a picture
A snippet drawn as SVG source rather than an encoded picture, in three colours and no more.

Terminal colours
An escape sequence said in words, taken out, or written as something a source file can hold.

Terminal colour
A colour as the nearest of the two hundred and fifty-six, and as the full-colour sequence.

All forty tools