Skip to content

feat: Add ZIP export and batch selection (#76, #867)#219

Open
stephanbuettig wants to merge 1 commit intohttptoolkit:mainfrom
stephanbuettig:feature/zip-export-and-batch-selection
Open

feat: Add ZIP export and batch selection (#76, #867)#219
stephanbuettig wants to merge 1 commit intohttptoolkit:mainfrom
stephanbuettig:feature/zip-export-and-batch-selection

Conversation

@stephanbuettig
Copy link
Copy Markdown

ZIP Export & Batch Selection

Implements two features discussed in #866:

  • Batch Export (#76) — Multi-select exchanges, export as HAR or ZIP
  • ZIP Export (#867) — Export snippets in 37 formats as a single ZIP

What changed

New "ZIP (Selected Formats)" option in the Export card dropdown. When selected, a format picker replaces the code editor, letting the user choose which of the 37 snippet formats to include. The selection persists across sessions.

Multi-select toolbar. Ctrl+Click, Shift+Click, or Ctrl+A to select multiple exchanges. A toolbar appears with "Export HAR" and "Export ZIP" buttons.

Footer ZIP button. One-click ZIP export of all visible exchanges using the persisted format selection.

How it works

All snippet generation and ZIP compression runs in the existing Web Worker using fflate (as recommended). The UI shows a progress spinner and never freezes, even with thousands of requests.

The ZIP contains:

  • One folder per snippet format (e.g., shell-curl/, python-requests/)
  • Each file named {index}_{METHOD}_{STATUS}_{hostname}.{ext} for readability
  • A .har file with complete traffic (requests AND responses with headers, bodies, timings)
  • _metadata.json with export info
  • _errors.json if any snippets failed (with full context for debugging)

Design decisions following @pimterry's guidance

Guidance Implementation
"fflate is the preferred option" Using fflate with level 6 compression
"heavy processing has to happen off the main thread" All work runs in the existing Web Worker with progress reporting
"include in the dropdown menu... show a download button below" ZIP option at top of Export dropdown, shows format picker + download button
"skip it in [the context menu] scenario" ZIP not added to context menu
"reuse the existing logic" Uses @httptoolkit/httpsnippet directly with HAR data

Testing

  • 15 unit tests for filename generation (zero-padding, hostname extraction, edge cases)
  • Manual E2E testing: 30-request batch export produces 1112 files across 37 formats, 99.9% success rate
  • Single-exchange ZIP export verified (37 format folders + HAR)
  • Fast dev build config (webpack.fast.ts) for rapid iteration (~60s, <1GB RAM)

Screenshots

The ZIP option appears at the top of the existing export dropdown:

Export ▾
─────────
  Archive
    ZIP (Selected Formats)    ← new
─────────
  Shell
    cURL
    HTTPie
    Wget
  JavaScript
    Fetch API
    ...

When selected, the format picker shows checkboxes grouped by language category with quick actions (Select All, Popular, None).

Closes

Related

Implement two features requested by @pimterry:

- Batch Export (httptoolkit#76): Multi-select exchanges via Ctrl+Click, Shift+Click, Ctrl+A with toolbar for batch HAR and ZIP export

- ZIP Export (#867): Export code snippets in 37 formats as a single ZIP archive, with format picker UI and persistent selection

Technical highlights:

- 37 HTTPSnippet formats organized by language category

- All snippet generation runs in the existing Web Worker (fflate compression, level 6)

- Progress reporting every 5% with spinner UI

- Shared format selection via MobX UiStore (persisted across sessions)

- ZIP option integrated into Export card dropdown per @pimterry guidance

- Safe filename convention: {index}_{METHOD}_{STATUS}_{hostname}.{ext}

- Full HAR with complete traffic (requests + responses) included in every ZIP

- Error resilience: failed snippets logged in _errors.json, export continues

Closes httptoolkit/httptoolkit#76

Closes httptoolkit/httptoolkit#867

Related: httptoolkit/httptoolkit#866
@CLAassistant
Copy link
Copy Markdown

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

@socket-security
Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Updatedfflate@​0.4.8 ⏵ 0.8.298 -1100100 +180100

View full report

@pimterry
Copy link
Copy Markdown
Member

pimterry commented Apr 8, 2026

Can you split this into separate PRs please? To review this and discuss each part separately, it'll need to be separate PR for each feature, and then a separate PR for any of the build/testing changes you'd made here if you think they should be included. It's much more effective to review & manage each change separately (either in parallel, or in series if they have direct dependencies) instead of trying to review a combination of everything mixed all together.

Since the discussion 3 weeks back there has been quite a bit of other progress on the multi-select part I'm afraid, so I wouldn't focus on that part to much initially - there's some other changes on main and the multi-select branch that will probably conflict significantly and cover the same ground. Some of that still looks good and will want to be merged into this, but it's more complicated.

The zip export looks much clearer though and very useful already. As a step 1 can you want to extract the bulk zip export into a standalone PR by itself (this one or elsewhere) and then we can discuss that directly?

You'll also need to sign the CLA, see the comment above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants