Skip to content
πŸ” Build DOM elements using JSX automatically
Branch: master
Clone or download
Latest commit ac7c9ee Mar 2, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
index.js Handle boolean attributes correctly (#34) Mar 2, 2019
package-lock.json 3.6.0 Mar 2, 2019
package.json 3.6.0 Mar 2, 2019
test.js Handle boolean attributes correctly (#34) Mar 2, 2019

Build DOM elements using JSX automatically

Build Status


$ npm install --save dom-chef


  • 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


Make sure to use a JSX transpiler, set JSX pragma to h and optionally the pragmaFrag to DocumentFragment if you need fragment support.

// babel.config.js

const plugins = [
      pragma: 'h',
      pragmaFrag: 'DocumentFragment',

// ...
const {h} = require('dom-chef');

const handleClick = e => {
	// <a> was clicked

const el = (
	<div class="header">
		<a href="#" class="link" onClick={handleClick}>Download</a>


Alternative usage

You can avoid configuring your JSX compiler by just letting it default to React and exporting the React object:

const React = require('dom-chef');

This has the advantage of enabling Fragment support with the TypeScript compiler, if you're using it compile JSX without Babel. Related issue:

TS17016: JSX fragment is not supported when using --jsxFactory


Set classes

const el = <span class="a b c">Text</span>;

// or use `className` alias
const el = <span className="a b c">Text</span>;

Set styles

const el = <div style={{padding: 10, background: '#000'}}/>;

Attach event listeners

const handleClick = e => {
	// <span> was clicked

const el = <span onClick={handleClick}>Text</span>;

Mix other elements inside

const title = <h1>Hello World</h1>;
const body = <p>Post body</p>;

const post = (
	<div class="post">

Set innerHTML

const dangerousHTML = '<script>alert();</script>';

const wannaCry = <div dangerouslySetInnerHTML={{__html: dangerousHTML}}/>;

Render SVG

Note: Due to the way dom-chef works, tags <a>, <audio>, <canvas>, <iframe>, <script> and <video> aren't supported inside <svg> tag.

const el = (
	<svg width={400} height={400}>
		<text x={100} y={100}>


MIT Β© Vadim Demedes

You can’t perform that action at this time.