Texsaur

A simple jsx to DOM Node parser.

Overview

To create a DOM element in JavaScript, we could use document.createElement:

const div = document.createElement('div');
div.classList.add('example');
div.innerText = 'hello there';
div.addEventListener('click', () => console.log('clicked!'));

Texsaur lets you do this with jsx instead:

import jsx from 'texsaur';

const div = (
  <div class="example" 
       onclick={() => console.log('clicked!')}>
    Hello there
  </div>
) as HTMLElement;

Functional components are supported too:

const Example = ({ onClick }, children) => (
    <div class="example" onclick={onClick}>{children}</div>
);

const div = <Example onClick={() => console.log('clicked!')}>Hello there</Example>;

Here's a playground.

Documentation

Want help getting started? Check out the GitHub repository.