PROJECT

Online Whiteboard for Real-Time Creative Collaboration

Custom software development, Real-time collaboration, Freehand drawing, Board sharing, Private project spaces, File uploads, PNG and PDF export

  • Industry: Creative services
  • Czech Republic Location: Czech Republic
  • Delivery time: 16 weeks
  • Technologies: JavaScript / TypeScript (Node.js), Python
4+ months

This client spends time keeping creative work, comments, and files aligned across distributed teams. The online whiteboard is a web-based workspace where the agency creates shared boards, draws freehand, and adds visual content. It gives project managers and team members one place for collaboration on desktop and mobile devices. Private spaces, permissions, comments, session review, and board export support the work.

Summary

Problem

The creative agency manages visual collaboration across separate discussions, files, and board-sharing steps.

Solution

The solution became a responsive online whiteboard with synchronized canvas state, project spaces, and chat.

Result

The software is made to reduce manual coordination and rework around shared creative work.

Client story

The client is a creative agency from the Czech Republic. It works with distributed teams that create, exchange, and review visual content together.

Creative work involves freehand sketches, text, and images. It also includes comments, shared files, and board permissions.

The request was to provide profiles, discovery or matching, and project management. It also covered communication and collaboration.

Analytics and recorded activity were part of the request. Responsive cloud access was required as well.

The solution was shaped as a modular web application. Special attention was paid to synchronized boards, private project spaces, live cursors, and comments.

Attachment-supported chat, session playback, and PNG or PDF export completed the workspace.

The client asked for

  1. Enable profiles, discovery, projects, communication, and collaboration workflows.
  2. Provide analytics, dashboards, metrics, and replayable activity.
  3. Work responsively on desktop and mobile devices.
  4. Use scalable cloud hosting with documentation and future extension options.

Why ready-made software did not fit

Ready-made workplace innovation platforms help teams create applications and automate business processes, but their descriptions position them as low-code or no-code application platforms rather than dedicated shared canvases. A custom platform was needed to keep synchronized drawing, live cursors, and comments in one workflow. It also kept permissions, private spaces, file exchange, and session playback together.

Project overview

The solution was designed around a responsive web application with synchronized editing and room-based collaboration. The canvas state stays available across users and sessions, while the interface brings drawing, text, and images together.

To handle controlled collaboration, private project spaces and board ownership were provided. Sharing settings and edit permissions define access to each board, while the board library keeps existing work organized.

A real-time chat connects conversation with board work. Messages, attached files, and comment references remain part of the shared session.

Session playback records drawing activity for later review by an analyst or trainer. The export and file exchange panel handles reference images, cloud files, PNG boards, and PDF boards.

The system was structured as modules so analytics, dashboards, documentation, and later extensions can be added without rebuilding the whole platform. Documentation can be generated with @docusaurus/core (a tool for documentation websites) or Sphinx (a documentation generator).

Key features delivered

  • Synchronized canvas state
  • Collaborative whiteboard editing
  • Freehand drawing tools
  • Live cursors and comments
  • Private project spaces
  • Board sharing and permissions
  • Real-time chat with attachments
  • Session recording and playback
  • PNG and PDF board export

Can be added

+ Session recording + Session playback + Wireframe creation + PNG export + PDF export

Who else can use this solution

These businesses have a similar task, and the same solution can be adapted to their shared visual sessions.

A creative studio

Task It needs one place for shared sketches, visual references, comments, and review sessions.
How the solution helps The solution helps its team draw together, exchange files, control board access, and export finished boards.
Creative studios

A remote teaching platform

Task It needs instructors and participants to work on visual boards during shared sessions.
How the solution helps The solution helps them combine freehand drawing, comments, attachments, participant presence, and session playback.
Business services

A creator collaboration marketplace

Task It needs collaborators to discuss campaign work and manage shared visual materials.
How the solution helps The solution helps them use private project spaces, board permissions, real-time chat, and export tools.
Creative agencies

Technology stack

JavaScript / TypeScript (Node.js)

Web application development

This language family supports the responsive web interface and real-time collaboration features.

Python

Analytics and data analysis

Python supports analytics, reporting, and activity analysis where required.

PHP

Server-side application work

PHP is available for server-side application modules.

css

Interface styling

css (a stylesheet parser and stringifier) supports the styling of the web interface.

dropbox

Cloud file exchange

dropbox (an SDK for the Dropbox API) connects reference files and cloud storage content to the board.

jspdf

PDF board export

jspdf (a JavaScript PDF creation library) generates PDF versions of boards.

pandas

Activity data analysis

pandas (a Python data analysis library) supports reporting and analysis of recorded activity.

@docusaurus/core

Documentation website

@docusaurus/core (a documentation website generator) can publish system guidance for the client team.

PNG

