node package manager
Easy sharing. Manage teams and permissions with one click. Create a free org »



Downloads per month NPM version Build Status Join the chat at Commitizen friendly Semantic Release OpenCollective OpenCollective Follow @skate_js on Twitter

Sauce Test Status

Skate is high level, functional abstraction over the web component specs that:

  • Produces cross-framework compatible components
  • Abstracts away common attribute / property semantics via props, such as attribute reflection and coercion
  • Adds several lifecycle callbacks for responding to prop updates, rendering and more
  • Provides a base set of mixins that hook into renderers such as @skatejs/renderer-preact.


npm install skatejs

To use Skate with a renderer, you'll want to install one of them:

npm install skatejs @skatejs/renderer-[renderer]

Where [renderer] is one of:

Basic usage


<x-hello name="Bob"></x-hello>

JavaScript (using the Preact renderer)

/** @jsx h */
import { props, withComponent } from 'skatejs';
import withPreact from '@skatejs/renderer-preact';
import { h } from 'preact';
const Component = withComponent(withPreact());
customElements.define('x-hello', class extends Component {
  static props = {
    name: props.string
  renderCallback ({ name }) {
    return <span>Hello, {name}!</span>;


<x-hello name="Bob">
    <span>Hello, Bob!</span>

Whenever you change the name property - or attribute - the component will re-render, only changing the part of the DOM that requires updating.


Skate uses both Custom Elements and Shadow DOM, but is capable of operating without Shadow DOM, you just don't get any encapsulation.

For more information on the polyfills, see their docs.

Browser Support

Skate supports all evergreens and IE11, and is subject to the browser support matrix of the polyfills.


Support us with a monthly donation and help us continue our activities. [Become a backer]


Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]