Drag

Drag — The AI-native email marketing studio.
Effortlessly build and brand stunning emails and marketing assets with AI-assisted workflows and drag-and-drop editing.

Website · Issues

Built as a Bun + Turborepo monorepo.

Features

• Drag & drop editor: compose emails from React Email components with drag & drap and AI assistant
• Brand tools: import brand identity via Firecrawl + generate marketing stunning market assets via fal.ai

About

Drag helps you build production-ready marketing and even transactional emails with a component-based editor, then export clean JSX/HTML.

Project structure

.
├── apps/
│   ├── app/                 # Main product - Email Builder (Next.js)
│   ├── web/                 # Marketing / waitlist site (Next.js)
│   └── api/                 # Reserved (currently empty)
├── packages/
│   ├── ui/                  # Shared UI components (shadcn)
│   ├── email/               # React Email templates/utilities
│   └── ...                  # analytics / jobs / kv / logger / (legacy/
├── env.example              # Example env vars (see per-app env.example too)
├── turbo.json               # Turborepo config
└── README.md

Tech stack

• Runtime: Bun
• Monorepo: Turborepo
• Apps: Next.js (App Router) + React 19
• Email: @react-email/components + @react-email/render
• Drag & drop: @dnd-kit/*
• Backend/Auth: Convex + @convex-dev/auth
• Email sending: Resend (optional)
• AI: Vercel AI SDK + Vercel AI Gateway (optional)
• Lint/format: Biome

Quickstart (local)

1) Install dependencies

bun install

2) Configure environment variables

This repo includes env.example files you can copy locally:

cp apps/app/env.example apps/app/.env.local
cp apps/web/env.example apps/web/.env.local

Convex environment variables are separate (set in Convex Dashboard or via CLI). See:

• apps/app/convex/env.example

3) Start Convex (required for the builder app)

In one terminal:

cd apps/app
bunx convex dev

4) Start the Next.js apps

In another terminal from the repo root:

# Builder (http://localhost:3000)
bun dev:app

# Marketing (http://localhost:3001)
# bun dev:web

Environment variables (what goes where)

There are two runtimes for the builder:

• Next.js runtime: apps/app/.env.local (browser + Next routes)
• Convex runtime: set via Convex Dashboard / CLI (Convex functions + Convex Auth)

Next.js (apps/app/.env.local)

• NEXT_PUBLIC_CONVEX_URL: required (your deployment URL, e.g. https://<name>.convex.cloud)
• NEXT_PUBLIC_APP_URL: recommended (defaults to http://localhost:3000)
• AI_GATEWAY_API_KEY: required for AI assistant features
• RESEND_API_KEY: optional (enables sending emails from /api/send-email; otherwise it logs)

Convex (Dashboard / CLI)

See apps/app/convex/env.example. Common ones:

• CONVEX_SITE_URL: required by Convex Auth config (typically http://localhost:3000 for local)
• JWT_PRIVATE_KEY: required by Convex Auth
• RESEND_API_KEY + RESEND_FROM: required for OTP verification / password reset emails
• FIRECRAWL_API_KEY: optional (brand import on /assets)
• FAL_KEY: optional (marketing image generation on /assets)

To generate JWT keys locally:

cd apps/app
bun run generate-jwt-keys

Scripts

bun dev        # dev all apps
bun dev:app    # dev builder only
bun dev:web    # dev marketing only
bun build      # build all
bun lint       # lint all
bun format     # biome format
bun check      # biome check --write

License

AGPL-3.0 — see LICENSE.