Playhtml is a lightweight (~300KB), library-agnostic JavaScript library that enables the creation of interactive and collaborative HTML elements with persistent state. It targets developers seeking to easily add shared, dynamic functionality to web pages, offering a fast and expressive way to build real-time collaborative experiences without complex framework integrations.

How It Works

The library leverages a single data- attribute to imbue HTML elements with collaborative capabilities. It supports scoped reactive data per element, page-level shared data channels, and per-user presence. Playhtml offers flexible synchronization and persistence options, ranging from local storage to real-time syncing. Its can-play system allows developers to define custom interactive behaviors using standard HTML, CSS, and JavaScript, making it highly extensible.

Quick Start & Requirements

• Primary install / run command: Include via CDN (e.g., unpkg.com/playhtml) for vanilla HTML/JS, or use the @playhtml/react package for React-based frameworks.
• Non-default prerequisites and dependencies: Standard web browser environment.
• Links: Live demos are available at playhtml.fun/experiments/one/. A prompting guide for AI assistants is in docs/llm-prompting-guide.md.

Highlighted Details

• Small Footprint: Approximately 300KB.
• Library-Agnostic: Seamless integration with vanilla JavaScript and popular frameworks.
• Custom Capabilities (can-play): Enables building unique interactive elements with HTML, CSS, and JS.
• Cross-Page/Domain State: Supports sharing element state across different pages and domains.
• Page-Level Data: createPageData() facilitates collaborative state management independent of DOM elements.
• Presence & Cursors: Integrated real-time user presence and cursor tracking features.

Maintenance & Community

The project is in beta and active development. A Discord community is available for support and showcasing projects. Contributions are welcomed, and sponsorship/donations are encouraged to support ongoing maintenance and hosting costs.

Licensing & Compatibility

The specific open-source license is not detailed in the provided README. Compatibility is high due to its library-agnostic design.

Limitations & Caveats

The library is currently in beta. The can-mirror capability is experimental. Data is stored on a public Partykit instance without encryption, posing a security concern for sensitive data. Certain functionalities like can-move have display limitations, and specific array mutation operations are unsupported. Advanced features like value permissioning and robust data persistence options are planned for future releases.