I’m going to use Hackpad as an alias for Dropbox Paper in most places.
For the client, Hackpad uses the ACE editor. Dropbox additions appear to use React extensively.
Sadly souremaps aren’t enabled, but we can still find some dependencies with a little grep through the bundle. I think some of these may be dependencies of others.
It looks like most of Dropbox Paper is using react, but there is still jquery there too.
- smartcrop with tracking.js integration
- exif is probably used here to get image orientation
It appears that protobufs are used for sending some messages. Here is a list of protobuf definition names I found.
proto.paper.CaretPosition proto.paper.ClientReadyMessage proto.paper.CollabMessage proto.paper.CollabMessageList proto.paper.LoneCaretMessage proto.paper.StreamingClientControlMessage proto.paper.StreamingClientControlMessage.HiccupMessage proto.paper.StreamingClientControlMessage.KillMessage proto.paper.StreamingClientControlMessage.UseChannelMessage proto.paper.UserChangesMessage
It seems that Chrome and Firefox don’t support the inspection of the streaming connection. The content-type is text/messages, which isn’t a registered MIME type, so that may be the cause.
Dropbox makes extensive use of bundle splitting and progressive loading, so the content loads after about 2.5 seconds, while the
onload event fires at 9.5 seconds.