Browse and view the exported Facebook Messenger data / messages

by React

Facebook Messenger exported JSON viewer

What’s this?

This is a simple tool to view Facebook Messenger exported JSON files. I made the UI into a Messenger clone, just for fun and to see what Tailwind CSS can do. Another reason is that I want to try out the File System Access API, knowing that it can be used to access the file in a folder just in the browser.

Technical Stack

How to use

  1. Open the Tool
  2. Click the Button and select the folder you downloaded from Facebook.

    The contents of the folder should look like this

  3. Wait a few seconds, sometimes it takes one minute to load.
  4. Tada!

Features

Simple statistic

View chatroom just as what you can do on Messenger

TODOs

If they should be done, then they will be done.

  • Image type message
  • Link
  • Reactions
  • Stickers
  • Subscribe/Unsubscribe events
  • Attachments
  • Photos View
  • Calendar to jump to specific date
  • Date
    • Sent at for each message
    • Date/Time separator
  • Info Panel
    • Statistic
      • message count (from both side)

Previous works

Credits

The application icon is modified from Heroicons.

其它

翻閱數年前的訊息實在是不忍直視……

GitHub

View Github