WebComp.js is a "batteries included" JavaScript library for writing smart reusable Web Components in a modern way.

Inspired by React components, WebComp provides familiar state management mechanisms and Virtual DOM, while also providing all of the sweetness of Web Components like Shadow DOM, server side rendering placeholders and ability to render from a string.

• JSX
• React-like syntax
• Virtual DOM
• Shadow DOM
• Component and element lifecycle hooks
• Attribute to props mapping
• Event based communication
• State sharing (context)
• Routing
• Tiny bundle size

npm install @webcomp/core

import { WebComponent, register } from '@webcomp/core';

class SuperHeader extends WebComponent {
  render(props) {
    return (
      <div>
        <h1>{props.text}</h1>
        <h3>It's Superpowered!</h3>
      </div>
   );
  }
}

Looks familiar? WebComp components are written in the exact same way as React components.

Note: Because WebComp uses Preact for rendering JSX, props and state are passed as arguments to the render() method for convenient destructuring. You can still use this.props and this.state if you want to, but it's not required.

register(SuperHeader, 'super-header');

Second argument is an optional tag name. If not set, component name converted to dash-case will be used.

<div id="main">
  <super-header text="This is not a simple header!"></super-header>
</div>

You can read the full documentation here →