Snowcap.js

A minimal JavaScript reactive framework inspired by Alpine.js, designed for simplicity and ease of use.

Features

• Reactive data binding with Vue.js reactivity system (@vue/reactivity)
• Directive based syntax similar to Alpine.js (s-text, s-show, s-model, s-bind, s-on, s-html, s-if, s-for)
• Additional directives like (s-copy)
• Supports custom directives and event handlers
• DOM walking and dynamic binding
• Lightweight and minimal footprint
• Easily extendable
• CDN support for quick prototyping
• Event modifiers support (.prevent, .stop, etc.)

📦 Installation

NPM

npm install snowcap

CDN

<script src="https://unpkg.com/snowcap"></script>

Quick Start

1. Add Snowcap to your project (NPM or CDN)
2. Initialize Snowcap:

import Snowcap from "snowcap";
window.Snowcap = Snowcap;
Snowcap.start();

1. Use directives in your HTML:

<div s-data="{ count: 0 }">
  <button @click="count++">Increment</button>
  <p s-text="count"></p>
</div>

Documentation

For detailed documentation, examples, and best practices, please refer to DOCUMENTATION.md.

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - feel free to use this project in any way you want.

Credits

• Inspired by Alpine.js
• Uses Vue's Reactivity System