Introduction

What is Esor?

Esor is a modern, minimalistic web framework based on Web Components, designed to create high-performance, interactive user interfaces. It combines the power of native web standards with an elegant responsive system, offering a smooth and productive development experience.

import { component, html, signal } from "esor";

component("hello-world", () => {
  return html`<h1>¡Hola, mundo!</h1>`;
});

// or so you just need to return html with interpolation

component("hello-world", ({ name }) => html`<h1>¡Hola, ${name}!</h1>`);

WARNING

Esor is in version: beta, use it wisely, it is not yet ready for production.

Why Esor?

🚀 Exceptional Performance

Esor uses native Web Components and a fine-grained reactivity system, resulting in fast and efficient applications with minimal bundle size.

💡 Intuitive and Familiar

If you know HTML, CSS and JavaScript, you'll feel right at home. Esor takes familiar patterns and enhances them with modern features:

import { component, html, signal, effect } from "esor";

component("live-counter", () => {
  const count = signal(0);

  return html`
    <div class="counter">
      <p>Contador: <strong>${count}</strong></p>
      <button onclick=${() => count(count() + 1)}>+</button>
      <button onclick=${() => count(count() - 1)}>-</button>
    </div>
  `;
});

The component is shown below:

🔧 Flexible and Extensible.

• Uses modern web tools and standards
• Integrates seamlessly with other libraries
• Works with your favorite development tools

📦 Everything You Need, Nothing More

• Standards-based component system
• Granular responsiveness with signals
• Powerful and efficient template system
• Intuitive hooks for state and effect management
• Zero dependencies

Main features

🔌 Native Web Components

Reusable components based on web standards.

⚡ Granular Reactivity

System signals for accurate and efficient updates.

📝 Expressive Templates

Powerful declarative syntax for defining interfaces.

🎯 Developer Experience

Intuitive APIs and modern development tools.

Comparison with Other Frameworks

Feature	Esor	Lit	React
Base	Web Components	Web Components	Virtual DOM
Reactivity	Signals ⚡	Properties	Hooks
Performance	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐
Bundle Size	~3KB	~5KB	~40KB
Learning Curve	Download	Media	Media
Build Step	❌ Optional	❌ Optional	✅ Required
Bundler Needed	❌ No	❌ No	✅ Webpack/Vite
Ecosystem	En crecimiento	Maduro	Muy grande

Who is Esor for?

Esor is ideal for:

• 🎯 Developers who value simplicity and performance.
• 🔧 Projects that need reusable web components.
• 🚀 Applications that require high performance
• 📚 Teams that prefer modern web standards

Next Steps

• Quick Start Guide
• Examples

ADVICE

Esor is designed to be adopted gradually. You can start with a single component in your existing application and grow from there.

NOTE

Esor requires modern browsers that support Web Components. See the compatibility table for more details.