VJS-10 Monorepo

Modern, modular media player framework for web, React, and React Native

A monorepo for Video.js 10 related library packages, organized by platform and runtime environment with a clean dependency hierarchy.

🚧 Note to new viewers 🚧

[90s under-construction gif]

Thanks for checking out the project! It's in its early stages and currently a mix of protoyping and early structure pointing in the direction we want to go with Video.js v10 (so be kind 🙏).

Get up to speed

Read the v10 discussion topic
Watch Heff's recent presentation
More roadmap and architecture docs to come...

How you can help currently

Run the React and HTML demos
Give us feedback in a github issue on:
- The aesthetics of the player(s)
- The initial embed code and component structure
- The general direction

Thank you!

Quick Start

HTML / Vanilla JavaScript

npm install @vjs-10/html

<vjs-player src="video.mp4" controls poster="poster.jpg"></vjs-player>

React

npm install @vjs-10/react

import { VideoPlayer } from '@vjs-10/react';

<VideoPlayer src="video.mp4" controls poster="poster.jpg" />

React Native

npm install @vjs-10/react-native

import { VideoPlayer } from '@vjs-10/react-native';

<VideoPlayer source={{ uri: 'video.mp4' }} controls />

Structure

vjs-10-monorepo/
├── packages/
│   ├── core/               # Runtime-agnostic packages
│   │   ├── media-store/    # State abstraction for media
│   │   ├── playback-engine/# Abstraction for media source management
│   │   ├── media/          # HTMLMediaElement contracts and utilities
│   │   └── icons/          # Environment-agnostic SVG icons
│   ├── html/               # DOM/Browser packages
│   │   ├── html-icons/     # HTML/DOM icon components
│   │   ├── html-media-elements/ # HTML media element components
│   │   ├── html-media-store/    # HTML media store integration
│   │   └── html/           # Complete HTML UI library
│   ├── react/              # React packages
│   │   ├── react-icons/    # React icon components
│   │   ├── react-media-elements/ # React media element components
│   │   ├── react-media-store/   # React media store hooks and context
│   │   └── react/          # Complete React UI library
│   └── react-native/       # React Native packages
│       ├── react-native-icons/  # React Native icon components
│       ├── react-native-media-elements/ # React Native media components
│       └── react-native/   # Complete React Native UI library
├── examples/               # Demo applications
└── website/                # Astro-based website (docs & blog)

Packages

Core Packages (Runtime Agnostic)

Foundation packages that work in any JavaScript environment.

Package	Description	Links
@vjs-10/media-store	Reactive state management for media players	README
@vjs-10/playback-engine	Abstraction layer for streaming engines (HLS.js, Dash.js)	README
@vjs-10/media	HTMLMediaElement contracts and utilities	README
@vjs-10/icons	SVG icon source library	README
@vjs-10/core	Core UI components (sliders, utilities)	README

HTML/DOM Packages

Web Components and DOM-specific implementations.

Package	Description	Links
@vjs-10/html-icons	Web Component icon elements	README
@vjs-10/html-media-elements	Enhanced media element Web Components	README
@vjs-10/html-media-store	DOM integration for media store	README
@vjs-10/html	Complete HTML media player library	README

React Packages

React components, hooks, and integrations.

Package	Description	Links
@vjs-10/react-icons	React icon components	README
@vjs-10/react-media-elements	React media element components and hooks	README
@vjs-10/react-media-store	React hooks and context for media state	README
@vjs-10/react	Complete React media player library	README

React Native Packages

React Native components and integrations (coming soon).

Package	Description
@vjs-10/react-native-icons	React Native icon components (requires react-native-svg)
@vjs-10/react-native-media-elements	React Native media components (requires react-native-video)
@vjs-10/react-native	Complete React Native media player library

Getting Started

Installation

nvm use

pnpm install

Building

Build all packages:

pnpm build

Build specific packages:

pnpm -F media build

pnpm -F html build
pnpm -F html-icons build

pnpm -F react build
pnpm -F react-icons build

Development

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Build only library packages (excludes examples)
pnpm build:libs

# Run type checking
pnpm typecheck

# Run linting
pnpm lint

# Run all dev servers in parallel
pnpm dev

# Run specific dev servers
pnpm dev:html    # HTML demo
pnpm dev:react   # React demo
pnpm dev:website # Website (docs & blog)

Architecture & Design Philosophy

Dependency Hierarchy

The monorepo follows a strict dependency hierarchy to ensure modularity and prevent circular dependencies:

