JSX Renderer

Bulba's most basic configuration is a string-based HTML renderer as shown in many of the examples, however you can optionally use Snabbdom JSX (plus some syntax sugar provided by Bulba) instead.

First, make sure you have the necessary environment to use JSX.

When you're good to go, you can make a new Bulba element exactly as you would with strings, but now with dynamic JSX!

Read about Snabbdom's JSX syntax as it differs from React in several ways. That said, Bulba provides the following syntactic shortcuts:

Classes

// Vanilla Snabbdom
<div class={{ container: true }} />
// Bulba
<div className="container" />

Lifecycle Hooks

// Vanilla Snabbdom
<div hook={{ destroy: () => {} }} />
// Bulba
<div hook-destroy={() => {}} />

Dataset

// Vanilla Snabbdom
<div dataset={{ fooBar: "baz" }} />
// Bulba
<div data-foo-bar="baz" />

Event Handlers

// Vanilla Snabbdom
<div on={{ mouseenter: () => {} }} />
// Bulba
<div on-mouseenter={() => {}} />

Aria attributes

// Vanilla Snabbdom
<button attrs={{ "aria-labelledby": "foobar" }}>Click me</button>
// Bulba
<button aria-labelledby="foobar">Click me</button>