A powerful, intuitive web-based image editor that allows you to remove backgrounds and add custom text overlays to create stunning visuals. Perfect for creating social media graphics, marketing materials, and personalized images.
🌐 Live Demo: baelys.co
Click the image above to watch the full demo on YouTube
- Smart Background Removal: AI-powered background removal with high precision
- Drag & Drop Upload: Easy image uploading with instant preview
- Multiple Format Support: Works with PNG, JPG, WEBP, and more
- Rich Text Controls: Full typography control with font family, size, and color
- Text Styling: Bold, italic, and various font weights
- Precise Positioning: Drag and drop text with pixel-perfect placement
- Text Rotation: Rotate text at any angle for creative layouts
- Color Picker: Advanced color selection with hex, RGB, and HSL support
- Layer Management: Organize and reorder text layers with drag-and-drop
- Real-time Preview: See changes instantly as you edit
- Responsive Canvas: Automatic canvas scaling for different screen sizes
- Export Options: High-quality PNG export with 2x pixel ratio
- Intuitive Interface: Clean, modern design with smooth animations
- Keyboard Shortcuts: Efficient workflow with keyboard navigation
- Toast Notifications: Clear feedback for all actions
- Dark/Light Mode: Theme support for comfortable editing
- Frontend Framework: React 18 with Vite
- Canvas Library: Konva.js with React-Konva for high-performance rendering
- Styling: Tailwind CSS with custom animations
- UI Components: Radix UI primitives for accessibility
- State Management: React hooks and context
- Animation: Framer Motion for smooth transitions
- Image Processing: AI-powered background removal API
- Icons: Lucide React and Tabler Icons
- Development: TypeScript support, ESLint, and PostCSS
- Node.js 18+
- pnpm (recommended) or npm
-
Clone the repository
git clone https://github.com/your-username/baelys.git cd baelys -
Install dependencies
pnpm install # or npm install -
Start development server
pnpm dev # or npm run dev -
Open in browser
http://localhost:5173
# Build the application
pnpm build
# Preview the production build
pnpm preview- Upload an Image: Drag and drop or click to select an image
- Remove Background: Click "Remove Background" to process your image
- Add Text: Click "Add Text" to create text layers
- Customize: Use the text controls to style your text
- Export: Click "Export" to download your final image
- Select Text: Click on any text layer to select it
- Move Text: Drag text around the canvas
- Resize: Use the resize handles when text is selected
- Rotate: Use the rotation handle to adjust text angle
- Style: Use the text controls panel to change fonts, colors, and effects
- Reorder Layers: Drag layers in the layer panel to change stacking order
- Delete Layers: Select a layer and click delete
- Toggle Visibility: Show/hide layers as needed
- Add font files to
src/constants/fonts.ts - Import the font in your CSS
- Add the font name to the font selector
The background removal functionality can be extended by modifying src/action.ts. You can integrate different AI services or add additional image processing features.
All UI components are located in src/components/ui/ and can be customized using Tailwind CSS classes.
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
- Follow the existing code style
- Add comments for complex logic
- Test your changes thoroughly
- Update documentation as needed
This project is licensed under the MIT License - see the LICENSE file for details.
- Konva.js for powerful 2D canvas rendering
- Radix UI for accessible UI components
- Tailwind CSS for utility-first styling
- React for the component architecture
- 🌐 Website: baelys.co
- 📧 Email: support@baelys.co
- 🐛 Issues: GitHub Issues
Made with ❤️ by the Baelys team
Website • Demo • Contributing