This is a Next. js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
- Next.js
- TypeScript
- Liveblocks
- Fabric.js
- Shadcn
- Tailwind CSS
🚀 Real-Time Collaboration: Seamlessly collaborate with multiple users by displaying individual cursors, enabling instant chat, and interactive reactions, making teamwork more dynamic and engaging.
🚀 Active User Tracking: Stay informed with a real-time list of active participants, giving you instant visibility into who is contributing and engaged in the collaborative environment.
🚀 Contextual Commenting: Boost communication with the ability to attach comments directly to specific canvas elements, making feedback precise and relevant.
🚀 Versatile Shape Creation: Unleash creativity with a robust set of tools to generate a wide array of shapes, empowering users to craft diverse and intricate designs.
🚀 Image Integration: Elevate your canvas by importing images, enriching the visual narrative with a broader range of content and artistic possibilities.
🚀 Dynamic Customization: Tailor design elements to your exact needs with flexible customization options, ensuring every detail is perfectly aligned with your vision.
🚀 Expressive Freeform Drawing: Let your imagination run wild with freeform drawing capabilities, offering limitless possibilities for artistic expression and creative design.
🚀 Instant Undo/Redo: Navigate your design journey with ease, thanks to the ability to instantly reverse or restore actions, giving you the freedom to experiment without fear.
🚀 Efficient Keyboard Shortcuts: Maximize productivity with intuitive keyboard shortcuts for a range of actions, from basic editing to triggering advanced features like cursor chat and reactions.
🚀 Comprehensive Action History: Keep track of every change with a detailed chronological history, providing a clear overview for project management and version control.
🚀 Advanced Canvas Management: Take full control of your design with powerful functions for deleting, scaling, moving, clearing, and exporting the canvas, ensuring your final output is exactly as envisioned.
…and much more, including an architecturally sound codebase, advanced React hooks, and reusable components designed for scalability and maintainability.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.