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

There are two options for the database:

  1. Local Docker Compose
  2. Remote PostgreSQL
Local Docker Compose
  1. Launch Docker Desktop
  2. Set the database environment variables:
DATABASE_URL=postgresql://admin:password@localhost:5432/db?schema=public
POSTGRES_USER=admin
POSTGRES_PASSWORD=password
POSTGRES_DB=db
Remote PostgreSQL
  1. Remove dev:db script from the scripts in package.json.
  2. Set the database environment variable to your remote database URL:
DATABASE_URL=

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/github/callback

Then set these environment variables:

  • GITHUB_CLIENT_ID
  • GITHUB_CLIENT_SECRET

AI

For AI, create a new OpenAI account and set:

  • OPENAI_API_KEY

File Uploads

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

  • UPLOADTHING_TOKEN

Development

  1. pnpm install
  2. pnpm dev
  3. pnpm 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.

Coolify

General settings:

  • Build Pack: Nixpacks
  • Direction: Redirect to non-www.

Build settings:

  • Build Command: pnpm build && pnpm db:deploy
  • Start Command: pnpm start

Advanced settings:

  • Enable Gzip Compression: disabled

Environment variables:

  • Set each environment variable with Build Variable? enabled.

CloudFlare DNS

  • SSL/TLS: Full

App Architecture

Frontend

Backend

PlaygroundOverview