InstaParser – Instagram Chat Viewer

Production Build: https://insta-parser.vercel.app/

InstaParser is a React-based web app that lets you view your Instagram inbox export in a clean, Instagram-like UI.

Meta’s data export gives you raw HTML/JSON files that are hard to read and annoying to navigate. I built InstaParser to make those chats readable again, while keeping everything private by processing all data locally in the browser.

---

Features

• Lets you upload your Instagram inbox export folder
• Renders conversations with Instagram-style sent/received bubbles
• Supports images, videos, reels, audio messages, and links
• Search messages across chats
• Switch timezones to match your local time
• Light / Dark mode
• Fully responsive layout

---

Privacy-first by design

Privacy was a big reason for building this project.

• All parsing happens client-side using browser APIs
• No backend, no database, no file uploads
• Your data never leaves your device

This makes it safe to use even with personal or sensitive chat data.

---

Functionality

• Built using React for UI and state management
• Instagram inbox HTML files are parsed using custom DOM-based utilities
• Parsed data is normalized and rendered dynamically
• Large media files are handled directly in-browser
• Deployed as a static frontend on Vercel

Getting Started

Prerequisites

• Node.js 14+
• npm

Installation

npm install

Development

npm start

Opens the app at http://localhost:3000

Build

npm run build

Creates an optimized production build in the build folder.

Usage

1. Upload your inbox folder (from Instagram data download).
2. View your chat history with Instagram-styled sent and recieve bubbles.
3. Search or Switch Timezones through the settings button.

Project Structure

InstaParser/
├── public/
│   └── index.html          # HTML entry point
├── src/
│   ├── App.js              # Main React component
│   ├── App.css             # Instagram dark theme styles
│   ├── index.js            # React entry point
│   └── utils/
│       └── parser.js       # HTML parser utility
├── package.json
├── vercel.json             # Vercel deployment config
└── README.md

Limitations & future ideas

• Very large inbox exports can be slow due to in-memory parsing
• Parsing depends on Instagram’s current export format

Possible improvements:

• Optimization for conserving memory and preventing memory leaks.
• Virtualized message lists for better performance
• Support for additional Meta export formats

License

See LICENSE file for details.

Thank You

Made with ❤️ by empirea9