🧩 Custom Elements Runtime

Ultra-lightweight, type-safe runtime for fast, reactive, and maintainable web components.

Build modern components with strict TypeScript, zero dependencies, and a clean functional API. Designed for speed, standards compliance, and productivity.

🚧 Active Development Notice

⚠️ This package is in active development and not yet ready for production use. Features, APIs, and stability may change frequently. Please use for testing, experimentation, or contribution only.

✨ Why You'll Love It

• ⚡ Blazing Fast: Minimal runtime, instant updates, zero dependencies.
• 🎨 JIT CSS: On-demand, utility-first styling directly in your HTML at runtime.
• 💪 No Build Necessary: Instant development feedback, no bundling required.
• 🧑‍💻 TypeScript First: Strict types, intellisense, and safety everywhere.
• 🧩 Functional API: No classes, no boilerplate—just pure functions.
• 🛠️ SSR & HMR Ready: Universal rendering and instant hot reloads.
• 🔌 Extensible: Directives, event bus, store, and more for advanced use cases.
• 🏆 Developer Friendly: Clean docs, examples, and a welcoming community.

⏱️ Getting Started

1. Install: npm install @jasonshimmy/custom-elements-runtime
2. Create a Component:

import { component, html } from '@jasonshimmy/custom-elements-runtime';

component('my-counter', (ctx) => html`
  <button
    @click="${() => ctx.count++}"
  >Count: ${ctx.count}</button>
`, { state: { count: 0 } });

3. Use in HTML:

<my-counter></my-counter>

4. Enjoy instant reactivity and type safety!

📖 Documentation Index

Explore the full documentation for every runtime feature:

🏗️ Core Concepts

• Component Config
• Component
• Render
• Props
• State
• Computed
• Watch
• Store
• Event Bus
• Template

🧩 Reactivity & Patterns

• Directives
• Bindings
• Directives & Binding
• Slot
• Advanced Usage Patterns
• Cross-Component Communication

🎨 Styling

• Style
• Deep Dive: JIT CSS

⚡ Performance & Architecture

• Virtual DOM
• HMR
• SSR

🛡️ Error Handling & Lifecycle

• Error
• Hooks
• Method Injection

🧰 Utilities & Troubleshooting

• Troubleshooting

🔗 Framework Integration

• Vue Integration
• React Integration
• Svelte Integration
• Angular Integration

For deep dives, see each guide above or browse the source code in src/lib/.

🧑‍🔬 Real-World Examples

• Form Input & Validation
• Minimal Example
• Shopping Cart
• Todo App

🌟 Showcase & Community

• Showcase your components! Open a PR to add your project to our gallery.
• Questions or ideas? Start a discussion or open an issue.
• Contribute: We welcome PRs for docs, features, and examples.

🛠 Local Dev

# Clone the repo
git clone <repo-url>

# Run examples
npm run dev