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.

Features

• 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

Getting Started

1. Install WebComp

npm install @webcomp/core

2. Import WebComp

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

3. Create your component

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.

4. Register your custom tag

register(SuperHeader, 'super-header');

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

5. Use it!

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

Documentation

You can read the full documentation here →