✏️

Pencel

One component, multiple frameworks

Get Started GitHub

Component Translation

Write once in TypeScript + JSX. Transpile to React, Angular, Vue, vanilla JS.

Full Native Control

Extend HTML elements directly. HTMLButtonElement, HTMLInputElement—full platform access.

Zero-VDOM Runtime

~4 kB gzipped. Direct DOM updates. Pure Web Components output.

TypeScript First

Decorators, JSX, familiar patterns. Type-safe from start to finish.

Quick Example

import { Component, Prop, Event } from '@pencel/runtime';

@Component({ tag: 'my-button' })
export class MyButton extends HTMLButtonElement {
  @Prop() label: string = 'Click me';
  @Event() declare clicked: CustomEvent<void>;

  render() {
    return (
      <Host onClick={() => this.clicked.emit()}>
        {this.label}
      </Host>
    );
  }
}