Peako Studio

Professional Video Editor for Peako Studio — Remotion-Powered Composition Engine

Peako Studio is the complete video editing platform for the Peako API — a modern browser-based editor built for professional video composition, real-time job monitoring, and complex timeline orchestration.

Quick Start

1. Open Studio: Navigate to https://studio.shin0x.space
2. Sign In: Use Google OAuth (PKCE-protected)
3. Create a Project: Start with a blank template or upload video
4. Design on Canvas: Drag clips to timeline, trim, add text, apply effects
5. Export: Choose quality (HD/1080p/4K), format (MP4/WebM), and delivery mode
6. Monitor Jobs: Watch real-time progress in the Jobs Dashboard

Key Features

• Paper+Black UI — Dark amber (#7A5C00) accents on cream (#F5F0E8) and black (#0A0A0A) — contrast-accessible, professional
• 3-Panel Editor — Left (tracks), Center (preview), Right (controls) + Bottom (timeline)
• Undo/Redo — Full CommandManager integration (Cmd+Z / Cmd+Shift+Z)
• Auto-Save — 2-second debounce, "Saving…" / "Saved ✓" status indicator
• 7 Video Operations — Trim, Merge, Mute, Add Audio, Subtitle, Blur, Speed Ramp (all Remotion-backed except speed-ramp)
• Effects & Transitions — 10+ catalog effects (Fade, Glitch, Cinematic LUT, Vignette, etc.)
• SRT Import — Drag-and-drop subtitle support with burn-in rendering
• Team Management — Create teams, invite members, manage roles (Admin/Editor/Viewer)
• API Keys — Generate & rotate API keys for programmatic access
• Export Delivery — Download, Cloud (Bunny CDN), or Async (polling via Jobs API)

Documentation

• API Reference — All 7 operations + auth + assets + templates + jobs + health
• Studio User Guide — Editor walkthrough, 5 workflows, keyboard shortcuts, troubleshooting
• README — Architecture, stack, deployment, security

Architecture

┌────────────────────────────────────────┐
│   Peako Studio (Next.js + React)       │
├────────────────────────────────────────┤
│  EditorCore (6 Managers)               │
│  - CommandManager (undo/redo)          │
│  - TimelineManager (track mutations)   │
│  - PlaybackManager (Remotion player)   │
│  - MediaManager (asset upload)         │
│  - SaveManager (auto-save 2s)          │
│  - SelectionManager (multi-select)     │
└──────────────┬─────────────────────────┘
               │ API Client
               │
        ┌──────▼──────────────────┐
        │   Peako API (Fastify)   │
        ├─────────────────────────┤
        │ /api/trim               │
        │ /api/merge              │
        │ /api/mute               │
        │ /api/add-audio          │
        │ /api/subtitle           │
        │ /api/blur               │
        │ /api/speed-ramp         │
        │ /api/effects/catalog    │
        │ /api/assets/upload      │
        │ /api/templates/*        │
        │ /api/job/*              │
        │ /auth/google*           │
        │ /health                 │
        └─────────────────────────┘
               │
        ┌──────▼──────────────────┐
        │ Remotion Renderer       │
        │ + BullMQ Queue          │
        │ + FFmpeg (speed-ramp)   │
        └─────────────────────────┘

Tech Stack

Layer	Technology
Frontend	Next.js 14 + React 18 (TypeScript)
Styling	Tailwind CSS
State	Zustand (stores) + React Context (EditorCore)
Editor Core	Custom CommandManager + 6 specialized managers
Backend	Fastify 5 (TypeScript)
Rendering	Remotion (7 ops) + FFmpeg (speed-ramp, legacy)
Queue	BullMQ + Redis (peako-redis container)
Auth	Google OAuth 2.0 (PKCE, RFC 7636)
Storage	Bunny CDN (output) + Local/S3 (input)
Database	SQLite (templates, users, jobs)

Security

• Auth: Google OAuth 2.0 with PKCE (code_challenge_method=S256) — prevents authorization code interception
• Session: peako_session JWT cookie (httpOnly, Secure, SameSite=Lax, Domain=.shin0x.space)
• API Keys: Hashed + salted, stored in DB, rotated via /api/user/key/rotate
• CORS: Whitelist origins (studio.shin0x.space, peako.shin0x.space)
• SSRF: All URL inputs validated via assertPublicUrl() — prevents internal network access
• Path Traversal: Filenames validated as basename-only, no directory components
• Rate Limiting: 100 req/min global, 20 concurrent jobs per user
• Input Validation: Zod schemas on all endpoints, magic byte checks on uploads

Live Endpoints

Service	URL
Studio	https://studio.shin0x.space
API	https://peako.shin0x.space
Docs	https://docs.shin0x.space/docs/peako-studio

Support & Issues

For bugs or questions:

1. Check the Studio User Guide troubleshooting section
2. Review the API Reference for integration issues
3. Post to #core-tech-engineer Slack channel

---

Peako Studio v1.0 | Released 2026-02-25 | nOps Labs