Infographic Editor is a modern, interactive web application for creating, editing, and exporting infographics. It features a drag-and-drop canvas, customizable nodes and edges, context menus, keyboard shortcuts, and export/import functionality. Built with Next.js, Tailwind CSS, Radix UI, and Zustand for state management, it offers a seamless and beautiful user experience.
- 🎨 Drag-and-Drop Canvas: Easily add, move, and connect nodes.
- 🟢 Customizable Nodes: Support for different shapes (circle, rectangle, ellipse), colors, and styles.
- 🧩 Context Menus: Right-click for quick actions on nodes and canvas.
- ⌨️ Keyboard Shortcuts: Undo, redo, add, and delete nodes with your keyboard.
- 🗂️ Sidebar: Edit node properties and global styles.
- 📤 Export: Download your infographic as JSON or image (PNG/SVG).
- 📥 Import: Load infographics from JSON files.
- 🕹️ Toolbar: Undo/redo, fit view, and center canvas controls.
- 🌗 Theme Support: Light and dark mode with theme switcher.
- 🧩 Radix UI Components: Accessible, beautiful UI elements.
├── app/ # Next.js app directory
│ ├── globals.css # Global styles
│ ├── layout.tsx # App layout
│ └── page.tsx # Main page
├── components/ # UI and editor components
│ ├── infographic-editor.tsx # Main editor logic
│ ├── canvas.tsx # Canvas rendering
│ ├── custom-node.tsx # Node rendering
│ ├── context-menu.tsx # Context menu logic
│ ├── sidebar.tsx # Sidebar for node/global editing
│ ├── toolbar.tsx # Toolbar controls
│ └── ui/ # Radix UI-based components
├── hooks/ # Custom React hooks
│ ├── use-infographic-store.ts # Zustand store
│ ├── use-keyboard-shortcuts.ts
│ └── use-toast.ts
├── lib/ # Utility functions
│ ├── export-utils.ts # Export/import helpers
│ ├── graph-utils.ts # Node/edge helpers
│ └── utils.ts # Misc utilities
├── public/ # Static assets (images, video)
├── styles/ # Additional styles
├── types/ # TypeScript types
│ └── graph.ts # Node/edge types
├── package.json # Project metadata & scripts
└── ...
git clone https://github.com/your-username/infographic-editor.git
cd infographic-editor_2pnpm installpnpm devOpen http://localhost:3000 in your browser.
- Add Nodes: Click the canvas or use the sidebar to add root nodes.
- Edit Nodes: Select a node to edit its label, shape, and styles in the sidebar.
- Connect Nodes: Drag from one node's handle to another.
- Context Menu: Right-click nodes or canvas for quick actions.
- Export/Import: Use the sidebar to export as JSON/image or import from JSON.
- Undo/Redo: Use toolbar buttons or keyboard shortcuts (Ctrl+Z / Ctrl+Y).
| Shortcut | Action |
|---|---|
| Ctrl + Z | Undo |
| Ctrl + Y | Redo |
| Delete | Delete Node |
| N | Add Node |
| B | Toggle Sidebar |
| Command | Description |
|---|---|
pnpm dev |
Start development server |
pnpm build |
Build for production |
pnpm start |
Start production server |
pnpm lint |
Lint code |
-
Place your demo GIF file (e.g.,
demo.gif) in thepublic/directory. -
Reference it in the README using:
<img src="/demo.gif" alt="Demo GIF" width="100%" />
This project is licensed under the MIT License.
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
For questions or feedback, please open an issue or contact the maintainer.