Direct your product videos from your editor
PageToVid Studio connects your project to its site and to Claude Code. Plan flows from the code, run recurring shows and preview every video before it spends a credit.
Offline, or in Cursor, Windsurf or VSCodium? Download the .vsix
Free · VS Code, Cursor, Windsurf and VSCodium · never runs your code
One folder, one production seat
- Connect in one click
Approve in your browser and the key comes back to the editor. Nothing to copy, and it stays in VS Code's secret storage.
- One folder, one site
Map the project to its PageToVid site once. The setting belongs to the folder, never to your whole editor.
- The studio pack
Writes .mcp.json for Claude Code without your key — it reaches the terminal as an environment variable — plus the slash commands and a short guide.
- The studio panel
Your site's counts and credits, the hours left on the recorder's login, your shows and their episodes, the capture plan and what is recorded.
- A login for screencasts
Let the recorder sign in to your product with a Playwright storage state, a test account or your browser session. On the Scale plan and up.
- Send brand assets
Pick logos and product images from the repo and send them to your media bank, tagged brand.
Six slash commands for Claude Code
Every render costs 40 credits, and every command previews before spending. Nothing renders until you say so.
/pagetovid-studioChecks the whole seat — credits, site, login, plan, shows, feed — and says what is missing. Free./pagetovid-capture-planReads the codebase and writes the flows worth recording. The Chrome extension records them; each step becomes a scene./pagetovid-showSets up a recurring show from what your repo publishes, and previews the first run before you confirm it./pagetovid-formatWrites or revises a video format, and previews a real episode before saving a new version./pagetovid-howtoTurns your docs into how-to videos filmed on the product, and asks before every render./pagetovid-assetsFinds the repo's logos and product images and tells you which ones to send.
The slash commands need the Claude Code extension or the claude CLI.
Set up once
- 1Install the extension from the Marketplace.
- 2Run “PageToVid: Connect” from the Command Palette and approve in your browser.
- 3Pick the site this folder belongs to.
- 4Run “PageToVid: Install studio pack”, start claude from the integrated terminal and approve the pagetovid server once.
- 5Product behind a sign-in? Run “PageToVid: Connect a login for screencasts” (Scale plan and up).
Your code stays on your machine
- It never captures anything and never runs your workspace code. It reads the project only to write prompts.
- Your key stays in VS Code's secret storage. The .mcp.json it writes never contains it.
- A storage state is read once and sent once. A test password is sent once and stored nowhere on your machine.
- A recorder login is bound to one site and expires after the time you choose — 72 hours at most.
Pairs with the Chrome extension
Write the capture plan in your editor, record it in Chrome. The panel marks each flow as recorded once the browser extension has sent it to your media bank.
See the Chrome extension →How-to films
Three short films made with PageToVid itself: the studio setup in VS Code, filming your product behind a login, and a recurring show set up from your repo by Claude Code.
Questions
Is it free?
The extension is free. Videos use your credits — 40 per render — and every command shows what it will make before it spends any.
Does it work in Cursor, Windsurf or VSCodium?
Yes. Those editors do not read the VS Code Marketplace, so install the .vsix file. The one-click connect works in each of them.
Do I need Claude Code?
For the slash commands, yes: the Claude Code extension or the claude CLI. Without it, the pack still writes its files and the panel still shows your site.
Is my API key in .mcp.json?
No. The file names an environment variable, and the extension sets it in every terminal VS Code opens.
Can it film my app behind a login?
Yes, on the Scale plan and up: give the recorder a Playwright storage state, a test account, or your browser session through the Chrome extension. The login is bound to that site and expires within 72 hours.
Make your next video without leaving the editor
Free to install. Works with Claude Code.