The superfast way to custom elements.

Usage no npm install needed!

<script type="module">
  import teddytags from 'https://cdn.skypack.dev/teddytags';


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",


  • 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) {
  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>
  • 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)
    // => { 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.


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

Try it out


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";


> npm i teddytags
> yarn add teddytags


Build Status Coverage Status


gzip size

brotli size

Browser Matrix