Corset
Cascading binding sheets

Reactive UI without the complexity of SPA frameworks. Use any backend you like; bind to the HTML you already produced.

Bring your HTML to life.

Corset binds JavaScript to HTML. It doesn't matter how the HTML is produced and Corset doesn't need to own your templating choice. Instead it uses a CSS-like syntax to enhance whatever you give it.

HTML
<div class="counter">
  <button
    type="button"
    class="increment">Increment</button>
  <button
    type="button"
    class="decrement"
    disabled>Decrement</button>

  <div
    class="result">
    Count: <strong class="count">0</strong>
  </div>
</div>
JavaScript with Corset
import sheet, { mount } from 'https://cdn.corset.dev/v1';

mount(document, class {
  count = 0;

  bind() {
    const { count } = this;

    return sheet`
      .counter {
        --count: ${count};
        --inc: ${() => this.count = count + 1};
        --dec: ${() => this.count = count - 1};
      }
      
      .count {
        text: var(--count);
      }
      
      .increment {
        event[click]: var(--inc);
      }
      
      .decrement {
        attr-toggle[disabled]: ${count === 0};
        event[click]: var(--dec);
      }
    `;
  }
});
CodePen 👉

Expressive

Inherits from CSS syntax, providing straightfoward ways to bind to DOM for every scenario you have.

Performant

Optimized to only recompute when something changes in your sheet, preventing you from worrying about performance.

Decoupled

Corset is based on progressive enhancement, an industry best practice, and doesn't care or need to know how you build your backend.

Sponsors