Getting Started

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

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 | nul
  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