MarkUp (Screen Annotation)

Resources

Situation

As a software engineer who frequently gives presentations, participates in mob programming sessions, and brainstorms with others, I found myself needing a universal way to draw on my screen and on others’ screens. I like Slack’s pencil tool, but it only works within Slack, and other platforms either do it differently or don’t offer it at all.

Task

Build a screen annotation tool that works with any screen sharing application, is completely peer-to-peer, has low latency, and can be used on your own screen or someone else’s.

Action

MarkUp is built using React and Electron for eventual cross-platform desktop support.
It uses PeerJS to establish direct peer-to-peer connections between users.
To start a session, MarkUp displays a QR code containing:
- The unique PeerJS ID
- The QR code’s pixel width and height
- Its position in pixels relative to the edges of the screen
- The MarkUp app version for feature compatibility
When another user wants to connect:
- MarkUp takes a screenshot of the screen
- It searches for the QR code
- If found, it decodes the information and uses it to connect to the host via PeerJS
- Because the QR code includes its size and position relative to the host’s screen, MarkUp can precisely identify where the screen share is located, calculate any necessary scaling, draw an overlay around the shared area, and accurately translate coordinates between the user’s and host’s screens.

Result

MarkUp works great for drawing on your own screen, and if someone else is in the meeting, everyone can collaborate-regardless of whether you’re using Zoom, Slack, Teams, Google Meet, or any other platform. Because it’s peer-to-peer, there’s no server in the middle, so latency is low and privacy is high.

It also supports offline use and includes a whiteboard mode for brainstorming together in person.

You can use it for free here.