feat(site): add interactive getting started guide

[daniel-hayes]

Closes #255

This new getting started guide has three noteworthy features

1. It demonstrates our current target API, rather than the API as it's currently implemented
2. It allows users to interactively configure their player
3. It allows users to upload videos to Mux if they don't already have a preferred provider (See section "OAuth for Mux" for implementation details)

New components

Pickers

This PR has a bunch of pickers that allow users to select their, e.g., preferred framework in the installation guide. These pickers communicate using the standard nanostore pattern, assembling the user's code block at the end of the doc

Mux Uploader

To enable that upload experience, we integrated mux-uploader-react and an overlay which facilitates the user logging into Mux to upload an asset. That flow looks something like this:

1. When mux uploader gets a file from a user, it requests an endpoint.
2. This request -- a promise -- will attempt to fetch a direct upload url from mux, and prompt users to log into mux if this prompt errors
3. onSuccess, the component will poll the mux direct upload api until the direct upload has an asset id associated with it
4. The component will poll the mux asset api until the asset is ready with a playback id associated with it

That playback id is shared through nanostores with codeblocks later in the installation guide.

But wait. How does that mux api interaction work on the video.js site?
Well, I'm glad you asked:

OAuth for Mux

Summary

Implements OAuth 2.0 authentication with Mux, using a token-based authentication flow with automatic token refresh and session management.

Security Features

• CSRF Protection - State parameter validation in OAuth callback
• Token Encryption - Session cookies encrypted via iron-session
• JWT Verification - All tokens verified against JWKS endpoint
• Secure Cookies - httpOnly, secure (in production)
• Inactivity Timeout - Sessions expire after 5 minutes of inactivity (we can adjust this)

Session Management

• JWT verification for access and ID tokens
• Automatic token refresh when approaching expiration

I decided to use iron-session for encrypting / decrypting cookies on requests. Because of this, you will need to include a secure SESSION_COOKIE_PASSWORD that is at least 32 characters long. Their docs suggest creating one here.

You will need the following .env variables to get the flow working end to end.

# OAuth Configuration
OAUTH_CLIENT_ID=<client-id>
OAUTH_CLIENT_SECRET=<client-secret>
OAUTH_REDIRECT_URI=https://videojs.com/api/auth/callback
OAUTH_URL=<mux oauth url>

# Session Encryption
SESSION_COOKIE_PASSWORD=<32-byte-key>

# Mux API
MUX_API_URL=https://api.mux.com

Check out the Login file to see how we can access this information on the front-end.

Unrelated changes

In addition to the above, we also

1. unified the docs on sentence case rather than title case
2. added a FRAMEWORK_LABEL and STYLE_LABEL concept so that, when the user has e.g., css selected as their style, the UI shows CSS
3. add ContentWidth frame for docs formatting
4. add margin to docs frames
5. fix issue where tabs would not render with client:visible directive

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
vjs-10-demo-html	Ready	Preview, Comment	Feb 2, 2026 10:34pm
vjs-10-demo-next	Ready	Preview, Comment	Feb 2, 2026 10:34pm
vjs-10-demo-react	Error		Feb 2, 2026 10:34pm
vjs-10-website	Ready	Preview, Comment	Feb 2, 2026 10:34pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
vjs-10-website (staging)	Ignored	Preview	Feb 2, 2026 10:34pm

[netlify]

✅ Deploy Preview for vjs10 ready!

Name	Link
🔨 Latest commit	74a46fc
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10/deploys/6981267a22f5bd0009b7a678
😎 Deploy Preview	https://deploy-preview-280--vjs10.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.