3MFdiff

A lightweight, browser-based tool for comparing Bambu Studio / Orca Slicer .3mf file settings side by side. Identify differences between profiles at a glance — no server, no uploads, fully offline.

Screenshots

Drag & drop interface for loading both .3mf files.

Comparison view — differences highlighted in red, identical settings in green.

Features

• 🔍 Side-by-side comparison — Load two .3mf files and instantly see all setting differences.
• 📂 700+ settings categorized — Settings grouped into 33 logical categories (Acceleration, Filament, Retraction, etc.).
• 🎯 Focus on differences — Toggle "Differences only" to see exactly what changed.
• 🔎 Full-text search — Filter settings by key name.
• 🌐 i18n ready — Interface available in English and Russian with auto-detection.
• 🔒 100% private — Everything runs in your browser. No files are uploaded anywhere.
• ⚡ Lightning fast — Zero-config, instant comparison powered by useMemo.

Quick Start

Prerequisites

• Node.js 18+
• npm 9+

Local Development

# Install dependencies
npm install

# Start dev server with HMR
npm run dev

# Open http://localhost:5173

Build for Production

npm run build

Output goes to dist/. Preview it locally:

npm run preview

Linting

npm run lint

Usage

1. Open the app in your browser.
2. Drag & drop two .3mf profile files (from Bambu Studio, Orca Slicer, or similar slicers).
3. The tool extracts and compares all settings automatically.
4. Use the toolbar to toggle between showing all settings or only differences, and search by key name.
5. Expand any category to inspect individual settings.

How It Works

.3mf files are ZIP archives. 3MF Comparator reads the Metadata/project_settings.config JSON from inside the ZIP (entirely in the browser) and compares the key-value pairs between the two files.

Localization

The app ships with two locales out of the box:

Language	Code	Default
English	en
Russian	ru

The language is auto-detected from the browser on first visit and persisted in localStorage. A dropdown in the header allows manual switching.

Adding a New Language

1. Create src/i18n/locales/<lang>.json with all keys from existing locales.
2. Import it in src/i18n/index.ts and add to the resources object.
3. Add <lang> to the languages array in the same file.

Architecture

src/
├── i18n/               # Translations & i18next config
│   └── locales/        # One JSON per language
├── components/         # React UI components
│   ├── FileUploader.tsx       # Drag & drop zone
│   ├── SettingsDiffTable.tsx  # Main comparison table
│   ├── DiffBadge.tsx          # Color-coded status indicators
│   └── ExpandableCell.tsx     # Collapsible long-value cells
├── hooks/
│   └── use3mfComparison.ts    # Core comparison logic
├── utils/
│   ├── settingsParser.ts      # .3mf ZIP extraction
│   └── categorization.ts      # Category definitions & mapping
├── App.tsx             # Top-level component
├── main.tsx            # Entry point
└── types.ts            # Shared TypeScript interfaces

Design philosophy: Stateless components + a single composable hook. No global state, no routing, no build-time API. The comparison runs reactively via useMemo when settings change.

Tech Stack

Category	Technology
Framework	React 19
Language	TypeScript 6.0
Bundler	Vite 8
Styling	Tailwind CSS 4
i18n	i18next + react-i18next + ICU
ZIP parsing	jszip
Linting	oxlint

Contributing

Contributions are welcome!

License

This project is licensed under the GNU Affero General Public License v3.0. © 2026 ilfarpro.