DEV Community

Cover image for dom-chef - Build DOM Elements with JSX
Nick Taylor
Nick Taylor Subscriber

Posted on • Edited on • Originally published at iamdeveloper.com

dom-chef - Build DOM Elements with JSX

I came across dom-chef while working on a PR for migrating Refined GitHub to TypeScript (WIP and something that is interesting on its own if you're new to TypeScript).

At a quick first glance, I thought Refined GitHub was built with React, but as soon as I had that second sip of coffee, I realized it was just JS with some JSX in it.

The TLDR:

  • No API, JSX gets auto transformed into actual DOM elements
  • Protection from XSS injections
  • Partial SVG support
  • React-like props naming (including events)
  • Mix any DOM elements inside

This is definitely interesting if you're a fan of JSX.

Check out the repository

GitHub logo vadimdemedes / dom-chef

🍔 Build DOM elements using JSX automatically





Build regular DOM elements using JSX

With dom-chef, you can use Babel or TypeScript to transform JSX into plain old DOM elements, without using the unsafe innerHTML or clumsy document.createElement calls.

It supports everything you expect from JSX, including:

If something isn't supported (or doesn't work as well as it does in React) please open an issue!

Install

$ npm install dom-chef

Usage

Make sure to use a JSX transpiler (e.g. Babel, TypeScript compiler, esbuild, you only need one of them).

import {h} from 'dom-chef';
const handleClick = e => {
    // <button> was clicked
};

const el = (
    <div className="header">
        <button className="btn-link" onClick={handleClick}>
            Download
        </button>
    </div>
);

document.body.
…
Enter fullscreen mode Exit fullscreen mode

Photo by Wyron A on Unsplash

Top comments (1)

Collapse
 
davidchase profile image
David Chase

Neat find seems a cool alternative to something like nanohtml which does the same but use tagged template literals to construct dom elements