Headlessplayback

A simple yet complete playback library designed for UI frameworks or even without

Architecture

• Headless UI
• Bridge design pattern
• Plugin-based system
• Minimal API surface to avoid breaking changes
• Embrace the web platform APIs
• Avoid framework-specific locked-in APIs

Technology decisions

• Changesets - for versioning
• Happy-dom - for node-based browser testing environment
• Tsup - for bundling libraries
• Turbo - for remote-caching build system
• Github Actions - for CI/CD
• Netlify - for hosting
• TypeScript - for type safety
• Vite - for examples application
• Vitepress - for documentation
• Vitest - for unit and integration testing

Development

git clone https://github.com/willnguyen1312/headlessplayback
cd headlessplayback
pnpm install

Commands

With Docs

pnpm start-docs

With Preact

pnpm start-preact

With React

pnpm start-react

With Svelte

pnpm start-svelte

With Vanilla JS

pnpm start-vanilla

With Vue

pnpm start-vue

With Solid

pnpm start-solid

With Qwik

pnpm start-qwik

Roadmap

• ✅ Add examples
• ✅ Implement core logic
• ✅ Implement framework adapters
• ✅ Implement some common-use plugins such as data streaming
• ✅ Write documentation

Supported framework adapters

• ✅ Vue
• ✅ Preact
• ✅ Svelte
• ✅ Solid
• ✅ React
• ✅ Qwik

Inspiration

• Tanstack - A collection of high-quality open source libraries for web developers
• Zag - A collection of framework-agnostic UI component patterns
• Day.js - A modern JavaScript date utility library
• VueUse - Collection of Essential Vue Composition Utilities
• Radix UI - A collection of open source UI components
• Building a modern design system in layers
• UI frameworks and Media Elements 🎧

Sponsor

License

MIT © Nam Nguyen