Symbiote.js

DX-Extension for Native Custom Elements

What Makes It Different?

Symbiote.js isn't just another frontend library - it's a groundbreaking approach to web development that harnesses the full power of native web technologies.

Here's what sets it apart:

Pure DOM Extension

Unlike frameworks that create opaque abstractions and complex runtime environments, Symbiote.js extends the native DOM API directly. This means:

No Black Box Magic: What you write is exactly what runs in the browser
Native Performance: Directly leverages the browser's built-in optimizations
Zero Framework Lock-in: Seamlessly integrates with any other web technology
Ultralight Footprint: Just ~6kb (br/gzip)
No External Dependencies: Uses only native web platform features
Direct DOM Integration: Symbiote components are actual DOM elements - interact with them using standard DOM methods
HTML + CSS + JS: Everything you need for robust, enterprise-ready development

Simple HTML String Templates

Symbiote.js takes a refreshingly straightforward approach to templating:

Pure HTML: Standard tags and attributes with intuitive reactivity syntax
Template System Agnostic: Works with any templating system or server-side technology
Unmatched Flexibility: Define templates anywhere in your workflow
SSR Optimized: Perfect for server-side rendering and static site generation
Seamless Framework Integration: Easily integrates with React, Vue, Angular, or any framework
Enterprise-Grade Scalability: Powerful enough for applications of any complexity

// Define templates anywhere
const myTemplate = html`
  <div class="my-component">
    <h1>{{title}}</h1>
    <div>{{content}}</div>
  </div>
`;

// Use with any server-side technology
const serverTemplate = /*html*/ `
  <div class="server-rendered">
    <h1 bind="textContent: title">SSR Title</h1>
    <div bind="textContent: content">SSR Content</div>
  </div>
`;

DOM-Based Data Context

Symbiote.js introduces an innovative approach to component communication and state management:

Intuitive Data Flow: Leverages DOM structure as the natural foundation for data context
Flexible Context Composition: Components share data based on their position in the DOM
CSS-Like Cascade Model: Properties are intelligently inherited from parent components
Efficient Shared Contexts: Components share state without tight coupling
Powerful Named Contexts: Create application-wide data sources accessible by name

// Inherited context (^)
html`<button ${{onclick: '^onButtonClicked'}}>Click me!</button>`;

// Shared context (*)
html`<div>{{*sharedProperty}}</div>`;

// Named context (/)
html`<div>{{APP/someProperty}}</div>`;

Perfect For

Widgets
Complex interactive components
Micro frontend architectures
Reusable component libraries
High-performance web applications
Framework-agnostic solutions
Meta-applications
JamStack / Hybrid solutions

Core Benefits

Loosely Coupled Architecture
Ultralight: Only ~6kb (br/gzip)
Lightning Fast: Native DOM performance
Memory Efficient: No wasteful immutables
Enterprise-Ready: CSP compliant
Type-Safe: Full TypeScript support
Developer-Friendly: Intuitive concepts
Universally Compatible: Works with any stack
Resource Conscious: Automatic cleanup
Modern JS: Native ESM support
Open Source: MIT licensed

Get Started

<script type="importmap">
  {
    "imports": {
      "@symbiotejs/symbiote": "https://esm.run/@symbiotejs/symbiote"
    }
  }
</script>

<script type="module">
  import Symbiote, { html, css } from '@symbiotejs/symbiote';

  export class MyComponent extends Symbiote {

    // Initialize state:
    init$ = {
      count: 0,
      increment: () => {
        this.$.count++;
      },
    }

  }

  // Define template:
  MyComponent.template = html`
    <h2>{{count}}</h2>
    <button ${{onclick: 'increment'}}>Click me!</button>
  `;

  // Add styles:
  MyComponent.rootStyles = css`
    my-component {
      color: #f00;
    }
  `;

  // Register the custom element:
  MyComponent.reg('my-component');
</script>

<my-component></my-component>

This complete HTML example shows everything you need to run a Symbiote.js application. While this demonstrates core concepts, real-world projects can leverage any development toolchain including TypeScript, bundlers, linters and other modern tooling.