Teddytags logo

The superfast way to custom elements.

Name the HTML tags your own.

  • Out-of-box custom elements (<myElement />)
new Tag({
  name: "myElement",
  to: "p",
});

<myElement>Hello</myElement>

<p>Hello</p>
  • Virtual Components (Like those of React)
  • custom elements + Virtual components directly in HTML
/** @jsx teddy.h */
import teddy from "teddytags";
class MyComponent extends teddy.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
  • Bind virtual components to the DOM
import { Tag } from "teddytags";
//MyComponent is defined in above example
new Tag({
  name: "MyComponent",
  to: MyComponent,
});

and use it.

<MyComponent name="myself" />

<div name="myself" data-component="MyComponent">
  <h1>Hello, myself</h1>
</div>
  • Superb and extra-simple diff algorithm
  • Stateful Class Components
  • 3kB min-zipped in browser
  • TypeScript and TSX support built-in
  • Custom Elements Registry (window.TagRegistry)
    window.TagRegistry.getEntry("myComponent")
    // => { from: class MyComponent..., nodes: Array<HTMLElement> }

Why does the project exist in the first place??

Because custom elements need to be much more powerful than they are now. So a little library like this can make a difference.

Documentation

Head over to https://teddy.js.org/docs

Try it out

Browser

You don't need ES6 to run TeddyTags... https://git.io/teddytags-es5

<!-- UMD -->
<script src="https://unpkg.com/teddytags@latest/lib/teddytags.umd.js"></script>
<!-- ESM -->
<script type="module">
  import * as TeddyTags from "https://unpkg.com/teddytags@latest/lib/teddytags.js";
</script>

NPM

> npm i teddytags
> yarn add teddytags

Insights

Build Status Coverage Status

npm

gzip size

brotli size

Browser Matrix