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

• Next.JS + TailwindCSS
• File System Access API

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

Window Controls Overlay as PWA (actually not a feature :p)

Development (Running locally)

Before you start, make sure you have Node.js and Yarn installed.

First, clone the repository:

git clone https://github.com/Yukaii/messenger-JSON-viewer.git

Then, install the dependencies:

cd messenger-JSON-viewer
yarn install

Finally, run the development server:

yarn dev

The server should be running at http://localhost:3000.

TODOs

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

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

Previous works

• https://github.com/simonwongwong/Facebook-Messenger-JSON-viewer

Credits

The application icon is modified from Heroicons.

其它

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