pion

React-like Hooks

Use familiar hooks like useState, useEffect, useReducer — but for Web Components.

Framework Interop

Web Components work everywhere — drop pion components into React, Vue, Angular, or use them standalone.

Lightweight

Tiny footprint with no framework overhead — just hooks on top of Custom Elements.

Standards Based

Built entirely on the Custom Elements standard — no proprietary abstractions, future-proof by design.

import { html } from 'https://unpkg.com/lit?module';
import { component, useState } from 'https://unpkg.com/@pionjs/pion';

function Counter() {
  const [count, setCount] = useState(0);

  return html`
    <div part="count">${count}</div>
    <button part="button" @click=${() => setCount(count + 1)}>
      Increment
    </button>
  `;
}

customElements.define('my-counter', component(Counter));