Skip to content
Skate is a functional reactive abstraction over the web component standards as a set of packages that enables you to write small, fast and scalable web components using popular view libraries such as React, Preact and LitHTML.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Fix the contribution guidelines link in pr template Aug 5, 2018
build
packages Update docs for skatejs/element. Mar 13, 2019
site
.editorconfig
.gitattributes Fix flow issues. Jul 30, 2018
.gitignore Patch up package.json files for better main field hanlding. Dec 12, 2018
.nvmrc Try and fix Travis. Dec 19, 2017
.prettierignore Move define and name out of skatejs core into its own package. Aug 31, 2018
.travis.yml
CODE_OF_CONDUCT.md Remove redundant changelog. Add code of conduct and to the contributi… Jan 21, 2018
CONTRIBUTING.md Use yarn workspaces. Mar 6, 2019
LICENSE refactor: Many changes from coding sesh last night. Mar 6, 2017
README.md
package.json Fix ssr example. Mar 6, 2019
projector.js Clean up build and move to ts. Sep 1, 2018
tsconfig.json Patch up package.json files for better main field hanlding. Dec 12, 2018
yarn.lock

README.md

Skate

Build Status Downloads per month Join the chat at https://gitter.im/skatejs/skatejs Follow @skate_js on Twitter

Skate is a functional reactive abstraction over the web component standards as a set of packages that enables you to write small, fast and scalable web components using popular view libraries such as React, Preact and LitHTML.

  • 🌏 Cross-framework compatible components.
  • ⚛️ Render components using your favourite view libary, or none at all.
  • 👑 Guided conventions for best-practices when reflecting between, and reacting to attributes, properties and events.
  • 🌟 Full TypeScript support.
  • 📚 Docs https://skatejs.netlify.com.

Getting started

The simplest way to get up and running is to start with a pre-configured element such as @skatejs/element-lit-html.

npm i @skatejs/element-lit-html

Simple example

import Element, { html } from '@skatejs/element-lit-html';

export default class extends Element {
  static props = {
    name: String
  };
  render() {
    return html`
      Hello, ${this.name}!
    `;
  }
}

Other examples

  1. Todo list

Cli

There's a CLI to get you up and running: https://skatejs.netlify.com/packages/cli.

$ npm i -g @skatejs/cli
$ skatejs

Polyfills

Skate builds upon the Custom Elements and the Shadow DOM standards. It is capable of operating without the Shadow DOM — it just means you don't get any encapsulation of your component's HTML or styles. It also means that it's up to you to provide a way to project content (i.e. <slot>). It's highly recommended you use Shadow DOM whenever possible.

Though most modern browsers support these standards, some still need polyfills to implement missing or inconsistent behaviours for them.

For more information on the polyfills, see the web components polyfill documentation, emphasis on the caveats.

Browser Support

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

Backers

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

Sponsors

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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.