Guides: Bring your Own Renderer

The main entry point is intended for lit-html users. If you are using lighterhtml or hyperHTML then instead import @pionjs/pion/core. This export gives you a function that creates Hooks that work with any template library.

import pion, { useState } from '@pionjs/pion/core';
import { html, render } from 'lighterhtml';

const { component } = pion({
  render(what, where) {
    render(where, () => what);
  }
});

function App() {
  const [count, setCount] = useState(0);
  return html`
    <h2>Using lighterhtml!</h2>
    <div>Count: ${count}</div>
    <button part="button" onclick=${() => setCount(count + 1)}>Increment</button>
  `;
}

customElements.define('my-app', component(App));

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!