Technical Specification: Free Online BSON to JSON Decoder

Overview

A high-performance, client-side utility designed to parse and decode MongoDB BSON (Binary JSON) files or raw hexadecimal/base64 strings into standard, human-readable JSON format. The tool focuses on privacy, security, and speed by processing all data exclusively within the user's browser.

Core Features

1. BSON File Upload: Support for .bson files via a drag-and-drop zone.
2. Raw Input Parsing: Text area for pasting raw BSON strings (Hex or Base64).
3. Real-Time Conversion: Instant parsing with immediate visual feedback.
4. JSON Syntax Highlighting: Clean, readable output with color-coded syntax.
5. Clipboard Integration: One-click functionality to copy parsed JSON to the system clipboard.
6. Download as JSON: Ability to save the decoded result as a standard .json file.

UI/UX Layout

• Header: Clean, minimal navigation bar with the application title and a short "How it works" tooltip.
• Input Section: A segmented control (tabs) to switch between "Upload File" and "Paste Data". Features a prominent drop zone area with a vibrant blue border on hover.
• Control Strip: Action buttons (Clear, Decode, Copy, Download) placed clearly beneath the input zone.
• Output Section: A read-only, syntax-highlighted code block with line numbers and a soft, light-gray background to reduce eye strain.

Aesthetics & Styling

• Color Palette: Strictly Light Mode.
  • Background: #FFFFFF
  • Surfaces/Cards: #F8FAFC
  • Primary Action: #2563EB (Blue)
  • Secondary Action: #64748B (Slate)
  • Text: #1E293B (Dark Slate)
  • Border/Subtle: #E2E8F0
• Typography: Inter or system-ui sans-serif stack, highly readable, focusing on monospace fonts for the JSON output.
• Animations:
  • Smooth fade-in transitions when switching input modes.
  • Subtle scale-on-hover for action buttons.
  • Skeleton loading state for the JSON preview during heavy parsing.

Technical Implementation Constraints

• Architecture: Single HTML file containing CSS and Vanilla JavaScript.
• No Persistence: Strictly forbidden to use localStorage, sessionStorage, or cookies. The tool must remain stateless between page reloads.
• Library Usage: Use the official bson library (available via CDN like unpkg.com) for safe and accurate binary parsing.
• Error Handling: Replace browser alert() with custom, styled floating toast notifications within the DOM for validation errors (e.g., "Invalid BSON format").
• Security: Ensure the iframe is sandboxed properly; no external resource calls except for necessary library CDN links.