Getting Started

You can use Webuum with or without a bundler — it's designed to be as native and lightweight as possible.

WARNING

This is a pre-release version. Use in production with caution — the API's may still change before the stable release.

Migrating from Stimulus?

Follow the Stimulus to Webuum migration guide to move controllers, targets, values and actions to Custom Elements and native browser APIs.

Installation

Via package manager

npm

npm install webuum

Yarn

yarn add webuum

pnpm

pnpm add webuum

Bun

bun install webuum

Deno

deno install npm:webuum

Then import it in your JavaScript:

import { WebuumElement } from 'webuum'

Via CDN

import { WebuumElement } from 'https://cdn.jsdelivr.net/npm/webuum/dist/index.js'

Via CDN with importmap

example.js

import { WebuumElement } from 'webuum'

example.html

<script type="importmap">
  {
    "imports": {
      "webuum": "https://cdn.jsdelivr.net/npm/webuum/dist/index.js"
    }
  }
</script>

Hello World Example

A minimal custom element using Webuum.

example.js

import { WebuumElement } from 'webuum'

customElements.define('x-hello-world', class extends WebuumElement {
  static parts = {
    $foo: 'custom-name', // maps to data-x-hello-world-part="custom-name"
  }

  static props = {
    $buu: null, // maps to data-buu="Hello world"
  }

  connectedCallback() {
    this.$foo.textContent = this.$buu
  }
})

example.ts

import { WebuumElement } from 'webuum'

customElements.define('x-hello-world', class extends WebuumElement {
  declare $foo: HTMLElement | null
  declare $buu: string | null
    
  static parts = {
    $foo: 'custom-name', // maps to data-x-hello-world-part="custom-name"
  }

  static props = {
    $buu: null, // maps to data-buu="Hello world"
  }

  connectedCallback() {
    this.$foo.textContent = this.$buu
  }
})

example.html

<x-hello-world data-buu="Hello world">
    <span data-x-hello-world-part="custom-name"></span>
</x-hello-world>

You’ve just created your first Webuum component — built on native APIs, ready for production, and weighing less than a kilobyte.

Trying Webuum Online

On StackBlitz or GitHub with basic examples how to use it with Vite or other frameworks.

• vanilla
• vite
• astro
• astro extended