diff --git a/site/src/components/installation/HTMLUsageCodeBlock.tsx b/site/src/components/installation/HTMLUsageCodeBlock.tsx
new file mode 100644
index 00000000..a3bf67bc
--- /dev/null
+++ b/site/src/components/installation/HTMLUsageCodeBlock.tsx
@@ -0,0 +1,107 @@
+import { useStore } from '@nanostores/react';
+import ClientCode from '@/components/Code/ClientCode';
+import { Tab, TabsList, TabsPanel, TabsRoot } from '@/components/Tabs';
+import type { Renderer, Skin, UseCase } from '@/stores/installation';
+import { muxPlaybackId, renderer, skin, useCase } from '@/stores/installation';
+
+function getRendererTag(renderer: Renderer): string {
+ const map: Record
= {
+ cloudflare: 'cloudflare-video',
+ dash: 'dash-video',
+ hls: 'hls-video',
+ 'html5-audio': 'audio',
+ 'html5-video': 'video',
+ jwplayer: 'jwplayer-video',
+ mux: 'mux-video',
+ shaka: 'shaka-video',
+ spotify: 'spotify-audio',
+ videojs: 'videojs-video',
+ vimeo: 'vimeo-video',
+ wistia: 'wistia-video',
+ youtube: 'youtube-video',
+ };
+ return map[renderer];
+}
+
+function getProviderTag(useCase: UseCase): string {
+ const map: Record = {
+ website: 'website-player-provider',
+ 'background-video': 'background-video-player-provider',
+ };
+ return map[useCase];
+}
+
+function getSkinTag(skin: Skin): string {
+ const map: Record = {
+ frosted: 'frosted-video-skin',
+ minimal: 'minimal-video-skin',
+ };
+ return map[skin];
+}
+
+function getRendererElement(renderer: Renderer, playbackId: string | null): string {
+ const tag = getRendererTag(renderer);
+
+ // When renderer is 'mux' and we have a playback ID, use playback-id attribute
+ if (renderer === 'mux' && playbackId) {
+ return `<${tag} playback-id="${playbackId}">`;
+ }
+
+ // Default: use src attribute placeholder
+ return `<${tag} src="...">`;
+}
+
+function generateHTMLCode(useCase: UseCase, skin: Skin, renderer: Renderer, playbackId: string | null): string {
+ const providerTag = getProviderTag(useCase);
+ const skinTag = getSkinTag(skin);
+ const rendererElement = getRendererElement(renderer, playbackId);
+
+ return `
+<${providerTag}>
+
+ <${skinTag}>
+
+ ${rendererElement}
+
+`;
+}
+
+function generateJS(skin: Skin): string {
+ return `import '@videojs/html/skins/${skin}';`;
+}
+
+export default function HTMLUsageCodeBlock() {
+ const $useCase = useStore(useCase);
+ const $skin = useStore(skin);
+ const $renderer = useStore(renderer);
+ const $muxPlaybackId = useStore(muxPlaybackId);
+
+ return (
+
+
+
+ HTML
+
+ JavaScript
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/site/src/components/installation/JSPicker.astro b/site/src/components/installation/JSPicker.astro
new file mode 100644
index 00000000..c0e1ec08
--- /dev/null
+++ b/site/src/components/installation/JSPicker.astro
@@ -0,0 +1,13 @@
+---
+import type { SupportedFramework, SupportedStyle } from '@/types/docs';
+import JSPickerClient from './JSPickerClient';
+
+const { framework, style, slug } = Astro.params;
+---
+
+}
+ currentSlug={slug as string}
+/>
diff --git a/site/src/components/installation/JSPickerClient.tsx b/site/src/components/installation/JSPickerClient.tsx
new file mode 100644
index 00000000..8b2f2e7f
--- /dev/null
+++ b/site/src/components/installation/JSPickerClient.tsx
@@ -0,0 +1,53 @@
+import { Atom, Globe } from 'lucide-react';
+import type { ReactNode } from 'react';
+import ImageRadioGroup from '@/components/ImageRadioGroup';
+import type { SupportedFramework, SupportedStyle } from '@/types/docs';
+import { FRAMEWORK_LABELS, isValidFramework, SUPPORTED_FRAMEWORKS } from '@/types/docs';
+import { resolveFrameworkChange } from '@/utils/docs/routing';
+
+const FRAMEWORK_IMAGES: Record = {
+ react: ,
+ html: ,
+};
+
+interface Props {
+ currentFramework: SupportedFramework;
+ currentStyle: SupportedStyle;
+ currentSlug: string;
+}
+
+export default function JSPickerClient({ currentFramework, currentStyle, currentSlug }: Props) {
+ // TODO: use astro view transitions to preserve scroll position when switching from the same slug to the same slug
+ const handleFrameworkChange = (newFramework: SupportedFramework | null) => {
+ if (newFramework === null) return;
+ if (!isValidFramework(newFramework)) return;
+
+ const { url, shouldReplace } = resolveFrameworkChange({
+ currentFramework,
+ currentStyle,
+ currentSlug,
+ newFramework,
+ });
+
+ if (shouldReplace) {
+ // Maintaining the current slug, navigate without pushing onto the history stack
+ window.location.replace(url);
+ } else {
+ // Changing slug, use normal navigation
+ window.location.href = url;
+ }
+ };
+
+ return (
+ ({
+ value: fw,
+ label: FRAMEWORK_LABELS[fw],
+ image: FRAMEWORK_IMAGES[fw],
+ }))}
+ aria-label="Select JS framework"
+ />
+ );
+}
diff --git a/site/src/components/installation/MuxUploaderPanel.tsx b/site/src/components/installation/MuxUploaderPanel.tsx
new file mode 100644
index 00000000..a343ddd4
--- /dev/null
+++ b/site/src/components/installation/MuxUploaderPanel.tsx
@@ -0,0 +1,226 @@
+import { actions } from 'astro:actions';
+import type MuxUploaderElement from '@mux/mux-uploader';
+
+import MuxUploader, {
+ MuxUploaderDrop,
+ MuxUploaderFileSelect,
+ MuxUploaderProgress,
+ MuxUploaderRetry,
+ MuxUploaderStatus,
+} from '@mux/mux-uploader-react';
+import { useCallback, useRef, useState } from 'react';
+import { muxPlaybackId, renderer } from '@/stores/installation';
+import { initiateAuthPopup } from '@/utils/mux/auth-flow';
+import { pollForPlaybackId } from '@/utils/mux/polling';
+import type { UploaderState } from './UploaderOverlay';
+
+import UploaderOverlay from './UploaderOverlay';
+
+// import './MuxUploaderPanel.module.css';
+
+/**
+ * Mux video uploader with auth-gated flow.
+ *
+ * Flow:
+ * 1. User drops/selects file → endpoint() called
+ * 2. Try to create upload URL (requires auth)
+ * 3. If 401: show login overlay, wait for auth, retry
+ * 4. Upload begins with returned URL
+ * 5. On success: poll for playback ID
+ * 6. When ready: update renderer to 'mux', store playback ID in nanostore
+ */
+export default function MuxUploaderPanel() {
+ // Local state for upload flow (not shared across islands)
+ // 'idle' | 'needs_login' | 'uploading' | 'preparing' | 'ready' | 'polling_error';
+ const [state, setState] = useState('idle');
+ const [error, setError] = useState(null);
+ const [uploadId, setUploadId] = useState(null);
+ const [playbackId, setPlaybackId] = useState(null);
+
+ // Ref to store the promise resolver for login flow
+ const loginResolverRef = useRef<((url: string) => void) | null>(null);
+ // Ref to the MuxUploader element for dispatching reset events
+ const uploaderRef = useRef(null);
+
+ /**
+ * Endpoint function called by MuxUploader when file is selected.
+ * Returns a Promise that resolves with the upload URL.
+ * The upload waits for this Promise before starting.
+ */
+ const getEndpoint = useCallback(async (): Promise => {
+ // Try to create upload - will fail with 401 if not authenticated
+ const result = await actions.mux.createDirectUpload({
+ corsOrigin: window.location.origin,
+ });
+
+ if (result.error) {
+ if (result.error.code === 'UNAUTHORIZED') {
+ // Not logged in - show login UI and wait for auth
+ setState('needs_login');
+
+ // Return a Promise that resolves when login completes
+ return new Promise((resolve) => {
+ loginResolverRef.current = resolve;
+ });
+ }
+
+ // Other error - throw and let MuxUploader display its native error UI
+ throw new Error(result.error.message);
+ }
+
+ // Authenticated - store upload ID and proceed
+ setUploadId(result.data.uploadId);
+ setState('uploading');
+ return result.data.uploadUrl;
+ }, []);
+
+ /**
+ * Handles OAuth login via popup.
+ * On success: fetches upload URL and resolves the pending Promise.
+ */
+ const handleLogin = useCallback(async () => {
+ const result = await actions.auth.initiateLogin();
+ if (result.error) {
+ setError(result.error.message);
+ setState('polling_error');
+ return;
+ }
+
+ initiateAuthPopup({
+ authorizationUrl: result.data.authorizationUrl,
+ onSuccess: async () => {
+ // Now authenticated - fetch upload URL
+ const uploadResult = await actions.mux.createDirectUpload({
+ corsOrigin: window.location.origin,
+ });
+
+ if (uploadResult.error) {
+ setError(uploadResult.error.message);
+ setState('polling_error');
+ return;
+ }
+
+ // Store upload ID and resolve the pending Promise
+ setUploadId(uploadResult.data.uploadId);
+ setState('uploading');
+ loginResolverRef.current?.(uploadResult.data.uploadUrl);
+ },
+ onError: (errorMessage) => {
+ setError(errorMessage);
+ setState('polling_error');
+ },
+ });
+ }, []);
+
+ /**
+ * Polls Mux API for playback ID after upload completes.
+ * Updates renderer to 'mux' and stores playback ID on success.
+ */
+ const handleUploadSuccess = useCallback(async () => {
+ if (!uploadId) return;
+
+ setState('preparing');
+
+ const result = await pollForPlaybackId({
+ uploadId,
+ getUploadStatus: async (id) => {
+ const response = await actions.mux.getUploadStatus({ uploadId: id });
+ if (response.error) {
+ return { error: { message: response.error.message } };
+ }
+ return {
+ data: {
+ status: response.data.status as 'waiting' | 'asset_created' | 'errored' | 'cancelled' | 'timed_out',
+ assetId: response.data.assetId,
+ },
+ };
+ },
+ getAssetStatus: async (assetId) => {
+ const response = await actions.mux.getAssetStatus({ assetId });
+ if (response.error) {
+ return { error: { message: response.error.message } };
+ }
+ return {
+ data: {
+ status: response.data.status as 'preparing' | 'ready' | 'errored',
+ playbackId: response.data.playbackId,
+ },
+ };
+ },
+ });
+
+ if (result.status === 'error') {
+ setError(result.message);
+ setState('polling_error');
+ return;
+ }
+
+ // Success! Update local state and nanostores (for cross-island use)
+ setPlaybackId(result.playbackId);
+ setState('ready');
+ renderer.set('mux');
+ muxPlaybackId.set(result.playbackId);
+ }, [uploadId]);
+
+ /** Resets uploader to try again after error */
+ const handleRetry = useCallback(() => {
+ // Reset MuxUploader's internal state
+ uploaderRef.current?.dispatchEvent(new CustomEvent('reset'));
+
+ // Reset React state
+ setState('idle');
+ setError(null);
+ setUploadId(null);
+ setPlaybackId(null);
+ }, []);
+
+ return (
+
+
+ {/* Custom Mux Uploader UI */}
+
+
+ Drop a video
+
+
+ — or —
+
+
+
+
+
+
+
+
+
+ {/* TODO add a pre-hydration loading state */}
+
+
+ );
+}
diff --git a/site/src/components/installation/ReactCreateCodeBlock.tsx b/site/src/components/installation/ReactCreateCodeBlock.tsx
new file mode 100644
index 00000000..bcde6720
--- /dev/null
+++ b/site/src/components/installation/ReactCreateCodeBlock.tsx
@@ -0,0 +1,103 @@
+import { useStore } from '@nanostores/react';
+import ClientCode from '@/components/Code/ClientCode';
+import { Tab, TabsList, TabsPanel, TabsRoot } from '@/components/Tabs';
+import type { Renderer, Skin, UseCase } from '@/stores/installation';
+import { muxPlaybackId, renderer, skin, useCase } from '@/stores/installation';
+
+function getRendererComponent(renderer: Renderer): string {
+ const map: Record = {
+ cloudflare: 'CloudflareVideo',
+ dash: 'DashVideo',
+ hls: 'HlsVideo',
+ 'html5-audio': 'Audio',
+ 'html5-video': 'Video',
+ jwplayer: 'JwplayerVideo',
+ mux: 'MuxVideo',
+ shaka: 'ShakaVideo',
+ spotify: 'SpotifyAudio',
+ vimeo: 'VimeoVideo',
+ wistia: 'WistiaVideo',
+ youtube: 'YoutubeVideo',
+ };
+ return map[renderer];
+}
+
+function getSkinComponent(skin: Skin): string {
+ const map: Record = {
+ frosted: 'FrostedVideoSkin',
+ minimal: 'MinimalVideoSkin',
+ };
+ return map[skin];
+}
+
+function getPresetAccess(useCase: UseCase): string {
+ if (useCase === 'website') {
+ return 'presets.website';
+ }
+ return `presets['${useCase}']`;
+}
+
+function generateReactCode(useCase: UseCase, skin: Skin, renderer: Renderer, playbackId: string | null): string {
+ const skinComponent = getSkinComponent(skin);
+ const rendererComponent = getRendererComponent(renderer);
+ const presetAccess = getPresetAccess(useCase);
+
+ // Determine props based on renderer + playbackId
+ const isMuxWithPlaybackId = renderer === 'mux' && playbackId;
+ const propsInterface = isMuxWithPlaybackId
+ ? 'interface MyPlayerProps {\n playbackId: string;\n}'
+ : 'interface MyPlayerProps {\n src: string;\n}';
+ const destructuredProp = isMuxWithPlaybackId ? 'playbackId' : 'src';
+ const rendererJsx = isMuxWithPlaybackId
+ ? `<${rendererComponent} playbackId={playbackId} />`
+ : `<${rendererComponent} src={src} />`;
+
+ return `// [your project] ./components/player/index.tsx
+import { createPlayer, presets, ${rendererComponent} } from '@videojs/react';
+import { ${skinComponent} } from '@videojs/react/presets/${useCase}';
+import '@videojs/react/presets/${useCase}/skins/${skin}.css';
+
+${propsInterface}
+
+// Set up the player state features
+const { PlayerProvider } = createPlayer(${presetAccess});
+
+export const MyPlayer = ({ ${destructuredProp} }: MyPlayerProps) => {
+ return (
+ {/* The Provider passes state between the UI components
+ and the Media, and makes fully custom UIs possible.
+ Does not render its own HTML element. */}
+
+ {/* Skins contain the entire player UI and are easily swappable.
+ They can each be "ejected" for full control and customization
+ of UI components. */}
+ <${skinComponent}>
+ {/* Media are players without UIs, handling networking
+ and display of the media.
+ They are easily swappable to handle different sources. */}
+ ${rendererJsx}
+
+
+ );
+};`;
+}
+
+export default function ReactCreateCodeBlock() {
+ const $useCase = useStore(useCase);
+ const $skin = useStore(skin);
+ const $renderer = useStore(renderer);
+ const $muxPlaybackId = useStore(muxPlaybackId);
+
+ return (
+
+
+
+ React
+
+
+
+
+
+
+ );
+}
diff --git a/site/src/components/installation/ReactUsageCodeBlock.tsx b/site/src/components/installation/ReactUsageCodeBlock.tsx
new file mode 100644
index 00000000..676c18db
--- /dev/null
+++ b/site/src/components/installation/ReactUsageCodeBlock.tsx
@@ -0,0 +1,40 @@
+import { useStore } from '@nanostores/react';
+import ClientCode from '@/components/Code/ClientCode';
+import { Tab, TabsList, TabsPanel, TabsRoot } from '@/components/Tabs';
+import type { Renderer } from '@/stores/installation';
+import { muxPlaybackId, renderer } from '@/stores/installation';
+
+function generateUsageCode(renderer: Renderer, playbackId: string | null): string {
+ const isMuxWithPlaybackId = renderer === 'mux' && playbackId;
+ const playerProp = isMuxWithPlaybackId ? `playbackId="${playbackId}"` : 'src="https://example.com/video.mp4"';
+
+ return `// HomePage.tsx
+import { MyPlayer } from '../components/player';
+
+export const HomePage = () => {
+ return (
+
+
Welcome to My App
+
+
+ );
+};`;
+}
+
+export default function ReactUsageCodeBlock() {
+ const $renderer = useStore(renderer);
+ const $muxPlaybackId = useStore(muxPlaybackId);
+
+ return (
+
+
+
+ React
+
+
+
+
+
+
+ );
+}
diff --git a/site/src/components/installation/RendererPicker.tsx b/site/src/components/installation/RendererPicker.tsx
new file mode 100644
index 00000000..d79ad493
--- /dev/null
+++ b/site/src/components/installation/RendererPicker.tsx
@@ -0,0 +1,25 @@
+import MuxUploaderPanel from './MuxUploaderPanel';
+import RendererSelect from './RendererSelect';
+
+export default function RendererPicker() {
+ return (
+
+
+
+
+ Or upload your media for free to{' '}
+
+ Mux
+
+
+
+
+
+ {children}
+
+ );
+}
+
+/**
+ * Renders state-based overlays on top of MuxUploader.
+ * - needs_login: Login prompt
+ * - preparing: Spinner while polling for playback ID
+ * - ready: Success message with playback ID
+ * - polling_error: Error during post-upload processing (MuxUploader handles upload errors natively)
+ */
+export default function UploaderOverlay({ state, error, playbackId, onLogin, onRetry }: UploaderOverlayProps) {
+ // No overlay needed for idle or uploading (MuxUploader handles its own UI)
+ if (state === 'idle' || state === 'uploading') {
+ return null;
+ }
+
+ if (state === 'needs_login') {
+ return (
+
+ To upload this video to Mux…
+
+
+ );
+ }
+
+ if (state === 'preparing') {
+ return (
+
+
+ Preparing video...
+
+ );
+ }
+
+ if (state === 'ready' && playbackId) {
+ return (
+
+
+
+ See code below, or{' '}
+
+ manage on Mux
+
+ .
+
+
+ );
+ }
+
+ if (state === 'polling_error') {
+ return (
+
+
+ Error preparing video:
+ {error}
+
+
+
+ );
+ }
+
+ return null;
+}
diff --git a/site/src/components/installation/UseCasePicker.tsx b/site/src/components/installation/UseCasePicker.tsx
new file mode 100644
index 00000000..e28b5d43
--- /dev/null
+++ b/site/src/components/installation/UseCasePicker.tsx
@@ -0,0 +1,21 @@
+import { useStore } from '@nanostores/react';
+import { Globe, Image } from 'lucide-react';
+import ImageRadioGroup from '@/components/ImageRadioGroup';
+import type { UseCase } from '@/stores/installation';
+import { useCase } from '@/stores/installation';
+
+export default function UseCasePicker() {
+ const $useCase = useStore(useCase);
+
+ return (
+ useCase.set(value as UseCase)}
+ options={[
+ { value: 'website' satisfies UseCase, label: 'Website', image: },
+ { value: 'background-video' satisfies UseCase, label: 'Background Video', image: },
+ ]}
+ aria-label="Select use case"
+ />
+ );
+}
diff --git a/site/src/content/docs/concepts/architecture.mdx b/site/src/content/docs/concepts/architecture.mdx
index 09e74b1b..f7278205 100644
--- a/site/src/content/docs/concepts/architecture.mdx
+++ b/site/src/content/docs/concepts/architecture.mdx
@@ -9,9 +9,9 @@ import DocsLink from '@/components/docs/DocsLink.astro';
Video.js v10 is built around a three-tier architecture that separates concerns and maximizes flexibility. Each tier is designed to work independently or together, allowing you to use as much or as little of Video.js as you need.
-## The Three Tiers
+## The three tiers
-### 1. State Management
+### 1. State management
State is handled by `VideoProvider`, which creates a central store that all components can access. When you wrap your player in a `VideoProvider`, components automatically connect to the state.
@@ -35,7 +35,7 @@ State is handled by `video-provider`, which creates a central store that all com
```
-### 2. User Interface
+### 2. User interface
#### Skins
Complete, pre-designed player UIs that package components and styles together:
@@ -57,7 +57,7 @@ Next, you can use the individual, unstyled UI primitives, standalone or composed
Want to dive deeper? Explore UI components →
-### 3. Media Renderers
+### 3. Media renderers
Media renderers are the components that actually display your media. They're essentially "players with no UI". They handle the video/audio rendering and expose a consistent API.
@@ -68,7 +68,7 @@ For now, we'll have a default `` component, which supports MP4 and othe
For now, we're starting with just the native HTML5 `` component, but we're looking forward to adding more in the future. From engines like HLS and DASH, to services like YouTube and Vimeo.
-## How It All Works Together
+## How it all works together
Here's a complete example showing all three tiers:
@@ -93,12 +93,12 @@ function Player() {
-
-
- HTML
- JavaScript
+
+
+ HTML
+ JavaScript
-
+
```html
@@ -112,7 +112,7 @@ function Player() {
```
-
+
```ts
import '@videojs/html-preview/skins/frosted';
diff --git a/site/src/content/docs/concepts/skins.mdx b/site/src/content/docs/concepts/skins.mdx
index 2fc1db57..82242b4f 100644
--- a/site/src/content/docs/concepts/skins.mdx
+++ b/site/src/content/docs/concepts/skins.mdx
@@ -11,20 +11,20 @@ import DocsLink from '@/components/docs/DocsLink.astro';
In Video.js v10, skins are **complete, packaged player designs** that include both UI components and their styles. This is a significant change from v8, where skins were purely CSS themes applied to a fixed component structure.
-## What's Different in v10?
+## What's different in v10?
-### Video.js v8 Skins
+### Video.js v8 skins
- CSS-only themes
- Applied to a fixed component structure
- Limited customization without JavaScript
-### Video.js v10 Skins
+### Video.js v10 skins
- **UI components + styles packaged together**
- Each skin can have completely different components
- Can address entirely different use cases
- Only include the components they need
-## Built-in Skins
+## Built-in skins
### Frosted
@@ -86,13 +86,13 @@ import '@videojs/react-preview/skins/minimal.css';
-## Customizing Skins
+## Customizing skins
Skins are designed to be ejected and modified for your specific needs.
Ready to make it your own? Learn how to customize a skin →
-## Building Your Own Skin
+## Building your own skin
A skin is simply a component that:
@@ -150,7 +150,7 @@ export function CustomSkin({ children, className }) {
Read more about components in the components guide →
-## Coming Soon
+## Coming soon
- More built-in skins for different use cases
- CLI tool for ejecting and customizing skins
diff --git a/site/src/content/docs/concepts/ui-components.mdx b/site/src/content/docs/concepts/ui-components.mdx
index d25a22fc..897c673b 100644
--- a/site/src/content/docs/concepts/ui-components.mdx
+++ b/site/src/content/docs/concepts/ui-components.mdx
@@ -1,5 +1,5 @@
---
-title: UI Components
+title: UI components
description: Understanding Video.js v10's primitive-based component architecture
---
@@ -8,9 +8,9 @@ import DocsLink from '@/components/docs/DocsLink.astro';
Video.js v10 components are built from **unstyled UI primitives**, taking inspiration from projects like [shadcn/ui](https://ui.shadcn.com/) and [Base UI](https://base-ui.com/). This approach gives you control over styling and behavior while handling the complex interactions for you.
-## Core Principles
+## Core principles
-### 1. Primitive-Based Design
+### 1. Primitive-based design
Each primitive represents at most **one HTML element**, without internal elements.
@@ -38,7 +38,7 @@ Each primitive represents at most **one HTML element**, without internal element
```
-### 2. Compound Components
+### 2. Compound components
Complex components are broken into smaller, composable pieces. This pattern is used for:
@@ -48,7 +48,7 @@ Complex components are broken into smaller, composable pieces. This pattern is u
Each piece handles one concern, but they work together seamlessly.
-### 3. Built-in Accessibility
+### 3. Built-in accessibility
Components include proper ARIA attributes, keyboard navigation, and focus management out of the box:
@@ -57,7 +57,7 @@ Components include proper ARIA attributes, keyboard navigation, and focus manage
- Focus is managed properly in tooltips and popovers
- Screen readers get meaningful announcements
-### 4. Data Attributes for Styling
+### 4. Data attributes for styling
Components expose state through data attributes, allowing pure CSS state styling:
@@ -78,9 +78,9 @@ Common data attributes:
- `data-fullscreen` - Present when in fullscreen mode
- `data-volume-level` - Values: `high`, `medium`, `low`, `off`
-## Available Components
+## Available components
-### Simple Components
+### Simple components
Single-element components that handle one piece of UI:
@@ -91,7 +91,7 @@ Single-element components that handle one piece of UI:
- **DurationDisplay** - Total media duration
- **PreviewTimeDisplay** - Time at hover position
-### Compound Components
+### Compound components
Multi-element components for complex interactions:
diff --git a/site/src/content/docs/concepts/v10-roadmap.mdx b/site/src/content/docs/concepts/v10-roadmap.mdx
index e6f1b3bc..ded02c71 100644
--- a/site/src/content/docs/concepts/v10-roadmap.mdx
+++ b/site/src/content/docs/concepts/v10-roadmap.mdx
@@ -5,7 +5,7 @@ description: Timeline and milestones for Video.js v10 rebuild and the future of
Video.js v10 is a complete rebuild from the ground up, designed to be more modular, framework-flexible, and aligned with modern web development practices.
-## Current Versions
+## Current versions
### Version 8
@@ -18,7 +18,7 @@ Video.js v10 is a complete rebuild from the ground up, designed to be more modul
- Reserved only for urgent API-breaking changes that cannot be avoided
- Acts as a stopgap between v8 and the new v10 rebuild
-## October 30, 2025: Technical Preview
+## October 30, 2025: Technical preview
**First public look** at Video.js v10, rebuilt from the ground up.
@@ -59,20 +59,20 @@ Wider testing release to the community.
- Lightweight adaptive streaming
- MoQ (Media over QUIC) support
-## Late-2026: Feature Parity with v8 Contrib
+## Late-2026: Feature parity with v8 Contrib
**Extended feature parity** with Video.js "contrib" plugins:
- Ads integration
- Analytics support
- Further community plugin migration dependent on contributions
-## End-of-Life Plan for Video.js v8
+## End-of-life plan for Video.js v8
### Mid-2026
- v8/v9 moved to "video.js-legacy" repository and package
- Hosted CDN copies will remain available
-### 2027 and Beyond
+### 2027 and beyond
- Security patches only
- Community contributions de-prioritized
diff --git a/site/src/content/docs/how-to/customize-skins.mdx b/site/src/content/docs/how-to/customize-skins.mdx
index 72e7d75e..9605884b 100644
--- a/site/src/content/docs/how-to/customize-skins.mdx
+++ b/site/src/content/docs/how-to/customize-skins.mdx
@@ -1,5 +1,5 @@
---
-title: Customize Skins
+title: Customize skins
description: Learn how to customize Video.js v10 skins by copying and modifying them
---
@@ -19,19 +19,19 @@ Video.js v10 comes with pre-built skins like Frosted and Minimal, but you can fu
While eventually we'll have a CLI that'll eject skins in your preferred framework and style, for now we invite you to try it out with these copy-paste-ready implementations.
-## Frosted Skin
+## Frosted skin
-
-
- FrostedSkin.tsx
- frosted.css
+
+
+ FrostedSkin.tsx
+ frosted.css
-
+
-
+
@@ -40,38 +40,38 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor
-
-
- HTML
- JS
- CSS
+
+
+ HTML
+ JS
+ CSS
-
+
-
+
-
+
-## Minimal Skin
+## Minimal skin
-
-
- MinimalSkin.tsx
- minimal.css
+
+
+ MinimalSkin.tsx
+ minimal.css
-
+
-
+
@@ -80,19 +80,19 @@ While eventually we'll have a CLI that'll eject skins in your preferred framewor
-
-
- HTML
- JS
- CSS
+
+
+ HTML
+ JS
+ CSS
-
+
-
+
-
+
diff --git a/site/src/content/docs/how-to/installation.mdx b/site/src/content/docs/how-to/installation.mdx
index f5ceb97f..a02ac409 100644
--- a/site/src/content/docs/how-to/installation.mdx
+++ b/site/src/content/docs/how-to/installation.mdx
@@ -1,119 +1,148 @@
---
title: Installation
-description: Get started with Video.js v10 by choosing your framework, styles, skin, and media renderer
+description: Get started with Video.js v10 by choosing your framework, skin, and media renderer
---
-
-import FrameworkCase from '@/components/docs/FrameworkCase.astro';
-import ServerCode from '@/components/Code/ServerCode.astro';
-import DocsLink from '@/components/docs/DocsLink.astro';
+import JSPicker from '@/components/installation/JSPicker.astro';
+import RendererPicker from '@/components/installation/RendererPicker';
+import SkinPicker from '@/components/installation/SkinPicker';
+import UseCasePicker from '@/components/installation/UseCasePicker';
+import HTMLUsageCodeBlock from '@/components/installation/HTMLUsageCodeBlock';
+import ReactCreateCodeBlock from '@/components/installation/ReactCreateCodeBlock';
+import ReactUsageCodeBlock from '@/components/installation/ReactUsageCodeBlock';
+import ContentWidth from '@/components/frames/ContentWidth.astro';
import Aside from '@/components/Aside.astro';
+import DocsLink from '@/components/docs/DocsLink.astro';
+import FrameworkCase from '@/components/docs/FrameworkCase.astro';
+import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs.tsx';
-Welcome to Video.js v10! This guide will help you get up and running. In it, you'll make three key choices:
+Video.js is beautifully crafted, accessible media player components; packed with powerful features; tuned for high-performance; intentionally built for your favorite frameworks; compatible with the media formats and hosting services you love.
-1. **Framework** - React or HTML (vanilla JavaScript)
-2. **Skin** - The pre-built UI design you'll use, and how it's applied in your project
-3. **Renderer** - The component that displays your media
+Get started quickly with a selection of great presets and skins, then extend and customize to your hearts content.
-## 1. Pick Your Framework
+## Choose your JS framework
-Video.js v10 supports both React and vanilla JavaScript/HTML through Web Components.
+Video.js provides idiomatic experiences in both React and HTML Web Components.
-First, select your preferred framework in the framework selector at the top of the sidebarpage.
+
+
+
-Then, install the package:
+
+## Choose your use case
+
+Use case presets get you started closer to your desired player without wrangling plugins. The default is the Website Player preset, which comes with a complete set of features for simple video playback on your site.
+
+
+
+
+
+
+## Choose your media renderer
+
+Media are like players without the UI. Pick the one that matches your video or audio files and hosting. They can easily be changed later.
+
+
+
+
+
+## Install your player
+
+
+
+
+ npm
+ pnpm
+ yarn
+ bun
+ cdn
+
+
+ ```bash
+ npm install @videojs/html
+ ```
+
+
+ ```bash
+ pnpm add @videojs/html
+ ```
+
+
+ ```bash
+ yarn add @videojs/html
+ ```
+
+
+ ```bash
+ bun add @videojs/html
+ ```
+
+
+ ```html
+
+
+ ```
+
+
+
+
+
+
+
+ npm
+ pnpm
+ yarn
+ bun
+
+
+ ```bash
+ npm install @videojs/react
+ ```
+
+
+ ```bash
+ pnpm add @videojs/react
+ ```
+
+
+ ```bash
+ yarn add @videojs/react
+ ```
+
+
+ ```bash
+ bun add @videojs/react
+ ```
+
+
+
+
+
+
+## Use your player
+
+
+
+
-```bash
-npm install @videojs/react-preview
-```
-
-
-```bash
-npm install @videojs/html-preview
-```
-
+## Create your player
+
+
+
-## 2. Pick Your Skin
-
-Skins are packaged sets of UI components and styles. Video.js v10 includes two built-in skins:
-
-- **Frosted** - Modern glassy design with backdrop blur effects
-- **Minimal** - Clean, simple design with straightforward controls
-
-Learn more about skins in the guide →
-
-Currently, Video.js v10 uses CSS for styling these skins. More styling approaches (e.g, Tailwind CSS) are coming soon.
-
-
-```tsx
-import '@videojs/react-preview/skins/frosted.css';
-// or
-import '@videojs/react-preview/skins/minimal.css';
-```
-
-
-```ts
-import '@videojs/html-preview/skins/frosted';
-// or
-import '@videojs/html-preview/skins/minimal';
-```
-
-
-## 3. Pick Your Renderer
-
-
-Media renderers display your video and audio content. For now, Video.js v10 includes ``, which supports MP4 and other natively-supported streams and ``, which supports HLS.
-
-
-Media renderers display your video and audio content. For now, you should use the native HTML5 `
-
-More renderers for formats like DASH, and services like YouTube and Vimeo are planned.
-
-## Basic Example
-
-
-```tsx
-import { VideoProvider, FrostedSkin, Video } from '@videojs/react-preview';
-import '@videojs/react-preview/skins/frosted.css';
-
-export default function App() {
- return (
-
-
-
-
-
- );
-}
-```
-
-
-```ts
-import '@videojs/html-preview/skins/frosted';
-
-document.body.innerHTML = `
-
-
-
-
-
-`;
-```
+## Use your player
+
+
+
That's it! You now have a fully functional Video.js player. Go forth and play.
diff --git a/site/src/content/docs/how-to/write-guides.mdx b/site/src/content/docs/how-to/write-guides.mdx
index 69264200..01728268 100644
--- a/site/src/content/docs/how-to/write-guides.mdx
+++ b/site/src/content/docs/how-to/write-guides.mdx
@@ -155,8 +155,7 @@ When a table is really wide, it overflows nicely on mobile
| --- | --- | --- | --- | --- | --- | --- |
| contentcontentcontent | contentcontentcontent | contentcontentcontent | contentcontentcontent | contentcontentcontent | contentcontentcontent | contentcontentcontent |
-
-### Code Blocks
+### Code blocks
we can use 3 backticks ``` in new line and write snippet and close with 3 backticks on new line and to highlight language specific syntax, write one word of language name after first 3 backticks, for eg. html, javascript, css, markdown, typescript, txt, bash
@@ -189,9 +188,9 @@ we can use 3 backticks ``` in new line and write snippet and close with 3 backti