description: Functional custom-element authoring with typed props, reactive templates, lifecycle helpers, controls, observers, and testing utilities. package: craftit category: ui-primitives keywords: [web-components, custom-elements, reactive, templates, signals, lifecycle] related: [stateit, buildit, floatit] exports: [define, html, css, signal, computed, effect, props, propsOf, on, ref, host, provide, inject]

@vielzeug/craftit

Functional custom-element authoring with typed props, reactive templates, lifecycle helpers, controls, observers, and testing utilities.

Package: @vielzeug/craftit  ·  Category: Ui-primitives

Key exports: define, html, css, signal, computed, effect, props, propsOf, on, ref, host, provide, inject

When to use: Functional custom-element authoring with typed props, reactive templates, lifecycle helpers, controls, observers, and testing utilities.

Related: @vielzeug/stateit · @vielzeug/buildit · @vielzeug/floatit

@vielzeug/craftit is part of Vielzeug and ships as a zero-dependency TypeScript package with ESM+CJS output.

Installation

pnpm add @vielzeug/craftit
npm install @vielzeug/craftit
yarn add @vielzeug/craftit

Quick Start

import { computed, css, define, html, prop, signal } from '@vielzeug/craftit';

define('my-counter', {
  props: {
    label: prop.string('Count'),
    step: prop.number(1),
  },
  setup(props, { host }) {
    const count = signal(0);
    const doubled = computed(() => count.value * 2);

    host.class({ 'is-positive': () => count.value > 0 });

    return () => html`
      <button @click=${() => (count.value += props.step.value)}>
        ${props.label}: ${count}
      </button>
      <p>Doubled: ${doubled}</p>
    `;
  },
  styles: [
    css`
      :host {
        display: inline-grid;
        gap: 0.5rem;
      }
    `,
  ],
});

Documentation

• Overview
• Usage Guide
• API Reference
• Examples

License

MIT © Helmuth Saatkamp — part of the Vielzeug monorepo.