JSX without React

I think it’s perfectly reasonable to want to use the JSX syntax but not need React. It’s a decent templating language that I bet a lot of people are quite comfortable with.

Here’s a contrived example:

const arr = ["This", "little", "piggy"];

const content = (
    {arr.map((text) => {
      return <span>{text} </span>;

const html = ???;
Code language: JavaScript (javascript)

If you were using React, you’d use ReactDOM:

ReactDOM.render(content, document.getElementById("root"));Code language: JavaScript (javascript)

But that’s client-side.

ReactDOM has a way to get it as a string, like:

import React from "react";
import { renderToString } from "react-dom/server";

const arr = ["This", "little", "piggy"];

const content = (
    {arr.map((text) => {
      return <span>{text} </span>;

const html = renderToString(content);Code language: JavaScript (javascript)

But notice I need to import React there also in order for that to work. Still, I imagine you could get that running server-side if you needed to.

I was thinking about this after seeing NakedJSX, which does JSX -> HTML without any React dependency. In its case, you put both the JSX and the instructions on rendering it, within the same file, like:

import { Page } from "@nakedjsx/core/page";

const BodyContent = ({ title }) => (
    <h1 css="color: fuchsia">{title}</h1>
    <p css="color: #ff00ff">Building HTML files from JSX feels right.</p>

Page.AppendCss("body { font-family: sans-serif }");
Page.AppendHead(<title>Hello NakedJSX</title>);
Page.AppendBody(<BodyContent title="Hello NakedJSX" />);
Page.Render();Code language: JavaScript (javascript)

Kinda neat. You could probably build a whole SSG thing out of that.

For me, in the end, if you’re looking to do JSX client side with as little as possible, I’d probably go with Preact (here’s an explanation for how to do it on CodePen if you care, and they also have an SSR method).

And if you’re doing it server-side, I’d probably just go with Astro which easily turns JSX into HTML. I know Next.js can do totally HTML-only builds as well and it seems like Remix can, too, I’ve just never tried it.



I work on CodePen! I'd highly suggest you have a PRO account on CodePen, as it buys you private Pens, media uploads, realtime collaboration, and more.

Get CodePen PRO

4 responses to “JSX without React”

  1. Jace says:

    For this use case I just go with template literals. It’s basically native JSX.

    const arr = ["This", "little", "piggy"];

    const content = /* html */`
    ${arr.map((text) => {
    return `<span>${text} </span>`;

    const html = new DOMParser().parseFromString(content, "text/html").body;

    That /* html */ bit is for syntax highlighting in my editor (though you could also use a tag, like html\…``).

    Works great for server-side templating. Convert that string to an HTML fragment and pass it through a simple hand-rolled DOM diff function, you can use it client-side too (for a fraction of the cost of even Preact).

  2. I thought the worst part of React was Jsx lol

  3. Lambros says:

    This is my favourite alternative to JSX which needs special tooling to parse/transpile. HTM works anywhere, and in combination with Preact it’s an awesome combo. Small, lightweight, and gives you 99% of the JSX benefits.

    See https://github.com/developit/htm

  4. olup says:

    Qwik can too, and is my goto choice those days to build static html from JSX. Very small footprint and great output.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ⬆️