A powerful, modern web-based design editor built with Next.js that combines canvas-based design capabilities with comprehensive presentation features. Create stunning graphics, presentations, and export them in multiple formats.
- Canvas-based Design: Intuitive drag-and-drop interface for creating designs
- Rich Text Editing: Advanced typography controls and text formatting
- Shape Tools: Comprehensive set of drawing and shape tools
- Layer Management: Professional-grade layer system with reordering and grouping
- Image Integration: Upload, manipulate, and integrate images seamlessly
- Color Management: Advanced color picker with material design colors
- Undo/Redo: Full history management for all design operations
- Multiple Formats: PNG, JPEG, WebP, SVG, PDF, and JSON
- Bulk Export: Export all slides or individual pages
- PDF Presentations: Generate multi-page presentation PDFs
- ZIP Archives: Batch export with organized file structure
- High-Quality Output: Lossless export options for professional use
- User Authentication: Secure login with NextAuth.js
- Project Management: Save, load, and organize your designs
- Cloud Storage: Reliable project storage with Neon Database
- Real-time Autosave: Never lose your work with automatic saving
- Node.js 18.0 or higher
- npm, yarn, or pnpm package manager
- PostgreSQL database (or Neon DB)
-
Clone the repository
git clone https://github.com/your-username/aritfy.git cd aritfy -
Install dependencies
npm install # or yarn install # or pnpm install
-
Set up environment variables
cp .env.example .env.local
Configure your
.env.localfile:# Database DATABASE_URL="postgresql://..." # Authentication NEXTAUTH_SECRET="your-secret-key" NEXTAUTH_URL="http://localhost:3000" # External APIs (optional) GOOGLE_CLIENT_ID="..." GOOGLE_CLIENT_SECRET="..." # File Upload (if using UploadThing) UPLOADTHING_SECRET="..." UPLOADTHING_APP_ID="..."
-
Set up the database
npm run db:generate npm run db:migrate
-
Start the development server
npm run dev
Open http://localhost:3000 in your browser.
- Next.js 15 - React framework with App Router
- React 19 - Modern React with latest features
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Smooth animations and transitions
- Radix UI - Accessible, unstyled UI primitives
- Lucide React - Beautiful icon library
- React Hook Form - Performant form handling
- Sonner - Toast notifications
- Fabric.js - Powerful HTML5 canvas library
- React Color - Advanced color picker components
- jsPDF - Client-side PDF generation
- JSZip - ZIP file creation for bulk exports
- Drizzle ORM - Type-safe SQL toolkit
- Neon Database - Serverless PostgreSQL
- NextAuth.js - Complete authentication solution
- Hono - Fast, lightweight web framework
- Zustand - Simple, powerful state management
- TanStack Query - Data fetching and caching
- React Use - Essential React hooks
aritfy/
├── src/
│ ├── app/ # Next.js App Router pages
│ ├── components/ # Reusable UI components
│ ├── features/
│ │ └── editor/ # Design editor components
│ │ ├── components/ # Editor-specific components
│ │ ├── hooks/ # Editor hooks and logic
│ │ ├── types.ts # TypeScript definitions
│ │ └── utils.ts # Utility functions
│ ├── db/ # Database schema and configuration
│ ├── hooks/ # Global React hooks
│ └── lib/ # Utility libraries and configurations
├── public/ # Static assets
├── drizzle/ # Database migrations
└── certificates/ # SSL certificates (for HTTPS development)
- Start a New Project: Click "New Design" from the dashboard
- Choose Your Canvas: Select canvas size or start with a template
- Add Elements: Use the toolbar to add text, shapes, or images
- Style Your Design: Customize colors, fonts, and effects
- Save Your Work: Projects auto-save as you work
- Design Each Slide: Switch between slides and design individually
- Organize Slides: Drag thumbnails to reorder your presentation
- Export: Choose to export individual slides or the entire presentation
- PNG/JPEG/WebP: High-quality raster images
- SVG: Scalable vector graphics
- JSON: Editable project files for later modification
npm run dev- Start development server with HTTPSnpm run build- Build production applicationnpm run start- Start production servernpm run lint- Run ESLintnpm run db:generate- Generate database migrationsnpm run db:migrate- Run database migrationsnpm run db:studio- Open Drizzle Studio
# Generate new migrations after schema changes
npm run db:generate
# Apply migrations to database
npm run db:migrate
# Run both generate and migrate
npm run db
# Open database studio
npm run db:studioWe welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow TypeScript best practices
- Write meaningful commit messages
- Add tests for new features
- Ensure responsive design compatibility
- Follow the existing code style
- Issues: Report bugs on GitHub Issues
- Discussions: Join our Community Discussions
- Email: Contact us at support@aritfy.com
- Slide transitions and animations
- Collaborative editing
- Advanced templates library
- Mobile app companion
- AI-powered design suggestions
- PowerPoint import/export
- Real-time presentation mode
- Advanced drawing tools
- v0.1.0 - Initial release with core editor and presentation features
Made with ❤️ by the Me
Website •