Corset — Cascading Binding Sheets

Matthew Philips made something odd-looking: a JavaScript framework that lets you add DOM bindings using a CSS-like syntax.

Say your framework of choice generates this markup:

<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>

Using Corset, you can then add behavior as follows:

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);
      }
    `;
  }
});

Here’s a working demo using the code posted above:

See the Pen
Counter example by Matthew Phillips (@matthewp)
on CodePen.

This Twitter thread by the author holds some good information and reasoning behind it all:

Announcing Corset, a new approach to declarative DOM binding! https://t.co/21lbrF7BMc

Corset is an alternative to frameworks like React and Vue. Instead of JSX/templates, you use a CSS-like DSL to bind to the DOM that already exists.

This difference has profound implications 👇🏼

— Matthew Phillips (@matthewcp) March 11, 2022

Corset — Cascading Binding Sheets →