TypeScript icon, indicating that this package has built-in type declarations

1.4.3 • Public • Published


Ultralight and ultrapowerful library to create widgets, organize micro-frontends, build reusable embeddable components and libraries. Everything you need for your modern web application!

🔥 Core benefits

  • Minimalistic but reach.
  • No additional dependencies.
  • Ultralight (~3kb br/gzip for featureful CDN version).
  • Blazing fast (faster than most of the other mainstream solutions; all of them).
  • Memory friendly (no any redux-like immutables).
  • CSP friendly - good for enterprise usage.
  • Highly extensible.
  • Easy to learn - nothing completely new for experienced developers, nothing complicated for newbies.
  • Works in all modern browsers. As is.
  • Easy to test.
  • TypeScript friendly - use it in TS or JS projects from the common source code.
  • Integration friendly: works with any modern development stack.
  • Lifecycle control: no need to initiate something from outside.
  • ESM friendly - native JavaScript modules are best!
  • Developer Experience on the mind: compact & convenient APIs, habitual syntax.
  • Open source (MIT license).

💎 Tech concept keypoints

  • Native DocumentFragment instead of expensive Virtual DOM sync.
  • Shadow DOM is optional. Use it when you need it only.
  • Styling approach: total freedom, from the old classics to the cutting edge platform abilities.
  • Native HTML and DOM API instead of expensive custom template syntax processing.
  • Templates are out of the component or render function context. It’s just a simple JavaScript template literals. So you can keep or process them wherever you want.
  • No logical operators in templates. Logic and presentation are strictly separated.
  • Fast synchronous UI updates.
  • Full data context access from the document structure.
  • Full data context availability for template bindings.
  • DOM API friendly approach for the most performant solutions.
  • Convenient object model access instead of opaque abstractions.
  • Custom Elements work strange sometimes. Don’t worry about that, we do (construction flow).

🍏 Quick start

The easiest way to try Symbiote.js is to create a simple html file in your text editor and connect the Symbiote base class from web:

<script type="module">
  import { BaseComponent } from 'https://symbiotejs.github.io/symbiote.js/core/BaseComponent.js';

  class MyComponent extends BaseComponent {
    init$ = {
      count: 0,
      increment: () => {

  MyComponent.template = /*html*/ `
    <button set="onclick: increment">Click me!</button>



This code can work directly in any modern browser, so you don't need to install anything to try it!

🧜‍♀️ Dive deeper

🤖 Live examples

Browser: https://symbiotejs.github.io/examples/

Use devtools to discover details

GitHub: https://github.com/symbiotejs/examples

Browser support

Symbiote.js is supported and tested in all major modern desktop and mobile browsers:

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Opera
  • etc.

Internet Explorer - is outdated and not supported anymore:


(But it's possible with polyfills: https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs)

💰 General sponsor

Big thanks to 🟡 Uploadcare for supporting this project!


🌎 Useful external links

If you have questions or proposals - welcome to Symbiote Discussions! ❤️


npm i @symbiotejs/symbiote@1.4.3





Unpacked Size

116 kB

Total Files


Last publish


  • nd0ut
  • symbiote-user
  • alex_sova