Snice

Web components with clear governance

Pages fetch data. Elements render UI. Controllers swap behavior. Keep your code where it belongs.

npm install snice 
@element('user-card')
class UserCard extends HTMLElement {
  @property() name = '';
  @property() role = '';

  @render()
  template() {
    return html`
      <div class="card">
        <h3>${this.name}</h3>
        <span>${this.role}</span>
      </div>
    `;
  }
}
// <user-card name="Alice" role="Engineer">
PagesFetch data, understand intent
ElementsPure UI, no business logic
ControllersSwap behavior at runtime
ContextGlobal state, one place