PPost Designer is a modern, browser-based graphic design application built with React, allowing users to create stunning social media posts, marketing materials, and digital designs without leaving their browser.
- Intuitive Editor Interface: A user-friendly canvas with drag-and-drop functionality
- Shape Tools: Add rectangles, circles, triangles, lines, stars, and polygons
- Text Editing: Add and customize text with different fonts, sizes, and styles
- Image Support: Upload and incorporate images into your designs
- Layer Management: Control the stacking order of elements with an easy-to-use layers panel
- Background Options: Solid colors and patterns for your canvas background
- Grid Toggle: Enable grid for precise alignment
- History Management: Undo/redo functionality
- Responsive Properties Panel: Edit element properties like position, size, color, and opacity
- Keyboard Shortcuts: Boost productivity with common keyboard shortcuts
- Canvas Size Presets: Common social media sizes and custom dimensions
- Local Storage: Designs are saved to your browser's local storage
- Export Options: Download your designs in various formats
- React 19
- Zustand for state management
- React Konva for canvas manipulation
- Tailwind CSS for styling
- React Icons for UI elements
- React Toastify for notifications
-
Clone the repository
-
Install dependencies:
npm installor
yarn installor
pnpm install -
Start the development server:
npm run devor
yarn devor
pnpm dev -
Open http://localhost:5173 in your browser
- From the landing page, click "Create Design"
- Use the left sidebar to add elements, change canvas size, or modify background
- Select elements on the canvas to edit them using the right sidebar
- Use the layers tab in the right sidebar to manage element stacking
- Click Export to save your design
- Ctrl+Z: Undo
- Ctrl+Y or Ctrl+Shift+Z: Redo
- Ctrl+D: Duplicate selected element
- Delete: Remove selected element
- Escape: Clear selection
MIT