The world's most advanced AI-native creative engine.
Kreathief is a professional-grade, browser-based design tool that replaces Figma, Canva, Photoshop, and mockup tools with one unified platform. Powered by AI, built for speed, and designed to work offline.
- Editable Vector Generation — AI creates fully editable layers, not locked templates
- Multi-Agent Orchestration — Specialized AI agents for layout, color, typography, and mockups
- Intent Inference — AI understands design context and suggests relevant improvements
- Pen Tool with full bezier curve control
- Boolean Operations — Union, subtract, intersect, exclude
- Variable Stroke Widths with pressure sensitivity and velocity-based smoothing
- CMYK Color Support with gamut warnings and print-ready PDF export
- Layer Management — Groups, masks, blend modes, and constraints
- Perspective-correct device and surface mapping
- Automatic lighting and distortion adjustment
- 100+ built-in mockup templates
- Full editing capabilities without internet connection
- Local IndexedDB storage with automatic cloud sync
- AI request queuing for offline generation
- Conflict resolution for multi-device workflows
- PNG, SVG, PDF, PSD (layered Photoshop files)
- CMYK color profiles for print production
- Bleed and crop marks for professional printing
| Category | Technology |
|---|---|
| Frontend | React 18, TypeScript, Vite 5 |
| State Management | Zustand, Reselect |
| Styling | Tailwind CSS, PostCSS |
| Animations | Framer Motion |
| Backend | Supabase (Auth, DB, Real-time, Storage) |
| AI | Google Gemini API, Custom Multi-Agent Pipeline |
| Storage | IndexedDB (offline), Supabase (cloud) |
| Testing | Vitest, React Testing Library, Playwright |
| CI/CD | GitHub Actions, Husky, Lint-Staged |
| Deployment | Vercel |
- Node.js 18+
- npm or yarn
- Supabase account (for backend features)
- Google Gemini API key (for AI features)
# Clone the repository
git clone https://github.com/lanryweezy/Kreathief.git
cd Kreathief
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your API keys
# Start development server
npm run devOpen http://localhost:5173 in your browser.
Create a .env.local file with the following:
# Supabase Configuration
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
# Google Gemini API Key
VITE_GEMINI_API_KEY=your_gemini_api_key
# Optional: External APIs
VITE_UNSPLASH_ACCESS_KEY=your_unsplash_key
VITE_VECTEEZY_API_KEY=your_vecteezy_key
VITE_ICONSCOUT_CLIENT_ID=your_iconscout_client_id
VITE_ICONSCOUT_SECRET_KEY=your_iconscout_secret_key
# Development Mode (set to 'true' to bypass auth)
VITE_USE_QA_BYPASS=false| Command | Description |
|---|---|
npm run dev |
Start development server with HMR |
npm run build |
Build for production |
npm run preview |
Preview production build locally |
npm run test |
Run unit tests with Vitest |
npm run test:ui |
Run tests with Vitest UI |
npm run test:e2e |
Run end-to-end tests with Playwright |
npm run lint |
Run ESLint |
npm run lint:fix |
Fix ESLint issues automatically |
npm run format |
Format code with Prettier |
npm run type-check |
Run TypeScript type checking |
kreathief/
├── components/ # React components
│ ├── canvas/ # Canvas rendering engine
│ ├── panels/ # Side panels (Layers, Assets, AI, etc.)
│ ├── modals/ # Modal dialogs
│ ├── landing/ # Landing page sections
│ └── toolbar/ # Top toolbar components
├── store/ # Zustand state management
│ └── slices/ # Modular state slices
├── services/ # Business logic & API integrations
├── utils/ # Utility functions
├── hooks/ # Custom React hooks
├── workers/ # Web Workers for heavy computation
├── config/ # Application configuration
├── types.ts # TypeScript type definitions
├── constants.ts # Application constants
└── public/ # Static assets
# Run all tests
npm test
# Run tests in watch mode
npm run test:ui
# Run end-to-end tests
npm run test:e2e
# Generate coverage report
npm test -- --coverage- Connect your GitHub repository to Vercel
- Set environment variables in Vercel dashboard
- Deploy automatically on push to
main
The project includes a vercel.json configuration for optimal deployment:
- SPA routing rewrites
- Asset caching headers
- API route handling
npm run build
# Output: ./dist directoryKreathief uses a custom DOM-based rendering engine optimized for 1000+ layers at 60fps:
- Viewport Culling — Only renders visible layers
- Layer Caching — O(1) lookups via Map with automatic invalidation
- Web Workers — Offloads heavy operations (background removal, vectorization)
- Error Isolation — Per-layer error boundaries prevent canvas crashes
Modular Zustand store with 8 focused slices:
UISlice— Modals, toasts, panelsCanvasSlice— Zoom, size, backgroundLayerSlice— Layer CRUD, grouping, orderingHistorySlice— Undo/redo with JSON patchesAISlice— AI generation stateProjectSlice— Save/load projectsBrandSlice— Brand kits and style guidesAgentSlice— Multi-agent orchestration
Hybrid storage with IndexedDB (local) and Supabase (cloud):
- Automatic offline detection
- Pending operation queue
- Conflict resolution on reconnect
- Background sync when online
We 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
- ESLint + Prettier enforced
- Husky pre-commit hooks
- TypeScript strict mode
- Conventional commits preferred
This project is proprietary software. All rights reserved.
Unauthorized copying, distribution, or modification of this file, via any medium, is strictly prohibited.
Built with love and obsession for:
- Designers who deserve better tools
- Developers who believe in offline-first
- AI that assists, not replaces
- Documentation: docs.kreathief.com (coming soon)
- Issues: GitHub Issues
- Email: support@kreathief.com
- Twitter: @kreathief
Made with ❤️ by the Kreathief Team