Home - Snice

Beautiful decorators for custom elements

Write clean, reactive web components with TypeScript decorators. No framework. No virtual DOM. Just the platform, made elegant.

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>
    `;
  }
}
// Reactive: auto-renders on property change

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

  @query('.name') $name!: HTMLElement;
  @query('.role') $role!: HTMLElement;

  @render({ once: true })
  template() {
    return html`
      <div class="card">
        <h3 class="name">${this.name}</h3>
        <span class="role">${this.role}</span>
      </div>
    `;
  }

  @watch('name', 'role')
  update() {
    if (!this.$name) return;
    this.$name.textContent = this.name;
    this.$role.textContent = this.role;
  }
}
// Direct DOM: you control updates

@elementDefine custom elements with a single decorator

@render & @stylesReactive templates and scoped CSS

@state & templatesDeep state, explicit bindings, keyed flow, and async values

@page & @layoutBuilt-in routing, guards, and layouts

3 Ways to Use Snice

ESM + Bundler Use what you need, bundle what you need. npm install snice CDN Load the runtime once, then drop in components. No bundler needed.

<script src="snice-runtime.min.js?v=80938d7">
<script src="snice-button.min.js?v=80938d7">

React Wrappers First-class React adapters with prop mapping, events, and refs. import { Button } from 'snice/react'

Quick Start

Snice App

Routing, auth, guards, middleware, services

npx snice create-app my-app

React + Snice

React router, hooks, guards, layouts

npx snice create-app my-app --template=react

AI-Assisted Development

Install the Snice skill in your project so coding agents can choose the right components and follow the framework’s patterns.

npx snice init-ai