The Lazy Way To Convert HTML To JSX

As you'll notice in the footer, this blog is powered by the Jamstack. Gatsby is my static site generator of choice - I love it. Fast, easy to use, Lighthouse-friendly out of the box.

Yet, there's one little downside of building anything in React (which Gatsby is built upon). Converting "legacy" HTML templates to JSX can be a bit tedious. Especially for larger projects.

I'm a massive fan of Tailwind UI. Some of the best money I've ever spent. That said, copy/pasting Tailwind UI components as JSX is non-trivial. Raw HTML is the only export option (though, they're working on React and Vue support as I write this). Beautifying this blog will take extra time.

If you're stuck in a similar situation, look no further than this handy HTML to JSX converter at transform.tools. Spun up by Ritesh Kumar, using it is a doddle. Copy, paste, Prettify, done.

He's built a few other handy converters, too. Like this JSON to GraphQL converter. And one for Raw CSS to Tailwind CSS.

Often, the simplest products are the best products. Try transform.tools, and you'll see what I mean.