A local-first creative studio for photos, video, audio and 3D - delivered as one HTML file, with optional files for install, offline use and embedding.
Your media stays in the browser. Nothing is uploaded unless you choose to export or embed it yourself.
Just edit: open studio-editor.html in Chrome, Edge or Firefox. Double-clicking the file works.
Install as a desktop app / work offline: serve the folder over HTTP or HTTPS, then open index.html (or studio-editor.html) and use Install in the top bar. Browsers do not allow installation from file://.
Any static host works: GitHub Pages, Netlify, Cloudflare Pages, a plain web server, or a WIX site with the file uploaded to a file host.
Embedded in WIX or another site: see Embedding and wix-embed.html.
- Move, Crop, Hand and Transform join the photo toolbar. Crop has a live overlay and Auto crop; Hand scrolls the canvas; Transform moves, scales and rotates the whole document.
- Resize & crop changes the document pixel size with a choice of anchor.
- Perspective layer warps the active layer from four draggable corners. The dialog previews the quad live, then applies a CPU homography/bilinear warp in place. It is destructive but fully undoable.
- Colour temperature warms or cools the active layer's pixels, with undo.
- Twelve colour-grade presets include Teal & Orange, Cinematic, Bleach, Noir, Warm Film, Cold Film, Matte and more. Grades live in the Looks panel and are saved inside photo documents and project files.
- PSD/PSB files open as the flattened composite. Raw, RLE and ZIP compression, 8/16-bit, RGB, grayscale, CMYK, indexed, Lab, bitmap and multichannel modes are handled.
- PDF-compatible AI artboards render through PDF.js on demand. If rendering fails, the largest embedded JPEG is used; EPS-only files get guidance to re-save with Create PDF Compatible File.
- RAW files (DNG, CR2, CR3, NEF, ARW, RAF, RW2, ORF, PEF, SRW, X3F and more) import the camera's largest embedded JPEG preview. Full RAW demosaic is not performed; export a 16-bit TIFF from your RAW converter for the complete data.
- Text now supports left, centre, right and justify alignment, a wrap width as a percentage of the picture, line height, tracking, all caps, outline width, a background plate and rotation.
- Text presets and a quick-add box make captions and titles faster.
- More Google Fonts load on demand. You can upload custom fonts; they are embedded in
.studiophoto saves and restored on load.
- Per-clip effects now include VHS, CRT, motion blur, glitch, RGB split, light leak, old film, glow, shake and bars, with strengths and timing controls.
- Effects are applied consistently in the program monitor and both export paths, using deterministic time-seeded randomness.
- Changing the sequence aspect ratio now updates the monitor's display ratio, so vertical, square and widescreen sequences are never stretched.
- Video exports are constant frame rate at the sequence fps (or the fps chosen in the export dialog). The frame-by-frame WebCodecs encoder is always used for MP4/H.264/H.265, and the MediaRecorder fallback requests frames on a fixed cadence and converts to CFR on the FFmpeg path.
- Add > 3D text creates true extruded
TextGeometrywith regular and bold typefaces loaded on demand. - If the typeface cannot load, a readable textured sign is used instead, and it still saves and reloads with the model.
- The Audio tab now has independent Pitch (semitones) and Tempo (%) controls.
- Pitch resamples and time-stretches so the clip keeps its length; tempo time-stretches so the pitch is preserved. Apply to the selection or the whole track, and reset to the original.
- The Demos menu loads ready-made Photo, Video, Audio and 3D content, or all four at once.
- Download full .studio demo builds a single project containing all four workspaces, including generated audio, a rendered demo clip and true 3D text.
- Help and What's new now document the 1.1 tools.
One place for the publishing jobs that normally need three other apps. Open it from Creator in the top bar or with Alt + C.
- Publish - frame sizes for YouTube, YouTube 4K, Shorts, TikTok, Instagram Reels, Instagram Feed, Instagram Portrait, Facebook, LinkedIn, X and Pinterest. Choosing a platform sets the sequence size, frame rate, safe zones and a matching export preset. Fill frame crops existing clips to the new shape; Fit frame letterboxes them.
- Captions - paste or open SRT/VTT, parse, preview the cue table, then add the cues as caption clips on V3. Styles cover font, size, position, line width, background plate, text/plate colours, bold and shadow. Export SRT writes the current captions back out.
- Thumbnail Studio - capture the current frame or open a picture, add a headline, supporting line and badge, pick a template and a platform size, then export PNG or JPG.
- Audio tools - duck music under speech with volume keyframes, remove silence and close the gaps, normalise a clip to a target peak, shape bass and treble, change tempo (50-200% with pitch preserved) and pitch (-12 to +12 semitones), and add a non-destructive censor with a 1 kHz bleep or silence.
- Brand kit and watermark - name, handle, two colours, a logo, and a watermark with position, size, opacity, plate and shadow. The watermark is painted on the program monitor and every export path.
- Export and codecs - a live capability matrix (WebCodecs and MediaRecorder) for H.264, H.265, VP9, AV1, VP8, Opus and AAC, plus a one-click best-format check.
- Memory and recovery - browser heap, history depth, audio cache, orphaned media, and IndexedDB recovery snapshots with restore and delete.
- Embed and PWA - copy-ready iframe snippet, the full postMessage API, install status and update checks.
- Settings - automatic/forced mobile layout, accent colour, preview quality, safe zones, compatibility mode and autosave.
- High-quality canvas smoothing and correct pixel ratio for preview and 3D.
- Enhanced title renderer with alignment, wrapping, padding, backgrounds, gradients and caption styling.
- Safe-zone overlays (action safe, title safe, rule of thirds, platform UI, 4:5 feed-safe box) that scale with the frame.
- AV1 and WebCodecs VP9 added to the export formats next to H.264, H.265, WebM and ProRes.
- Automatic export format selection with safe fallbacks when a hardware encoder is missing.
- Watermark compositing in preview and every export path.
- Bass and treble shelves (±15 dB) are rendered with an offline biquad, so the preview and every export match.
- Tempo (50-200%) uses overlap-add time stretching: the clip gets shorter or longer and later clips on the same track ripple out of the way.
- Pitch (-12 to +12 semitones) resamples and time-stretches back to the original length, so voices can go deeper or higher without changing the cut.
- Applying tone or timing writes a new local WAV, adds it to the media library and swaps it into the selected audio clip. Undo and redo restore the previous source; project files embed the rendered WAV.
- Tone and timing need an audio clip on track A1 and work on clips up to 5 minutes at a time. Censors work on video and audio clips.
- Censor markers are non-destructive. Park the playhead over a word and add a 1 kHz bleep or silence; the band is drawn on the timeline, survives project saves and is applied to live preview, MediaRecorder exports and the offline WebCodecs mix.
- Splitting a clip keeps each censor on the correct half. Censors are stored relative to the clip, so add or adjust them after trimming for the most accurate placement.
- Volume keyframes, fades, ducking and normalization keep working on top of all of the above.
- Photo undo history is capped by a configurable depth (4-60 steps) instead of a fixed 12.
- The decoded-audio cache is capped at six entries.
- Blob URLs are revoked when unused media is released.
- Memory panel with live heap, history, clip and library counts, plus explicit clean-up actions.
- Compatibility mode reduces effects, pixel ratio and expensive CSS for older or low-memory devices.
- Autosave writes project snapshots to IndexedDB every few minutes (configurable) and on demand (
Ctrl+Shift+S). - A recovery banner appears on the next visit if a recent snapshot exists.
- The last five snapshots are kept. Projects over 384 MB are skipped - save a
.studiofile for those.
- Web app manifest with 32/180/192/512 icons and a maskable icon.
- Offline shell with network-first HTML and code, cache-first icons and images.
- Install button, update chip, standalone layout and safe-area padding.
- Firefox: installation uses the browser menu; the editor detects the missing
beforeinstallpromptand explains what to do.
?embed=1gives a compact UI, an "open standalone" escape hatch and automatic height reporting.postMessageAPI for state, workspace switching, theme, project load/save, frame capture and export.?origin=https://your-site.examplerestricts message origins if you want a hard boundary.
- Bottom action bar for Photo, Video, Audio, 3D, playback, the Creator Hub and settings.
- Every workspace, including 3D, Resources and What's new, is reachable from the bar or from Settings > Jump to a workspace.
- Side panels become touch drawers with a dimmed backdrop and close buttons.
- Tap-friendly menus, larger hit targets, safe-area padding and a full-screen hub.
- Automatic activation on coarse pointers and narrow screens; can be forced on or off in Settings.
| File | Purpose |
|---|---|
studio-editor.html |
The editor. Single file; the 1.1 upgrade CSS and JS are inlined. |
index.html |
Friendly entry point that forwards to the editor and links the manifest. |
manifest.webmanifest |
PWA name, icons, colours, shortcuts. |
sw.js |
Offline shell and update handling. |
icon-32.png, icon-180.png, icon-192.png, icon-512.png |
App and browser icons. |
icon-maskable-512.png |
Maskable icon for Android and desktop launchers. |
wix-embed.html |
Working example of the iframe + postMessage bridge. |
src/pro-x-v1.css, src/pro-x-v1.js |
Readable, unbundled upgrade layer (development only; the shipped HTML already contains both). |
src/app.beautified.js |
Formatted copy of the original app script, for reference and diffing. |
src/make-icons.ps1 |
Regenerates the PNG icons. Not needed at runtime. |
Upload studio-editor.html, index.html, manifest.webmanifest, sw.js and the five PNG icons to the same folder for install and offline mode. The editor alone is enough for editing (file:// included); the src folder is not needed at runtime.
- Upload
studio-editor.html(and the PWA files) to a host that allows direct file links. - In WIX, add Embed > Custom embed > Embed code.
- Paste:
<iframe
src="https://your-host.example/studio-editor.html?embed=1"
title="Studio Editor PRO X"
style="width:100%;height:720px;border:0;border-radius:12px;overflow:hidden"
allow="fullscreen; clipboard-write; microphone; camera"
loading="lazy"></iframe>- Publish. Use the Creator button inside the frame for captions, thumbnails and presets.
Some hosts block downloads or full screen inside iframes. Open standalone in the embed bar opens the editor in its own tab.
Send messages to the iframe. Replies always include source: "studio-pro-x", the same requestId, and a version.
const frame = document.querySelector("iframe").contentWindow;
frame.postMessage({ type: "prox:ping", requestId: "1" }, "*");
window.addEventListener("message", (event) => {
if (event.data?.source !== "studio-pro-x") return;
console.log(event.data.type, event.data);
});| Command | Payload | Reply |
|---|---|---|
prox:ping |
- | prox:pong with version and state |
prox:state |
- | prox:state |
prox:openWorkspace |
{ workspace } |
prox:workspace |
prox:openCreator |
{ panel } |
prox:creator |
prox:setTheme |
{ accent } |
prox:theme |
prox:toast |
{ text } |
prox:toast |
prox:loadProject |
{ buffer } or { data } |
prox:loaded |
prox:getProject |
- | prox:project with buffer |
prox:frame |
{ time, format } |
prox:frame with buffer |
prox:export |
- | prox:export (opens the dialog) |
Events also fire without a request: prox:ready, prox:height, prox:captions, prox:preset, prox:watermark, prox:thumbnail, prox:panel, prox:teleprompter, prox:installed, prox:projectOpened, prox:toast.
| Keys | Action |
|---|---|
Alt + C |
Open or close the Creator Hub |
Alt + P |
Open the teleprompter |
Alt + M |
Open memory and recovery |
Ctrl + Shift + S |
Save a recovery snapshot |
Space |
Play/pause (Video) or start/pause the teleprompter |
Esc |
Close menus, drawers and the teleprompter |
The original editor shortcuts (Ctrl+Z, Ctrl+Y, photo tools, timeline editing) still apply.
| Browser | Editing | H.264 export | AV1 / VP9 | Install | Offline |
|---|---|---|---|---|---|
| Chrome / Edge (recent) | Yes | WebCodecs | WebCodecs where the GPU supports it | Yes | Yes |
| Firefox (recent) | Yes | MediaRecorder WebM, or WebCodecs where available | WebM | Browser menu | Yes |
| Safari (recent) | Yes | Limited; WebM/H.264 depends on the OS | Partial | Add to Dock (macOS) | Yes |
| Mobile Chrome / Safari | Touch layout | Device dependent | Device dependent | Add to Home Screen | Yes |
If a codec is missing, the editor falls back instead of failing the export. The Export & codecs panel always shows what the current browser reports.
- Keep the tab visible during a MediaRecorder export; browsers throttle hidden tabs.
- Close other heavy tabs before a long export, or turn on Compatibility mode.
- Use Save project for anything important, and the recovery panel for accidents.
- Each tone/tempo/pitch apply adds a rendered WAV to the media library, so a project grows a little. Split very long audio first (the tools cap a single pass at 5 minutes) and save a
.studiofile before a big session. - Censors are non-destructive: move or remove them at any time. They are saved with the project and are audible in the preview and every export.
- For vertical video, choose Shorts/TikTok/Reels first, then Fill frame on existing clips. The monitor keeps the correct aspect ratio while you switch.
- Captions are ordinary clips on V3 - trim and move them like any other clip.
- The watermark is saved in this browser, not inside the project file.
- Perspective, colour temperature and the older pixel filters are destructive; use undo or work on a duplicated layer.
- RAW import is a preview workflow. For highlight recovery or 16-bit grading, develop the RAW file first and import a TIFF.
- Video export is constant frame rate. Keep the tab visible during the MediaRecorder fallback; the MP4/WebCodecs path is faster and does not depend on wall-clock capture.
Studio Editor PRO X 1.1 - created by Matthew J Thomas. Built on the original Studio Editor with Three.js, mp4-muxer and ffmpeg.wasm.