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