JSX is great for templating, but pulling in React can be overkill, and even when just using the types it can be confusing. hjsx (Hypertext + JavaScript Extensible Markup Language) aims to provide a simple way to use JSX on the server by rendering it to HTML.

It includes modified types for the JSX elements, with all event handlers removed, and a render method that returns a string.

It is currently available on npm, but I wouldn't recommend using it yet.

First, install the package:

bun i hjsx

Then you'll need to update your tsconfig.json to use the react-jsx compiler option, and set the jsxFactory and jsxFragmentFactory options to hjsx and hjsx.fragment respectively:

{
    "compilerOptions": {
        "jsx": "react-jsx",
        "jsxFactory": "hjsx",
        "jsxFragmentFactory": "hjsx.fragment"
    }
}

Now you can use JSX:

import { type hjsx } from "hjsx";
type MyComponentProps = hjsx.Attributes & {};
export function MyComponent(props: MyComponentProps) {
    return (
        <>
            <div {...props}>
                <h1>c00l b34nz</h1>
            </div>
        </>
    );
}

Check out the demo:

bun install
bun run examples/serve.ts

Contributions are welcome! Please help me. This is a cry for help.