Facebook Messenger exported JSON viewer

Messenger 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. start-screen

    The contents of the folder should look like this folder

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


Simple statistic


View chatroom just as what you can do on Messenger



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


The application icon is modified from Heroicons.




View Github