Tech Stack & Requirements

Everything Forge Studio is built on, what your browser needs to run it, and how to serve it locally.

Overview

Forge Studio is a zero-build, zero-framework web application. Every page is plain HTML, CSS and vanilla JavaScript running directly in the browser — there is no bundler, no package manager, no server-side code, and nothing is ever uploaded. The only third-party dependency is ffmpeg.wasm, vendored locally for offline MP4 export.

Core technologies

Requirements

• Browser: a current Chromium browser — Chrome or Edge — is recommended and fully supported. Firefox works for editing and WebM export. Safari is limited: its MediaRecorder and canvas capture support differ, so video export and webcam recording may not work there. Chrome / Edge: full support Safari: editors only
• Serve over HTTP(S), not file://: webcam access requires a secure context (localhost counts), and the ffmpeg worker can't load from file:// URLs. Any static file server works.
• Camera & microphone permission: the browser will ask the first time you use ⏺ Record — no app-level setup needed.
• Memory / disk: ffmpeg.wasm loads a ~32 MB WebAssembly core and needs roughly 200–500 MB of RAM while transcoding. Everything else is lightweight.
• Internet: none required at runtime. All dependencies are vendored; no telemetry, no uploads — files never leave your machine.
• Offline & installable (PWA): a service worker (sw.js) precaches the entire suite — including the 32 MB ffmpeg core — on your first visit, so pages keep loading even if the local server is stopped. In Chrome/Edge you can also install Forge Studio from the address-bar install icon to get a standalone app window with its own dock icon. MDN: Progressive Web Apps

Running locally

Easiest: double-click Forge Studio.command in the project folder — it starts the server and opens the app. Or run any static server yourself:

# Python (preinstalled on macOS)
python3 -m http.server 8642
# then open  http://localhost:8642

# or Node, if you prefer
npx serve .

Project layout

Editors/
├── index.html            ← dashboard
├── photo.html            ← GraphicForge (image & graphics editor)
├── video.html            ← MotionForge (video editor)
├── docs.html             ← this page
├── css/
│   ├── base.css          ← shared theme & controls
│   ├── photo.css
│   └── video.css
├── js/
│   ├── photo.js          ← photo editor engine (layers, tools, history, I/O)
│   └── video.js          ← video editor engine (timeline, playback, export, webcam)
└── vendor/ffmpeg/        ← ffmpeg.wasm (offline MP4 export)

Demo documents

Professional sample files ship in samples/ — every one was generated by the editors' own engines, so they double as proof that the file formats are genuine:

Embedding & read-only mode

Every editor can be embedded in another website with an <iframe>, and each supports URL parameters that control chrome and behavior:

• ?view=1 — read-only: editing toolbars and panels are hidden, interactions disabled (viewer mode)
• ?embed=1 — hides the app bar for a clean embedded look (combine with view for a pure viewer)
• ?src=URL — auto-opens a file on load (same-origin, or CORS-accessible). Works on DocForge, SheetForge and PDFForge.

<!-- read-only spreadsheet viewer embedded in your site -->
<iframe src="https://your-host/sheet.html?embed=1&view=1&src=reports/q4.xlsx"
        style="width:100%;height:600px;border:0"></iframe>

<!-- editable document editor -->
<iframe id="doc" src="https://your-host/word.html?embed=1"></iframe>

For programmatic control, DocForge, SheetForge and PDFForge speak a small postMessage API. The editor announces itself with {type:'forge:ready'}; then:

const frame = document.getElementById('doc').contentWindow;

// load a document (binary formats are base64; html/csv/txt are plain strings)
frame.postMessage({ type: 'forge:load', format: 'docx', name: 'letter.docx', data: base64 }, '*');

// ask for the current document back
frame.postMessage({ type: 'forge:export' }, '*');
window.addEventListener('message', e => {
  if (e.data.type === 'forge:document') {
    // e.data = { format: 'docx'|'xlsx'|'pdf', name, data: base64 }
  }
});

Formats: DocForge loads docx / html / txt and exports docx; SheetForge loads xlsx / csv and exports xlsx; PDFForge loads and exports pdf. When self-hosting behind a real web server, make sure it doesn't send an X-Frame-Options header that blocks framing.

Licensing notes

Forge Studio's own code has no external runtime dependencies. ffmpeg.wasm is free software: the JavaScript wrapper is MIT-licensed, and the bundled FFmpeg core is LGPL/GPL (it includes the GPL x264 encoder). Using it as shipped is free for any use; if you redistribute this app commercially, keep the ffmpeg core as a separate, replaceable file (as it is now in vendor/ffmpeg/) and preserve its license notices.