A powerful and intuitive digital art creation platform built with Next.js, TypeScript, and modern web technologies. Create stunning artwork with advanced drawing tools, layer support, and a seamless user experience.
- Advanced Brushes: Multiple brush types with customizable size, opacity, and flow
- Shape Tools: Draw rectangles and circles with precision
- Text Tool: Add text annotations to your artwork
- Eraser: Remove content with adjustable size
- Unlimited History: Full undo/redo functionality with extensive history tracking
- Layer Support: Organize your artwork with multiple layers
- Color Management: Comprehensive color picker with saved palettes and history
- Export Options: Save artwork in PNG, JPG, WebP, and SVG formats
- Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
- Touch Support: Full touch and stylus support for drawing
- Dark/Light Theme: Automatic theme switching based on system preferences
- Intuitive Interface: Clean, modern UI built with shadcn/ui components
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Icons: Lucide React
- Package Manager: pnpm
- Node.js 18+ or 20+
- pnpm package manager
-
Clone the repository
git clone https://github.com/SohamAI99/Digital-Art-Canvas.git cd digital-art-canvas -
Install dependencies
pnpm install
-
Run the development server
pnpm dev
-
Open your browser
Navigate to http://localhost:3000 to start creating art!
digital-art-canvas/
├── app/ # Next.js app directory
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Homepage
│ ├── draw/ # Drawing page
│ ├── help/ # Help page
│ └── settings/ # Settings page
├── components/ # React components
│ ├── ui/ # shadcn/ui components
│ ├── drawing-canvas.tsx # Main canvas component
│ ├── color-picker.tsx # Color picker component
│ └── theme-provider.tsx # Theme provider
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── public/ # Static assets
└── styles/ # Additional styles
- Navigate to the drawing page
- Select your preferred tool from the toolbar
- Choose your color using the color picker
- Adjust brush size and opacity as needed
- Start drawing on the canvas
- Undo/Redo: Use Ctrl+Z / Ctrl+Y or the toolbar buttons
- Clear Canvas: Remove all content with the clear button
- Export: Save your artwork in various formats
- Layers: Organize complex artwork (future feature)
Create a .env.local file in the root directory:
# Add your environment variables here
NEXT_PUBLIC_APP_URL=http://localhost:3000The app is highly customizable. You can modify:
- Colors: Update the color palette in
components/color-picker.tsx - Tools: Add new drawing tools in
components/drawing-canvas.tsx - UI: Customize the interface using Tailwind CSS classes
- Themes: Modify themes in
components/theme-provider.tsx
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 tests for new features
- Update documentation as needed
- Ensure all tests pass before submitting
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with Next.js
- UI components from shadcn/ui
- Icons by Lucide
- Inspired by digital art tools like Krita and Photoshop
If you have any questions or need help:
Happy Creating! 🎨
Made with ❤️ by SohamAI99