Core Packages (runtime-agnostic)
    ↓
Platform Packages (HTML, React, React Native)
    ↓
Complete UI Libraries

Rules:

Core packages have no dependencies on other vjs-10 packages
HTML packages depend only on core packages
React packages depend only on core packages (peer dependency on React)
React Native packages depend only on core packages (peer dependencies on React Native ecosystem)

This ensures:

Maximum code reusability across platforms
Clear separation of concerns
No circular dependencies
Tree-shakeable, modular architecture

Key Design Decisions

State Management - Built on nanostores for minimal, reactive state that works across all platforms.

Streaming Support - HLS.js integration for adaptive bitrate streaming, with extensible design for DASH.js and other engines.

Web Components - Standards-based custom elements for HTML/DOM implementation, ensuring framework-agnostic usage.

TypeScript First - Full TypeScript support with strict type checking across all packages.

Accessibility - WCAG 2.1 AA compliance with keyboard navigation, ARIA attributes, and screen reader support.

TypeScript

All packages are written in TypeScript and use project references for efficient compilation. The monorepo uses a shared tsconfig.base.json for consistent compiler options across all packages.

Key TypeScript features:

Strict mode enabled with additional checks
Path mappings for all @vjs-10/* packages
Composite builds for incremental compilation
Full type definitions included

Features

✅ HLS Streaming - Built-in support via HLS.js
✅ Web Components - Standards-based custom elements
✅ React Integration - Full React component library
✅ State Management - Reactive state with nanostores
✅ TypeScript - Complete type definitions
✅ Accessible - WCAG 2.1 AA compliant
✅ SSR Ready - Works with Next.js, Remix, etc.
✅ Tree-shakeable - Modular architecture
🚧 DASH Streaming - Coming soon
🚧 React Native - Coming soon
🚧 Vue Components - Coming soon
🚧 Svelte Components - Coming soon

Contributing

Contributions are welcome! Please read our CLAUDE.md for development guidelines and architecture details.

Development Workflow

Clone the repository

git clone https://github.com/videojs/vjs-10-monorepo.git
cd vjs-10-monorepo

Install dependencies
```
pnpm install
```
Build packages
```
pnpm build
```

Run development servers

pnpm dev          # All demos in parallel
pnpm dev:html     # HTML demo only
pnpm dev:react    # React demo only
pnpm dev:website  # Website only

Make your changes
- Follow Conventional Commits for commit messages
- Add tests if applicable
- Update documentation as needed
Submit a pull request

Commit Message Format

We use Conventional Commits:

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

Types: feat, fix, docs, style, refactor, test, chore

Examples:

feat(react): add picture-in-picture component
fix(media-store): correct time sync issue
docs(html): update component API documentation

Getting Help

Documentation - Website (coming soon)
GitHub Discussions - v10 Discussion
Issues - Report bugs or request features

Related Projects

Video.js - Video.js 8.x (current stable)
HLS.js - HLS streaming library
nanostores - State management

License

Apache-2.0

Copyright (c) Video.js Contributors

Name		Name	Last commit message	Last commit date
Latest commit History 147 Commits
.claude		.claude
.github/workflows		.github/workflows
.vscode		.vscode
docs		docs
examples		examples
packages		packages
website		website
.gitignore		.gitignore
.mcp.json		.mcp.json
.node-version		.node-version
.npmrc		.npmrc
.nvmrc		.nvmrc
.prettierignore		.prettierignore
.prettierrc.cjs		.prettierrc.cjs
CLAUDE.md		CLAUDE.md
README.md		README.md
bbb.mp4		bbb.mp4
cspell.json		cspell.json
eslint.config.mjs		eslint.config.mjs
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
tsconfig.base.json		tsconfig.base.json
tsconfig.json		tsconfig.json
turbo.json		turbo.json

muxinc/vjs-10-monorepo

Folders and files

Latest commit

History

Repository files navigation

VJS-10 Monorepo

🚧 Note to new viewers 🚧

Get up to speed

How you can help currently

Quick Start

HTML / Vanilla JavaScript

React

React Native

Structure

Packages

Core Packages (Runtime Agnostic)

HTML/DOM Packages

React Packages

React Native Packages

Getting Started

Installation

Building

Development

Architecture & Design Philosophy

Dependency Hierarchy

Key Design Decisions

TypeScript

Features

Contributing

Development Workflow

Commit Message Format

Getting Help

Related Projects

License

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Contributors 7

Uh oh!

Languages

Packages