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