An interactive timeline for social media. Open-source. Each post is an executable artifact — games, infographics, chatbots, mini-tools — running inline in a sandboxed feed. Scroll, play, save, and remix.
Status: pre-alpha — M5 and the deliverable slice of M6 are both shipped. Sandbox iframe, scroll-snap feed, social primitives (follows / likes / comments / boards / per-viewer state), chat / DMs, notifications, rich share dialog (link + embed iframe + QR + downloadable 1080×1080 PNG + X/LinkedIn/FB/WhatsApp/Telegram/Reddit/email), import from Claude / Gist / CodePen, AI generate tab (Claude / OpenAI / Gemini, BYOK), Supabase backend live, magic-link sign-in, Remix button with version history + unified-diff view, per-artifact license, DMCA workflow with auto-hide, Markdown + Mermaid artifacts, React artifacts (Babel standalone), Chatbot artifacts (bounded BYOK chat), Topics tab + Discover algorithm, Recipe seed template, brand verification (blue ✓), community templates, Native Lead Capture with system-rendered consent dialog, Trusted Flagger auto-promotion, public transparency log. Remaining roadmap items need real credentials (OAuth providers) or careful security review (CSP per-brand allowlists) before they make sense to ship.
Liveloop is a social network where the post format is the innovation, not the social graph.
Each post is an executable artifact — a snippet of HTML, JS, React, or markdown that runs inline in a vertical 9:16 container. You scroll a feed, but every card is interactive: play a math quiz, run a small game, talk to a chatbot, configure a "drink water" reminder that survives in your saved tools.
Three things that make it different from existing feeds:
- Interactive in-feed. No tap-to-open required. The post plays where it sits.
- Save to board. Like Pinterest, but the things you save keep running — with their own state per viewer.
- Remix. Fork any artifact, edit the prompt or the code, publish a new version with automatic attribution.
A complete Next.js social app you can run on localhost:3000, deploy to Vercel for free, or self-host. Includes the editor, the feed, the sandbox, the templates, and (when M2 lands) the social graph.
git clone https://github.com/<your-fork>/liveloop.git
cd liveloop
pnpm install
cp .env.local.example .env.local
pnpm devOpen http://localhost:3000.
Deploy to Vercel: connect the repo at vercel.com/new — auto-detected as Next.js. No paid plan needed for the demo.
Drop the rendered feed (or a single artifact) into any personal site via <iframe> from a Liveloop instance, or copy the sandbox library into your own React app. See docs/EMBED.md for both patterns.
The smallest version is one line of HTML:
<iframe
src="https://<your-liveloop-host>/embed/<artifact-id>"
width="360"
height="640"
loading="lazy"
sandbox="allow-scripts allow-popups"
></iframe>The artifact runs sandboxed, locked to the embedding host via CSP. Safe to drop into a blog post, portfolio site, or course material.
- Next.js 16 (App Router, React 19, TypeScript) — web is the primary product
- Supabase (Postgres + Auth + Storage + Realtime + Edge Functions + RLS) — wired in M2; Phase 0 uses an in-memory mock so the demo runs with zero infra
- Drizzle ORM for typed queries
- next-intl for locale routing (EN at launch; community translations welcome — see CONTRIBUTING.md)
- shadcn/ui + Tailwind CSS v4 with mobile-first responsive design
- Cloudflare R2 for image storage, Cloudflare Stream for short video (when uploads ship)
- AI provider OAuth: Claude, OpenAI, Google Gemini — BYOK: users connect their own keys, project pays nothing for inference
- Capacitor packages installed for the future iOS / Android shells. Native builds are out of scope until after public launch — see docs/MOBILE.md
| Phase | Ships | Status |
|---|---|---|
| Phase 0 | Scaffolding: Next.js 16 + Tailwind 4 + shadcn/ui + next-intl + Drizzle + Capacitor + docs | ✅ shipped |
| M1 | Sandbox iframe + 9:16 container + Compose / Paste editor + Snake / Quiz / Memory seed templates + view page + feed | ✅ shipped |
| M2 | Social primitives (profiles, follows, likes, comments) + save-to-board + per-viewer state + reports + safety primer + rate limits + TikTok-style scroll-snap feed | ✅ shipped |
| M2.5 | Chat / DMs with polling + notifications system + rich share dialog (link, embed iframe, QR code, X / LinkedIn / Facebook / WhatsApp / Telegram / Reddit / email) | ✅ shipped |
| M3 | AI Generate tab with bounded chat (Claude / OpenAI / Google Gemini, BYOK via env) + Import from Claude / Gist / CodePen / JSFiddle / CodeSandbox + static analysis with input-safety banner + Open Graph + Twitter Card metadata + admin moderation dashboard with role system + audit log | ✅ shipped |
| M3.5 | Supabase backend live (4 migrations, full ArtifactStore, factory hot-swap) + magic-link auth via Supabase + on_auth_user_created trigger that auto-creates profiles | ✅ shipped |
| M4 | Remix DAG with version history + unified-diff view + license per artifact (7 options, MIT default) + public DMCA notice form + auto-hide while under review + admin DMCA accept/reject workflow | ✅ shipped |
| M5.1 | Markdown / Mermaid artifacts — first non-HTML kind, GFM tables + ```mermaid fenced diagrams, server-side sanitization, live preview in the editor, kind-aware render pipeline |
✅ shipped |
| M5.2 | React artifacts — JSX kind with Babel standalone transform inside the sandbox, React 19 + ReactDOM 19 UMD from jsdelivr | ✅ shipped |
| M5.3 | Chatbot artifacts — bounded BYOK chat (10 turns / 50k tokens / 5 min), per-viewer budget in viewer_state, SDK postMessage bridge | ✅ shipped |
| M5.4 | Topics tab + Discover algorithm — text[] column per artifact, chip selector on Topics tab, engagement-weighted ranking for Discover | ✅ shipped |
| M5.5a | Recipe seed template — first non-game seed (title, servings, ingredients, steps) | ✅ shipped |
| M5.5b | Brand verification — is_brand + verified_at on profiles, blue ✓ badge, admin verify-by-handle from /admin/moderation Brands tab |
✅ shipped |
| M5.5c | Community templates — kind=template published artifacts surface in the editor's Templates tab as remixable starting points |
✅ shipped |
| M5.5d | Native Lead Capture — first-class window.liveloop.captureLead SDK + system-rendered consent dialog + /leads owner inbox storing verbatim consent text |
✅ shipped |
| M6a | Trusted Flagger — reporters auto-earn a badge when their reports lead to real moderation actions (hide / takedown) |
✅ shipped |
| M6b | Public transparency log — /legal/transparency shows per-action counts (last 30 days) + the 100 most recent moderation actions without doxxing targets or moderators |
✅ shipped |
| M6c | Share-as-PNG — /api/share/[id] returns a 1080×1080 PNG card via next/og (Satori + WASM); downloadable from the share dialog |
✅ shipped |
| M5.5+ | Brand Integration Requests (CSP per-brand allowlist for verified brands) — needs careful security review | ⏳ |
| M6+ | Trending templates · share-as-video · Docker Compose for self-hosters · Google / Apple / Facebook OAuth — need real credentials / infra decisions | ⏳ |
Interactive content has unique attack surface (XSS, phishing, fake UI, lead-capture scams). Defense in depth:
- Sandbox iframe with strict CSP
connect-srcallowlist (Liveloop + AI providers only by default) form-action 'none'prevents form exfiltration to attacker servers- Static analysis at submit time flags forms, eval, suspicious URLs — informational, not blocking (posts go live immediately)
- Post-moderation by the community — Volunteer Moderators apply, admin approves them (not individual posts)
- Reports queue with auto-hide on threshold + Trusted Flagger program
- Native Lead Capture with mandatory consent UI and GDPR/LGPD compliance — eliminates the need for risky external POST endpoints
See SECURITY.md for vulnerability reporting.
We embrace AI-assisted contributions. PRs welcome from humans, vibe-coders, and agents alike.
- See CONTRIBUTING.md for setup, conventions, and PR flow
- See CODE_OF_CONDUCT.md for community standards
- Sign your commits with
git commit -s(Developer Certificate of Origin)
Good first issues: write a new seed template (Tic-Tac-Toe, Calculator, Poll, Timer), translate the UI to your locale, add tests, improve docs.
Liveloop is built with the free tier of every provider it touches:
- Vercel hosts the Next.js app. Click the "Deploy with Vercel" button at the top of this README and follow the prompts. No env vars are required for the Phase 0 demo (the in-memory mock store ships with seeded artifacts).
- Supabase is wired in M2. When you're ready, create a free project at supabase.com, copy your URL and anon key into
.env.local, and the storage layer will switch over automatically. - Firebase for push notifications arrives in M2.5 (free tier handles small audiences).
- Cloudflare R2 + Stream for media when uploads land — generous free tier with zero egress fees.
The whole thing is meant to be runnable for €0/month at small scale. See docs/EMBED.md for embedding a single artifact in your existing project instead of running the whole app.
MIT.
The Liveloop name and any future logo are intended to remain identifiable to the upstream project. Code is free to use, fork, and modify under the MIT terms; if you ship your own fork, please pick a different brand name to avoid confusion.
Scroll less. Play more.