Image board export

PNG files store exported board images for sharing and review.

PDF

Document board export

PDF files store exported boards as documents.

Integrations

Dropbox

Reference files and cloud-storage files move between Dropbox and the board through its SDK.

Analytics services

Recorded activity can pass to analytics services for metrics, reporting, and dashboards.

PNG and PDF files

Board contents move out of the platform as PNG images or PDF documents.

The result

Shared boards keep visual work together

The board workspace gives the creative agency a shared canvas for freehand drawing, text, and images. It also supports sticky notes, comments, and live participant presence.

Synchronized editing makes the current canvas visible across the collaboration session, while permissions define who can access or edit it.

How it works

  1. The canvas synchronization module keeps the canvas state, drawings, text, images, and sticky notes aligned across users and sessions.
  2. The freehand drawing tool shows drawing activity on the collaborative whiteboard.
  3. Live cursors and comments show user presence and discussion alongside the board work.
Tip: Private project spaces and board permissions keep shared creative work controlled.
Shared board workspace

Shared board workspace

Functions on this screen
Canvas State Synchronization Collaborative Whiteboard Freehand Drawing Tool Collaborate in Real-Time Manage board sharing

Controlled spaces make boards easier to manage

The board library brings existing boards and project spaces into one view. Ownership, access, and edit permissions make the board structure clear for project managers and team members.

How it works

  1. The board list shows board names and board ownership.
  2. Private project spaces connect boards with their project spaces.
  3. Sharing settings store user access and edit permissions for each board.
Board library and project spaces

Board library and project spaces

Functions on this screen
Manage board sharing Private Project Spaces

Chat keeps files and discussion beside the board

The collaboration chat keeps messages, attachments, and participant identities together during a shared session. This gives the agency one communication area for creative discussion and file exchange.

Comment references connect conversation with the relevant board work.

How it works

  1. The real-time chat panel shows conversation messages and participant identities.
  2. The message composer sends discussion alongside the shared session.
  3. The attachment upload control adds attached files, while comment references connect messages to board work.
Collaboration chat

Collaboration chat

Functions on this screen
Real-time Collaboration Collaborate in Real-Time

Playback supports drawing review

The session review screen gives analysts and trainers a way to examine how a drawing session was created. A timeline and replay area place drawing events in sequence with review notes.

This makes recorded activity useful for training, review, and later discussion.

How it works

  1. The session list shows recorded drawing sessions.
  2. The session timeline maps drawing session events to their replay position.
  3. The canvas replay area displays the drawing session while review notes remain available.
Note: Playback is an optional extension for reviewing recorded drawing activity.
Session playback and review

Session playback and review

Functions on this screen
Session Playback Feature Recording drawing sessions

Export turns boards into shareable files

The file exchange panel brings reference images and cloud files into the board and prepares completed boards for sharing outside the session. PNG and PDF actions support two common output forms.

Export status makes the state of the generated board file visible.

How it works

  1. The image and cloud-file upload controls add images and cloud storage files to the board.
  2. The file list shows uploaded images and cloud storage files.
  3. The PNG and PDF export actions produce PNG boards and PDF boards while the export status shows their state.
Board export and file exchange

Board export and file exchange

What the solution gives

With this solution, the creative agency can:

  • Create and edit shared visual boards in real time.
  • Keep sketches, comments, files, and permissions in one workspace.
  • Control access through private project spaces and board settings.
  • Discuss board work through chat with shared attachments.
  • Review recorded drawing sessions with playback.
  • Export boards as PNG images or PDF documents.

Could ready-made systems do the job?

Before the design, the task was compared with ready-made products by their own descriptions.

What the client needs Low-code platforms Claris FileMaker, AppSheet, Ninox No-code app platforms Budibase, Google App Maker, Appify Enterprise app platforms BMC Helix Platform, Grid Custom solution
Profiles, discovery, and matching — — —
Projects, communication, collaboration partly partly partly
Analytics and replayable activity — — —
Responsive desktop and mobile use — — —
Fits the client's own rules: stages, roles, reports partly partly partly
All steps in one place — — —
No manual steps between programs partly partly partly

By the public descriptions of the products and their category.

Ready-made products cover parts of application building, collaboration, process automation, and reporting. They are enough when a team needs only a general internal application or one isolated process.

They do not provide the client's dedicated shared canvas as one place with synchronized drawing, live cursors, comments, private spaces, playback, file exchange, and board export. The separate parts would still require configuration and manual connections between products.

In the end

In the end, the solution was made to take manual coordination out of the path from a creative idea to a shared, reviewable board.

FAQ

Thinking about building a similar system? Read the answers below to see how a custom online whiteboard can combine visual collaboration, access control, file exchange, and review.

Need something similar? Let's talk
Or browse more projects