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

1.1.2 • 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 featurefull 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 age platforn 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 is 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 perfomant 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

Easiest way to try Symbiote.js is to create 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*/ `
    <h2 set="textContent: count"></h2>
    <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.1.2





Unpacked Size

86.3 kB

Total Files


Last publish


  • nd0ut
  • symbiote-user
  • alex_sova