Transpile JSX to JS

Usage no npm install needed!

<script type="module">
  import jsxToJs from 'https://cdn.skypack.dev/jsx-to-js';



Transpiles JSX to JS but tries to be a more JavaScripty than the standard JSX transpiler from Facebook. Not that I am a big fan of JS, but JSX is only supposed to be syntax sugar for defining tree structures in JS. And in this case making it more JavaScripty actually made it sweeter.

Differences from the standard JSX syntax

  1. Ignores capitalization of tag names

Instead it tracks variables and uses them to determine output. So with:

const component = () => <div/>

This module produces


While a Standard JSX transpiler would produce

  1. Provides ES6 style parameter shorthand

If you don't provide a value to a parameter it will default it to a variable with the same name

<component onMousedown isfocused/>

This module produces:

JSX(component, {onMousedown: onMousedown, isfocused: isfocused})

While a Standard JSX transpiler would produce:

JSX('component', {onMousedown: true, isfocused: true})


npm install jsx-to-js

then in your app:

const JSX = require('jsx-to-js')


It takes a JSX AST node and returns a JS AST node. Simple as

JSX(parse('<div/>')) // => parse('JSX("div")')

Related projects