Tan Compose

Build production-ready web components with declarative syntax

Lightweight • Type-safe • Zero dependencies

Get Started

View Examples

GitHub

Why Tan Compose?

Quick Start

Installation

npm install tan-compose

Create Your First Component

import { describe, build } from 'tan-compose';

const button = describe({
  tag: 'button',
  styles: {
    padding: '12px 24px',
    backgroundColor: '#667eea',
    color: 'white',
    border: 'none',
    borderRadius: '8px',
    cursor: 'pointer'
  },
  action: () => alert('Hello, Tan Compose!')
});

build('my-button', button);

Use It

<my-button>Click Me</my-button>

Live Demo

Try these interactive components built with Tan Compose

Interactive Counter

Themed Buttons

Custom Card

Core API

build(tagName, description)

Registers a new custom element with the browser.

describe(options)

Creates a component description with properties like:

tag - HTML element type
theme - CSS variables for theming
styles - Inline styles object
template - HTML template string
children - Nested components
action - Event handler
beforeMount / afterMount - Lifecycle hooks
emit - Custom events