Home

If you're here to learn about Bulba, you're in the right place!

At its core, Bulba simply creates custom elements, which can then be used in virtually any context so long as HTML (or some other abstraction of it, such as JSX) is available.

Creating a new element is cheap and easy. You can do so by extending the base constructor, BulbaElement. No exports required!

Once you've installed the package, you can quickly spin up a custom element for yourself:

import { BulbaElement, register } from "@bulba/element"
import { Renderer } from "@bulba/template"

class FancyHeading extends BulbaElement(Renderer) {
  render() {
    return `
      <h2 class='is-fancy'>
        <slot></slot>
      </h2>
    `
  }
}

register("fancy-heading", FancyHeading)

What's going on here?

• You've defined an BulbaElement component with a view.
• You’ve registered the element to the page.

Import or link to your element file in your project or page and use it:

<script src="/path/to/fancy-header.js" type="module"></script>
<div>
  <fancy-header>Am I fancy enough yet?</fancy-header>
  <p>I was fancy before everyone else.</p>
</div>

That's it! Remember: at the end of the day, BulbaElement is a thin wrapper around HTMLElement that enhances your custom element capabilities.

---

Bulba also exports a helper function called validateType to type-check your properties when using custom accessors in your component class.

---

Check out the sidebar to the right to learn about using even more about the tools at your disposal with this base class. 👉