Rigma is a powerful, collaborative design tool inspired by Figma. Built with Next.js, Liveblocks, and Fabric.js, it enables real-time collaboration and interactive design experiences. Rigma supports features such as live cursors, emotes, comments, shape drawing, and text typing on a canvas.
- Real-time Collaboration: Work together with team members in real-time with live updates. π«π¬
- Live Cursors: See the cursor movements of collaborators as they happen. π
- Emotes and Reactions: Express emotions and provide feedback with emotes. ππ
- Commenting System: Leave comments and feedback directly on the canvas. π¬
- Shape Drawing: Draw basic shapes (rectangles, circles, etc.) on the canvas. π¦π΅
- Text Tool: Add and edit text directly on the canvas. βοΈ
Check out the live demo: Rigma Demo
To get a local copy up and running, follow these steps.
Make sure you have the following installed on your machine:
-
Clone the repository:
git clone https://github.com/RayenRk/rigma.git cd rigma
-
Install dependencies:
npm install
-
Set up environment variables: Create a
.env.local
file in the root directory and add the following:NEXT_PUBLIC_LIVEBLOCKS_API_KEY=your-liveblocks-api-key NEXT_PUBLIC_LIVEBLOCKS_SECRET_KEY=your-liveblocks-secret-key
Replace
your-liveblocks-api-key
andyour-liveblocks-secret-key
with your actual Liveblocks API keys. -
Run the development server:
npm run dev
-
Open http://localhost:3000 with your browser to see the result.
Once the development server is running, you can start using Rigma by navigating to the home page. You can create a new canvas, invite collaborators, and start designing together in real-time.
- Creating Shapes: Select the shape tool and draw on the canvas. π»πΈ
- Typing Text: Use the text tool to add and edit text. π
- Adding Comments: Type "/" to add comments to specific parts of your design. π¨οΈ
- Using Emotes: Click on the emote icon to express reactions. π
- Observing Cursors: Watch live cursor movements to see where collaborators are focusing. π
- Next.js: The React framework for production. βοΈ
- Liveblocks: Real-time collaboration infrastructure. β±οΈ
- Fabric.js: A powerful JavaScript canvas library. ποΈ
- React: A JavaScript library for building user interfaces. π§©
- Tailwind CSS: A utility-first CSS framework for styling. π¨
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project. π΄
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
). πΏ - Commit your Changes (
git commit -m 'Add some AmazingFeature'
). π¬ - Push to the Branch (
git push origin feature/AmazingFeature
). π - Open a Pull Request. π