🧩 Custom Elements Runtime

Ultra-powerful, 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.

🕹️ Try it on Codepen.io.

✨ 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
    class="px-4 py-2 bg-blue-500 text-white rounded"
    @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
• Router
• Event Bus
• Template

🧩 Reactivity & Patterns

• Directives
• Directive Enhancements Guide
• Bindings
• Events
• Slot
• Typing Components
• 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.
• ❤️ Like what you see? Support ongoing development on Patreon

💖 Support This Project

Custom Elements Runtime is a labor of love built to make modern web development faster and more expressive. If it's helping you build better components, consider supporting me on Patreon to help keep the momentum going.

Your support helps fund continued development, documentation, and community engagement. Every bit helps—thank you!