OpenSlop

---

Private beta. Invite-only right now. Hop on the waitlist at openslop.ai to get in.

Overview

OpenSlop wires all your favorite AI tools into one workflow so you can make good-looking video in minutes, no more jumping between ten tabs. You bring your AI accounts, OpenSlop brings the workflow. That's it.

It runs in your browser, nothing to install. Open-source, free forever. Built by engineers from Meta, Google, Stripe, and Dropbox.

Features

Describe your video

Type one line. Pick 16:9 or 9:16, a language, a model, and a length, or paste a script you already have. Seven templates are there if you need a nudge.

The composer →

Sloppy writes it with you

The copilot lives in the left panel. It reads the script, outlines the story, writes the scenes, and fits each video card to its dialogue. Everything it does lands on the canvas while you watch.

How a turn works →

A storyboard, not a prompt box

Every scene is a stack of cards: narration, character, image, video, sound, music. Edit any prompt, pick a model per card, drag to reorder, and insert wherever you hover.

The document model →

One click generates everything

Generate all queues every element and runs dependencies first: the video card a scene continues from before the scene itself, an avatar before the image it appears in. Change a prompt later and the card says Stale and why.

The generation graph →

Player and timeline

Watch the cut as it fills in, captions word by word. Four lanes underneath: visuals, voice, effects, music. Scrub the ruler, jump by scene, or switch to the storyboard strip.

The player →

Bring your own keys

Hosted models come with your account. Paste a key for Anthropic, Runware, Cartesia, or ElevenLabs and their models show up in every picker. Keys live in Supabase Vault and never reach the browser.

Models and provider keys →

Also in the box:

• Captions — Six presets, twelve fonts, an adjustable line length, and every color, border, and placement is yours to change.
• Export up to 4K — Renders on Remotion Lambda in parallel chunks and hands you an MP4.
• Version history — Autosaves as you work, folded into checkpoints. View any version and restore it.
• Characters and art style — Name a character once and every image, voice line, and avatar stays consistent.
• Templates — POV Life, Sleep Story, True Crime, and more. Each seeds a style, a narrator, and a length.
• Mocks for development — Leave a provider key unset and its calls fall back to canned results, so you can build without paying.

Supported providers

Bring your own accounts. A provider whose key is unset falls back to a mock, so none of them is required to run the app.

Getting started

Prerequisites

• Node.js 20.9+ (Next.js 16's minimum; CI runs 22)
• A Supabase project (for auth and database)

Setup

1. Clone the repo:

git clone https://github.com/openslop/openslop.git
cd openslop

2. Install dependencies:

npm install

3. Copy the annotated env template and fill it in:

cp .env.example .env.local

The Supabase variables are required. Everything else is optional: a provider whose key is unset falls back to a mock.

4. Run the database migrations:

npm run db:push

5. Start the dev server:

npm run dev

Open http://localhost:3000 and you should see the app.

Tech stack

Layer	Tech
Framework	Next.js 16 (App Router)
Language	TypeScript 5
UI	React 19, Tailwind CSS 4, shadcn/ui
Auth + DB	Supabase (Auth, Postgres, RLS)
Video	Remotion 4 (composition, rendering, player)
Storage	Vercel Blob (generated asset storage)
Icons	In-house masked-SVG set (components/ui/icon.tsx + components/ui/icons/), no icon dependency

Project structure

app/             Next.js routes, API endpoints, and editor components
  api/v1/        REST API per asset type (image, video, music, sfx, tts, llm)
  components/    Editor UI (canvas, video preview, etc.)
lib/
  agent/         Sloppy: tool definitions, registry, prompt and turn context
  connectors/    Editor-facing client API per asset type
  gateway/       HTTP clients to /api/v1/*
  providers/     Server-side vendor adapters (Runware, ElevenLabs, …)
  generation/    Generation queue and job orchestration
  canvas/        Slate document model: element types, guards, OSML parse/serialize
  script/        Script writing and refinement
  project/       Per-project Zustand store, autosave, persistence
  render/        Scene layout and render client
  templates/     Prompt templates offered in the composer
  upload/        Client-side file upload (image, video, audio)
  supabase/      Browser/server Supabase clients
remotion/        Remotion entry point and compositions
supabase/        Database migrations

See ARCHITECTURE.md for how these layers interact.

Scripts

Command	What it does
npm run dev	Start the dev server
npm run build	Production build
npm run lint	ESLint
npm run format:check	Prettier check
npm run typecheck	TypeScript check
npm run knip	Dead-code check
npm run test:run	Run tests once (Vitest)
npm run test:e2e	Smoke tests (Playwright)
npm run db:push	Push migrations to Supabase
npm run remotion:studio	Open Remotion Studio

Contributing

Contributions welcome. See CONTRIBUTING.md for setup, the check sequence, and what we look for in a PR.

Community

Questions, ideas, or just want to hang out? Join our Discord or email us.

Everyone in the community is expected to follow our Code of Conduct. To report a problem, email [email protected].

Star history

License

Licensed under the Apache License 2.0.