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 is a plain HTML page, so embedding one is just an <iframe> — no SDK, no build step, no API key, no account. The full reference lives in EMBEDDING.md (served beside the editors); this is the working summary.

What each editor supports

URL parameters

• ?embed=1 — hides the app bar so the editor looks like part of your page. Use it on every embed.
• ?view=1 — read-only: toolbars, panels and side bars hidden, editing disabled. Combine with embed for a pure viewer.
• ?src=URL — auto-opens a file on load. Must be same-origin with the editor or CORS-accessible.
• ?savepath=URL — DocForge: persist to your server (GET on load, POST on save). Use an absolute URL when your server is a different origin than the editor.
• ?encrypt=1 — with savepath: seal the bytes client-side (AES-256-GCM) before upload; your server stores ciphertext it cannot read.

<!-- read-only spreadsheet viewer -->
<iframe src="https://editors.jnc360.tech/sheet.html?embed=1&view=1&src=reports/q4.xlsx"
        style="width:100%;height:420px;border:0"></iframe>

<!-- editable document editor -->
<iframe id="doc" src="https://editors.jnc360.tech/word.html?embed=1"
        style="width:100%;height:560px;border:0"></iframe>

An iframe defaults to 150px tall and there is no content-based auto-resize, so always set an explicit height — ~400–600px for viewers, ≥520px for editing. view=1 hides the editing UI; it is not access control, since the file is still in the visitor's browser.

The postMessage API

DocForge, SheetForge and PDFForge speak a small postMessage protocol; DocForge adds a save/open family that activates when a savepath is configured.

// Attach the listener BEFORE the iframe loads, or you miss forge:ready.
window.addEventListener('message', e => {
  if (e.origin !== 'https://editors.jnc360.tech') return;   // always check
  const d = e.data;
  if (!d || typeof d.type !== 'string') return;

  if (d.type === 'forge:ready')    frame.postMessage(
    { type: 'forge:load', format: 'html', data: '<h1>Hi</h1>' }, ORIGIN);
  if (d.type === 'forge:document') save(d.name, fromBase64(d.data));
  if (d.type === 'forge:error')    console.error(d.message);
});

// ask for the edited file back
frame.postMessage({ type: 'forge:export' }, ORIGIN);

// base64 → bytes
const fromBase64 = b64 => Uint8Array.from(atob(b64), c => c.charCodeAt(0));

Saving to your server (DocForge)

Hand the embed savepath=https://your-site.com/api/docs/<userId>/report.docx and it round-trips against your backend: GET on load (404 = start blank), POST of raw application/octet-stream bytes on save, and a GET of the directory (trailing slash, Accept: application/json) returning [{path, size, at}] for the Open picker. Identity lives in the path — your server authenticates the session cookie and authorizes it. Requests are sent with credentials: 'include', so your CORS must echo the exact editor origin (a wildcard * is rejected) plus Access-Control-Allow-Credentials: true, and answer the OPTIONS preflight. New documents prompt for a name and warn before overwriting; encrypt=1 stores FORGEENC1 ciphertext instead of a .docx (only for zero-knowledge storage — plain server-side encryption at rest needs nothing from the editor). Apps that authenticate with Bearer tokens instead of cookies bridge auth with short-lived capability tickets in the savepath, delivered via forge:config after load so they never touch a URL. Embed the prod origin (editors.jnc360.tech) in production and point staging at editors-qa.jnc360.tech to test upcoming versions.

Security

The editor accepts forge:* messages from any origin and replies with a '*' target origin — deliberately, to keep embedding trivial. That puts the burden on your page: check e.origin in your listener, and prefer passing the editor's real origin instead of '*' when you send. Don't put secrets in ?src — URLs reach history, referrers and logs. When self-hosting, make sure the server sends no X-Frame-Options header (or frame-ancestors directive) 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.