A modern, collaborative text editor built for the web. Create, organize, and share beautiful documents with rich media support.
- Powerful Editor: Built with TipTap and ProseMirror for a smooth writing experience
- Markdown Support: Paste markdown and it automatically converts to rich text
- Formatting Tools: Bold, italic, underline, strikethrough, code, and more
- Multiple Fonts: Choose from various font families and sizes
- Text Styling: Custom colors, highlights, alignment, line height
- Smart Organization: Create folders and organize your documents
- Full-Text Search: Quickly find any document with powerful search (⌘K)
- Document Tabs: Work on multiple documents simultaneously
- Auto-Save: Never lose your work with intelligent debounced saving
- Version History: Track changes and restore previous versions
- Document Starring: Mark important documents as favorites
- Images: Drag and drop images with resizing support
- Videos: Embed and play videos directly in documents
- Audio: Add audio files with built-in player
- YouTube: Embed YouTube videos
- Drawings: Create and edit drawings inline
- Link Previews: Automatic rich previews for pasted URLs
- Chat Visualizations: Import and visualize chat conversations (Instagram, Messages)
- Public Links: Share documents with anyone via public URLs
- Testament Mode: Create permanent, immutable documents
- Temporary Pads: Share documents that expire after a set time
- Export Options: Download as Markdown, HTML, TXT, or JSON
- Bulk Export: Download all your documents at once
- Multiple Auth Options: Email/password, Google OAuth
- Secure Sessions: JWT-based authentication with NextAuth
- User Profiles: Customizable avatars and settings
- Admin Panel: Comprehensive admin dashboard for moderation
- Multi-Language: Support for English, French, and Swedish
- Auto-Detection: Automatically detects user's preferred language
- Localized UI: Fully translated interface and messages
- Modern Stack: Next.js 15 App Router, React 19, TypeScript
- Serverless: Fully serverless architecture on Vercel
- Database: PostgreSQL with Drizzle ORM
- Caching: Intelligent caching with Redis
- Analytics: PostHog integration for insights
- File Storage: AWS S3 and IPFS support
- Node.js 18+
- PostgreSQL database (Neon, Supabase, or local)
- (Optional) AWS S3 or IPFS for file storage
-
Clone the repository
git clone https://github.com/yourusername/padpad.git cd padpad -
Install dependencies
npm install
-
Set up environment variables
Create a
.env.localfile with the following:# Database DATABASE_URL=your_postgres_connection_string POSTGRES_URL=your_postgres_connection_string # Authentication NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=your_nextauth_secret # Google OAuth (optional) GOOGLE_CLIENT_ID=your_google_client_id GOOGLE_CLIENT_SECRET=your_google_client_secret # AWS S3 (optional) AWS_ACCESS_KEY_ID=your_aws_key AWS_SECRET_ACCESS_KEY=your_aws_secret AWS_REGION=your_region AWS_S3_BUCKET=your_bucket_name # IPFS (optional) IPFS_API_URL=your_ipfs_api_url IPFS_GATEWAY_URL=your_ipfs_gateway_url # Analytics (optional) NEXT_PUBLIC_POSTHOG_KEY=your_posthog_key NEXT_PUBLIC_POSTHOG_HOST=https://app.posthog.com
-
Run database migrations
# Option 1: Via API endpoint npm run dev # Then POST to http://localhost:3000/api/migrate # Option 2: Via web interface # Visit http://localhost:3000/migrate
-
Start the development server
npm run dev
-
Open your browser
Navigate to http://localhost:3000
- Sign in or create an account
- Click the "+" button in the header
- Start typing - your document auto-saves!
- Create folders from the Drive page
- Drag documents into folders
- Use the search (⌘K) to find anything
- Images: Drag and drop into the editor
- Videos: Paste video URLs or upload files
- Drawings: Use the drawing tool in the toolbar
- Links: Paste any URL for automatic preview
- Click the share button on any document
- Choose public link, testament, or temporary pad
- Copy the link and share!
- Import: Drag .md or .txt files onto the Drive page
- Export: Use the export button to download in various formats
- Frontend: Next.js 15 (App Router), React 19, TipTap, Tailwind CSS
- Backend: Next.js API Routes (Serverless Functions)
- Database: PostgreSQL (Neon) with Drizzle ORM
- Auth: NextAuth.js with multiple providers
- Storage: AWS S3 + IPFS for distributed storage
- Caching: Upstash Redis
- Analytics: PostHog
- Deployment: Vercel
users
├── id (uuid, primary key)
├── email (unique)
├── name
├── avatar_url
├── is_admin
└── created_at
documents
├── id (uuid, primary key)
├── user_id (foreign key)
├── folder_id (foreign key, nullable)
├── title
├── content (jsonb)
├── content_text (for search)
├── is_public
├── is_starred
├── created_at
└── updated_at
folders
├── id (uuid, primary key)
├── user_id (foreign key)
├── name
├── parent_id (self-referencing, nullable)
├── created_at
└── updated_at
document_snapshots
├── id (uuid, primary key)
├── document_id (foreign key)
├── content (jsonb)
├── content_text
└── created_at
document_events
├── id (uuid, primary key)
├── document_id (foreign key)
├── event_type
├── event_data (jsonb)
└── created_at
public_documents
├── id (uuid, primary key)
├── slug (unique)
├── document_id (foreign key)
├── created_at
└── views
testament_documents
├── id (uuid, primary key)
├── slug (unique)
├── document_id (foreign key)
├── is_locked
└── created_at
temporary_pads
├── id (uuid, primary key)
├── content (jsonb)
├── expires_at
└── created_at
PadPad uses an event-sourced architecture for document management:
- All changes are logged as immutable events
- Snapshots are created periodically for performance
- Full document history is preserved
- Easy rollback and auditing
padpad/
├── app/ # Next.js App Router pages
│ ├── (main)/ # Authenticated routes
│ ├── (public)/ # Public routes
│ ├── api/ # API endpoints
│ └── layout.js # Root layout
├── components/ # React components
│ ├── editor/ # Editor components
│ ├── layout/ # Layout components
│ └── drive/ # Drive page components
├── lib/ # Utilities and helpers
│ ├── editor/ # TipTap extensions
│ ├── db/ # Database utilities
│ └── auth/ # Authentication helpers
├── public/ # Static assets
└── styles/ # Global styles
# Development
npm run dev # Start dev server
npm run build # Build for production
npm run start # Start production server
# Code Quality
npm run lint # Run ESLint
npm run format # Format with Prettier
# Database
npm run migrate # Run database migrations- Create TipTap extension in
lib/editor/ - Add to extensions config in
lib/editor/extensions-config.js - Create React component if needed in
components/editor/ - Add toolbar controls in
components/editor/GoogleDocsToolbar.js
- Push your code to GitHub
- Import project in Vercel
- Add environment variables
- Deploy!
PadPad is a standard Next.js app and can be deployed to:
- Netlify
- AWS Amplify
- Cloudflare Pages
- Railway
- Self-hosted with Docker
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- TipTap - Headless editor framework
- Next.js - React framework
- Vercel - Hosting platform
- Neon - Serverless Postgres
For questions or feedback, please open an issue on GitHub.
Made with ❤️ by the PadPad Team