Skip to main content

Teddytags logo

The superfast way to custom elements.

Name the HTML tags your own.

  • Out-of-box custom elements (<myElement />)
  • Virtual Components (Like those of React)
/** @jsx teddy.h */
import teddy from "teddytags";
class MyComponent extends teddy.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h1>Hello, myself!</h1>;
  }
}
  • Bind virtual components to the DOM
import { Tag } from "teddytags";
//MyComponent is defined in above example
new Tag("MyComponent").fromComponent(MyComponent);

and use it.

<MyComponent></MyComponent>
  • Superb and extra-simple diff algorithm
  • State implementation in Class Components
  • 1.5kB min-gzipped in browser
  • TypeScript and TSX support built-in
Build Status Coverage Status

npm

gzip size

brotli size

Browser Matrix

Documentation

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

What should you not be worried of

1. Polyfills??

TeddyTags just need five polyfills and which are also shipped with it:

✔️ Array.includes

✔️ String.startsWith

✔️ Object.assign

✔️ NodeList.forEach

So you can just plug this script and rock the way in any ES5 compatible browser

<script src="https://unpkg.com/teddytags@latest/lib/umd.js"></script>