Potion Template

Production-ready Notion-like editor with AI features, built on Plate.

Buy NowLive Preview

What is Potion?

Potion is a comprehensive template built on Plate, offering a Notion-like interface with advanced content management capabilities, enhanced by AI features.

Requirements

  • React 19
  • TailwindCSS 4

Key Features

  • Production-Ready AI Integration

    • GitHub Copilot-style suggestions with word-by-word acceptance
    • AI-powered commands for content generation and editing

  • Media Management

    • UploadThing integration for efficient file handling
    • Advanced image/video features: resize, align, caption
    • Clickable media placeholders with upload/embed options

  • Enhanced Navigation

    • Sticky TOC sidebar with hover-to-expand
    • Extended slash menu with item groups
    • Context menu via drag button or three-dot menu

  • Mathematical Content

    • LaTeX equation support with real-time rendering
    • Toolbar integration for quick equation insertion

Key Benefits

  • Launch faster: Skip 100+ hours of development and debugging
  • Enterprise-ready: Database persistence, input validation, rate limiting, and type safety
  • Full control: Modify any component, extend any feature
  • Future-proof: Built on T3 Stack

Tech Stack

Plate
React
Next.js
TypeScript
Tailwind
shadcn/ui
OpenAI

Get Started with the Frontend

Need just the editor? Get our decoupled frontend version that works with any backend:

This frontend-only version gives you Potion's powerful editor features without the backend constraints. Perfect for teams with existing infrastructure. Follow our installation guide – a few copy-paste and it's yours.

Perfect For

  • Startups building the next-gen content platform
  • Enterprises needing a customizable document editor
  • Developers creating knowledge bases or documentation sites
  • Teams requiring AI-enhanced content creation tools

License

Available under our commercial license. Get full source code access and free updates.

README

Getting Started

Environment Variables

Copy the example env file:

cp .env.example .env.local

Database & Redis

Potion requires both PostgreSQL and Redis for:

  • PostgreSQL: Main database
  • Redis: Real-time collaboration and rate limiting

Local Docker Compose (Recommended for Development)

  1. Launch Docker Desktop
  2. The provided docker-compose.yml includes both PostgreSQL and Redis
  3. Set the database environment variables:
DATABASE_URL=postgresql://admin:password@localhost:5432/db?schema=public
POSTGRES_USER=admin
POSTGRES_PASSWORD=password
POSTGRES_DB=db
 
# Redis (for collaboration)
REDIS_HOST=localhost
REDIS_PORT=6379

Remote Services

  1. Remove dev:db script from the scripts in package.json.
  2. Set the environment variables to your remote services:
DATABASE_URL=your_postgresql_url
REDIS_HOST=your_redis_host
REDIS_PORT=6379

Authentication

Create a new GitHub OAuth app with the following settings:

  • Application Name: Potion Local
  • Homepage URL: http://localhost:3000
  • Authorization callback URL: http://localhost:3000/api/auth/callback/github

Then set these environment variables:

  • BETTER_AUTH_SECRET - A secret key for signing cookies (min 32 characters). Generate with: openssl rand -base64 32
  • GITHUB_CLIENT_ID
  • GITHUB_CLIENT_SECRET

AI

For AI features, get an AI Gateway API key from Vercel and set:

  • AI_GATEWAY_API_KEY

File Uploads

For file uploads, create a new UploadThing account and set:

  • UPLOADTHING_TOKEN

Real-time Collaboration (Optional)

For real-time collaborative editing, configure the WebSocket server:

# YJS WebSocket Server
YJS_PORT=4444
YJS_HOST=0.0.0.0
YJS_PATH=/yjs
YJS_TIMEOUT=10000
YJS_DEBOUNCE=2000
YJS_MAX_DEBOUNCE=10000
 
# Frontend WebSocket URL
NEXT_PUBLIC_YJS_URL=ws://localhost:4444/yjs

Development

  1. bun install
  2. bun dev - This starts:
    • Next.js app on port 3000
    • YJS WebSocket server on port 4444
    • Docker services (PostgreSQL & Redis)
  3. bun migrate: db migration in another terminal

Deployment

Potion is deployed on Coolify using a Dockerfile. You could deploy it anywhere you want (Vercel, Fly.io, etc.) without Docker.

Required Services

Your deployment needs the following services:

  1. PostgreSQL - Main database
  2. Redis - Real-time collaboration and caching
  3. Next.js App - The application (includes WebSocket server)

Environment Variables

NEXT_PUBLIC_ENVIRONMENT=production
# Use your own domain
NEXT_PUBLIC_SITE_URL=https://potion.platejs.org
 
# Database
DATABASE_URL=postgresql://user:password@postgres:5432/db?schema=public
 
# Redis (important for collaboration)
REDIS_HOST=redis
REDIS_PORT=6379
 
# YJS WebSocket Server
YJS_PORT=4444
YJS_HOST=0.0.0.0
YJS_PATH=/yjs
YJS_TIMEOUT=10000
YJS_DEBOUNCE=2000
YJS_MAX_DEBOUNCE=10000
 
# Frontend WebSocket URL (adjust based on your domain)
NEXT_PUBLIC_YJS_URL=wss://your-domain.com/yjs
# Or if exposing port directly: ws://your-domain.com:4444/yjs

Coolify Setup

Services Configuration

  1. PostgreSQL Service

    • Type: PostgreSQL
    • Persistent storage: Enabled

  2. Redis Service ⚠️ Required

    • Type: Redis 7-alpine
    • Persistent storage: Enabled
    • Service name: redis (important for networking)

  3. Application

    • Build Pack: Dockerfile
    • Exposed Ports: 3000 (HTTP) and 4444 (WebSocket)

General Settings

  • Direction: Redirect to non-www.

Build Settings

  • Build Command: bun build && bun db:deploy
  • Start Command: bun start (starts both Next.js and YJS server)

Advanced Settings

  • Enable Gzip Compression: disabled

Environment Variables

  • Set each environment variable with Build Variable? enabled.

Network Configuration

Ensure all services (PostgreSQL, Redis, App) are on the same Docker network.

WebSocket Proxy (if using Nginx/Traefik)

If you're proxying the WebSocket connection, ensure WebSocket upgrade headers are configured:

location /yjs {
    proxy_pass http://app:4444;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
}

CloudFlare DNS

  • SSL/TLS: Full
  • WebSocket: Enabled (orange cloud proxied)

App Architecture

Frontend

Backend

PlaygroundOverview
Plate Pro