Browse and view the exported Facebook Messenger data / messages.

Related tags

React react facebook offline nextjs messenger facebook-messenger
Overview

Facebook Messenger exported JSON viewer

Messenger 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

Features

Simple statistic

statistic

View chatroom just as what you can do on Messenger

offline-viewer

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.

其它

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

You might also like...

JavaScript data grid with a spreadsheet look & feel. Works for React, Angular, and Vue. Supported by the Handsontable team ⚡

JavaScript data grid with a spreadsheet look & feel. Works for React, Angular, and Vue. Supported by the Handsontable team ⚡

Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX. It provides data binding, data validation, filtering

Jan 1, 2023

React components for efficiently rendering large lists and tabular data

React components for efficiently rendering large lists and tabular data

react-window React components for efficiently rendering large lists and tabular data React window works by only rendering part of a large data set (ju

Jan 4, 2023

Fetching data from REST COUNTRIES API, this app (mobile version for now) gives information like area, population, capital, and borders for 195 countries from seven continents.

Fetching data from REST COUNTRIES API, this app (mobile version for now) gives information like area, population, capital, and borders for 195 countries from seven continents.

Space Travellers' Hub World Countries App works with an API which returns informations about 195 countries. Fetching data from REST COUNTRIES API, thi

Aug 8, 2022

Web app that combines data from HowLongToBeat and OpenCritic.

Web app that combines data from HowLongToBeat and OpenCritic.

Should I Play This? Website allows users to search for games and the results merge critic's average rating from OpenCritic and the amount of time to b

Dec 16, 2022

This is Covid-19 data that shows for each country.You can search your country and know its statistics .

COVID-19 Data TRACKER This is Covid-19 data that shows for each country.You can search your country and know its statistics . Built With HTML, CSS, SC

Apr 21, 2022

React Hooks library for remote data fetching

React Hooks library for remote data fetching

Introduction swr.vercel.app SWR is a React Hooks library for remote data fetching. The name “SWR” is derived from stale-while-revalidate, a cache inva

Jan 4, 2023

A collection of composable React components for building interactive data visualizations

A collection of composable React components for building interactive data visualizations

an ecosystem of composable React components for building interactive data visualizations. Victory Contents Getting Started Victory Native API Document

Jan 3, 2023

Data Visualization Components

Data Visualization Components

react-vis | Demos | Docs A COMPOSABLE VISUALIZATION SYSTEM Overview A collection of react components to render common data visualization charts, such

Jan 2, 2023

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

Module SonarCloud Status ag-grid-community ag-grid-enterprise AG Grid AG Grid is a fully-featured and highly customizable JavaScript data grid. It del

Dec 30, 2022
Comments
  • Adopt Window Control Overlay API

    Adopt Window Control Overlay API

    • https://web.dev/window-controls-overlay
    • https://github.com/WICG/window-controls-overlay/blob/main/explainer.md
    • https://github.com/amandabaker/pwa/blob/master/explainer-example/index.html
    • https://chromestatus.com/feature/5741247866077184
    opened by Yukaii 1
  • Statistic

    Statistic

    • https://github.com/dmhacker/facebook-message-analysis/blob/master/fbmessages/analyzer.py
    • https://github.com/simonwongwong/Facebook-Messenger-JSON-viewer (Inspiration)
    • https://github.com/simonwongwong/Facebook-Messenger-Statistics
    opened by Yukaii 1
  • Dynamic theme-color attribute

    Dynamic theme-color attribute

    https://github.com/microsoft/vscode/blob/ae0f691839eff7dc0354224f7cff9ed3a128cf54/src/vs/workbench/browser/style.ts#L125-L137

    Not sure why https://github.com/Yukaii/messenger-JSON-viewer/commit/147733dce6fcb8a127f9ba999b4c2b7127b7d1aa didn't work.

    opened by Yukaii 0
  • Instructions for running locally

    Instructions for running locally

    Hello! I mostly wanted to say this stuff is amazing. But I'm still opening a ticket to say it would be nice to have a set of basic instructions on how to run this locally in the readme. I managed it in a few minutes but mostly because I'm familiar with the tooling i.e. yarn. Keep it up!

    opened by GordonFreemanK 0
Owner
Yukai Huang
會在網路上喵喵叫的都是男孩子; Co-founded @hackmdio. I use tabs, meow.
Yukai Huang
GitHub https://messenger-json-viewer.vercel.app/
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
JSON Hero is an open-source, beautiful JSON explorer for the web that lets you browse, search and navigate your JSON files at speed. 🚀

JSON Hero makes reading and understand JSON files easy by giving you a clean and beautiful UI packed with extra features.

JSON Hero 7.2k Jan 9, 2023
browse synthetic loot

synthetic loot viewer View synthetic loot by wallet address or ENS References Images - https://github.com/jordanmessina/loot-layers Running the Dapp T

Stephan Cilliers 21 Mar 11, 2022
A Facebook Clone which built with reactJS. You can sign in with your Google Account and send realtime posts.

Facebook Clone with ReactJS A Facebook Clone application that you can sign in with your Google Account and send realtime posts. Facebook Clone Demo Li

Mert Çankaya 23 Nov 25, 2022
Mini Social Media App with a liitle bit of facebook components (Still Developing)

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

KingNelxV2 2 Apr 11, 2022
Book Store is a website that allows you to add, remove and view books.

Book Store Book Store is a website that allows you to add, remove and view books. Built With ReactJS Redux React Router Getting Started with Create Re

Ezekiel Utshudi Eteta 9 Jun 23, 2022
Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Kyrillos Hany 5 Mar 11, 2022
A labeler component that Lays out text and overlays textual decorations like labels, predictions, and relations based on given data and handles user interactions on tokens.

react-text-annotator react-text-annotator is a labeler component that: Lays out text and overlays textual decorations like labels, predictions, and re

Microsoft 25 Dec 11, 2022
React components for efficiently rendering large lists and tabular data

React components for efficiently rendering large lists and tabular data. Check out the demo for some examples. Sponsors The following wonderful compan

Brian Vaughn 24.5k Jan 7, 2023
⚛️ Hooks for fetching, caching and updating asynchronous data in React

Hooks for fetching, caching and updating asynchronous data in React Enjoy this library? Try the entire TanStack! React Table, React Form, React Charts

Tanner Linsley 32.1k Jan 9, 2023