Calidraw Bill — Draw it. Bill it.
Inspiration
Freelancers, designers, contractors, and small agencies often begin their work with a sketch. A client explains an idea, the freelancer draws a rough design, and both sides discuss the scope directly on a canvas.
However, once the discussion turns into money, the process usually moves somewhere else. Someone has to calculate the price, prepare a quote, create an invoice, send it to the client, and wait for payment.
We saw an opportunity to bring these steps together.
What if the same canvas used to discuss and design a project could also become the place where people negotiate prices, agree on a deal, and initiate payment?
That idea inspired Calidraw Bill: a collaborative drawing and payment experience that connects visual communication with real transactions.
What it does
Calidraw Bill transforms a collaborative drawing canvas into a space where people can discuss project requirements, negotiate prices, and manage payments.
Instead of switching between a drawing application, messaging platform, and invoicing software, participants can follow the entire workflow within one experience.
For the host (freelancer or service provider):
- Visual payment requests: Select drawing elements and turn them into a payment request.
- Price negotiation: Propose an amount and negotiate with the collaborator directly on the canvas.
- Counteroffers: Review counteroffers and respond by accepting, rejecting, or adjusting the proposed amount.
- Invoice generation: Generate a PayPal invoice once both participants agree on the price.
- Payment tracking: Monitor invoice and payment status through the application.
For the collaborator (client):
- Live collaboration: Join the same drawing room through an invitation link.
- Interactive negotiation: Receive payment requests and respond with acceptance or counteroffers.
- Transparent pricing: Review the proposed amount before agreeing.
- PayPal checkout: Open the generated invoice and complete payment through PayPal.
The key interaction
The most important part of Calidraw Bill is the connection between collaboration and payment.
When a client completes a PayPal payment, the backend verifies the payment notification and broadcasts the updated status to the participants. A PAID stamp can then appear directly on the relevant canvas elements.
Accepting an offer does not automatically mark it as paid. The application distinguishes between agreement, invoice creation, and confirmed payment.
How we built it
We built Calidraw Bill around the existing Excalidraw drawing and collaboration experience, extending it with negotiation and payment functionality.
The architecture separates the drawing interface, real-time communication, negotiation logic, and payment processing.
Our technology stack includes:
- Frontend: React and Excalidraw for the interactive drawing experience.
- Real-time communication: Socket.IO for synchronizing negotiation events between participants.
- Backend: Node.js and Express for API endpoints, negotiation workflows, and payment operations.
- Payment integration: PayPal Invoicing API for invoice creation and sending.
- Payment verification: PayPal webhooks for receiving payment notifications and updating transaction status.
- Deployment: Vercel for the frontend and Render for the collaboration and backend services.
Workflow
The application follows this sequence:
- A host creates a collaborative room and invites a client.
- The host selects drawing elements and creates a payment request.
- The collaborator receives the request and can accept, decline, or submit a counteroffer.
- Both participants continue negotiating until they agree on an amount.
- The host generates and sends a PayPal invoice through the backend.
- The collaborator opens the invoice and completes payment through PayPal.
- The backend verifies the PayPal webhook and updates the negotiation's payment status.
- Both participants receive the updated status, and the canvas displays the PAID indication.
PayPal credentials remain on the backend rather than being exposed in the browser. This keeps sensitive payment operations separate from the client-side application.
Challenges we ran into
One of our biggest challenges was connecting a collaborative drawing experience with a transaction workflow.
A drawing application normally focuses on synchronizing visual changes. A payment workflow introduces additional requirements: agreement states, invoice creation, payment confirmation, and error handling.
We had to design these as separate stages rather than treating a user's acceptance as a completed transaction.
Another challenge was real-time synchronization. Both participants must see negotiation updates immediately. If one person accepts an offer, the other person should not need to refresh the page to see the updated status.
This required careful handling of Socket.IO events, room membership, frontend state updates, and reconnection behavior.
PayPal integration introduced another important consideration. Creating an invoice and confirming that it has been paid are two different operations. We designed the backend to use PayPal's payment notifications and verification process rather than trusting a frontend status update.
Finally, we had to preserve the original drawing experience while introducing payment-related interfaces. The negotiation interface needed to complement the canvas instead of becoming a separate application that interrupts collaboration.
Accomplishments that we're proud of
We are proud of building a workflow that connects visual collaboration with payment negotiation.
Some of the important accomplishments include:
- Extending an Excalidraw-based experience with a payment negotiation workflow.
- Connecting two participants through real-time collaboration.
- Designing interactive payment requests and counteroffers.
- Integrating PayPal Invoicing into the application architecture.
- Separating offer acceptance from actual payment confirmation.
- Designing a webhook-based payment verification flow.
- Bringing payment status back into the collaborative canvas.
Our favourite part of the project is the idea that a transaction can become part of the visual collaboration experience rather than a disconnected step after the discussion.
What we learned
Building Calidraw Bill taught us that integrating payments into an existing application requires more than adding a checkout button.
A reliable transaction involves multiple independent states. An accepted offer is not an invoice, an invoice is not a payment, and a payment notification must not be trusted until it has been verified.
We also learned how important real-time state synchronization becomes when multiple users participate in the same workflow. The backend must maintain authoritative state, while each connected client must receive updates consistently.
Another important lesson was the value of extending an existing open-source project. Building on Excalidraw allowed us to focus on a new interaction model instead of recreating a drawing engine from scratch.
Most importantly, we learned that financial operations should remain deterministic and verifiable, even when the surrounding experience is collaborative and interactive.
What's next for Calidraw Bill
We see several opportunities to extend the platform:
- Structured project estimates: Convert selected canvas elements into detailed line items with quantities, descriptions, and prices.
- Advanced negotiation: Add negotiation history, multiple proposals, and clearer agreement tracking.
- Invoice improvements: Support richer invoice details, tax calculations, and additional currencies where supported by PayPal.
- Payment notifications: Improve real-time payment updates and transaction history.
- Project milestones: Support milestone-based invoices and partial payments.
- Collaboration improvements: Make the negotiation experience more reliable across reconnects and multiple participants.
- Client and freelancer workspace: Maintain project discussions, drawings, invoices, and payment records together.
Our long-term vision is to make Calidraw Bill a place where people can visualize an idea, agree on its value, and complete the transaction without breaking the flow of collaboration.
Calidraw Bill — Draw it. Bill it.
