[PR #5797] feat: git repository sync for collections #5358

New issue

Open

opened 2026-03-17 02:48:48 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:48:48 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5797
Author: @NilsJacobsen
Created: 1/22/2026
Status: 🔄 Open

Base: main ← Head: main

📝 Commits (2)

a8a9a80 feat: add git sync for collections (WIP)
e711374 feat: unapplied changes indicator

📊 Changes

13 files changed (+2129 additions, -16 deletions)

View changed files

📝 packages/hoppscotch-common/package.json (+2 -0)
📝 packages/hoppscotch-common/src/components.d.ts (+1 -0)
📝 packages/hoppscotch-common/src/components/collections/Collection.vue (+190 -1)
📝 packages/hoppscotch-common/src/components/collections/ImportExport.vue (+43 -1)
📝 packages/hoppscotch-common/src/components/collections/index.vue (+36 -1)
➕ packages/hoppscotch-common/src/components/importExport/ImportExportSteps/GitFolderImport.vue (+137 -0)
➕ packages/hoppscotch-common/src/helpers/import-export/import/import-sources/GitSource.ts (+49 -0)
📝 packages/hoppscotch-common/src/modules/dioc.ts (+6 -0)
📝 packages/hoppscotch-common/src/services/persistence/index.ts (+157 -3)
➕ packages/hoppscotch-common/src/services/versioned-fs.service.ts (+513 -0)
📝 packages/hoppscotch-selfhost-web/package.json (+1 -0)
📝 packages/hoppscotch-selfhost-web/vite.config.ts (+9 -0)
📝 pnpm-lock.yaml (+985 -10)

📄 Description

PR: Git Repository Sync for Collections

Issue Reference

Working on closing #870 - Sync Collections with Git repo

Problem: Teams need to sync API request collections with Git repositories to version control collections alongside code.

Demo Video

https://www.loom.com/share/9aa9edd9ad1b4f7191cc57038f7c9d1c

New capabilities

✅ Connect to local git repository
✅ Switch branches to integrate in workflows
✅ Bidirectional Sync between IDE (local git) and Hoppscotch in the browser

Opportunity

This creates an easy way to handle git inside the browser. Which leads to close gaps between Hoppscotch and other code first API tools like https://www.usebruno.com/.

Architecture Diagramm

What's changed

I added Legit because it's open source, simple and I think it's a perfect fit for git sync at hoppscotch.

Small remark: I'm co-founder of Legit, just so you know.

Services

versioned-fs.service.ts: Core service managing legitFs operations
- Branch management (create/switch collections branches)
- Read/write collections to versioned FS

Components

GitFolderImport.vue: Modal for selecting local Git repository
Collection.vue: Git collection indicators (branch icon, branch name, unapplied changes dot)
ImportExport.vue: Integration with import/export system
index.vue: Window focus sync handler

Persistence

persistence/index.ts: Bidirectional sync logic
- Filters git vs regular collections
- Writes git collections to legitFs
- Stores FileSystemDirectoryHandle in IndexedDB

Configuration

vite.config.ts: Added Node.js polyfills for browser compatibility

Current limitations

I would be happy to resolve those issues when you like the approach.

Single Repository: Assumes one git repository collection per session (should be multiple as collections are already)
Single File Format: All collections in one rest-collections.json file. Best case this should be multiple files so it is also browsable in code.

Still think that this could really be an enabler for engineering workflows.
I would love to get feedback on this proposal and hear if that is going in the right direction.

Summary by cubic

Add Git repository sync for collections with branch switching and bidirectional local sync. Teams can connect a local repo and version collections alongside code.

New Features
- Connect a local Git repo via a new “Git Folder” import step; switch branches from the UI.
- Bidirectional sync of collections to rest-collections.json in the repo; integrates with Import/Export.
- Collection list shows current branch and an “unapplied changes” indicator.
- Sync persists across sessions and runs on window focus. Limitations: one repo per session; single-file format.
Dependencies
- Added @legit-sdk/core and @jsonjoy.com/fs-fsa-to-node for versioned FS over the File System Access API.
- Added vite-plugin-node-polyfills to support Node built-ins in self-hosted builds.

^{Written for commit e7113747df. Summary will update on new commits.}

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/5797 **Author:** [@NilsJacobsen](https://github.com/NilsJacobsen) **Created:** 1/22/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `main` --- ### 📝 Commits (2) - [`a8a9a80`](https://github.com/hoppscotch/hoppscotch/commit/a8a9a80ef4d721455c02014037f12b0da923b76d) feat: add git sync for collections (WIP) - [`e711374`](https://github.com/hoppscotch/hoppscotch/commit/e7113747df017526a88d8d098839b15616008ae2) feat: unapplied changes indicator ### 📊 Changes **13 files changed** (+2129 additions, -16 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/package.json` (+2 -0) 📝 `packages/hoppscotch-common/src/components.d.ts` (+1 -0) 📝 `packages/hoppscotch-common/src/components/collections/Collection.vue` (+190 -1) 📝 `packages/hoppscotch-common/src/components/collections/ImportExport.vue` (+43 -1) 📝 `packages/hoppscotch-common/src/components/collections/index.vue` (+36 -1) ➕ `packages/hoppscotch-common/src/components/importExport/ImportExportSteps/GitFolderImport.vue` (+137 -0) ➕ `packages/hoppscotch-common/src/helpers/import-export/import/import-sources/GitSource.ts` (+49 -0) 📝 `packages/hoppscotch-common/src/modules/dioc.ts` (+6 -0) 📝 `packages/hoppscotch-common/src/services/persistence/index.ts` (+157 -3) ➕ `packages/hoppscotch-common/src/services/versioned-fs.service.ts` (+513 -0) 📝 `packages/hoppscotch-selfhost-web/package.json` (+1 -0) 📝 `packages/hoppscotch-selfhost-web/vite.config.ts` (+9 -0) 📝 `pnpm-lock.yaml` (+985 -10) </details> ### 📄 Description # PR: Git Repository Sync for Collections ## Issue Reference Working on closing [#870 - Sync Collections with Git repo](https://github.com/hoppscotch/hoppscotch/issues/870) **Problem**: Teams need to sync API request collections with Git repositories to version control collections alongside code. ## Demo Video <a href="https://www.loom.com/share/9aa9edd9ad1b4f7191cc57038f7c9d1c"> <img width="2991" height="1232" alt="Bildschirmfoto 2026-01-22 um 17 13 54" src="https://github.com/user-attachments/assets/da223026-4314-4416-87cb-4c7dff56bcc7" /> </a> > https://www.loom.com/share/9aa9edd9ad1b4f7191cc57038f7c9d1c ## New capabilities ✅ Connect to local git repository ✅ Switch branches to integrate in workflows ✅ Bidirectional Sync between IDE (local git) and Hoppscotch in the browser ## Opportunity This creates an easy way to handle git inside the browser. Which leads to close gaps between Hoppscotch and other code first API tools like https://www.usebruno.com/. ## Architecture Diagramm <img width="821" height="726" alt="Bildschirmfoto 2026-01-22 um 16 07 43" src="https://github.com/user-attachments/assets/5163cb65-c11e-45ab-88bd-751ed616b2a9" /> ## What's changed I added [Legit](https://legitcontrol.com/docs) because it's open source, simple and I think it's a perfect fit for git sync at hoppscotch. > Small remark: I'm co-founder of Legit, just so you know. ### Services - **`versioned-fs.service.ts`**: Core service managing legitFs operations - Branch management (create/switch collections branches) - Read/write collections to versioned FS ### Components - **`GitFolderImport.vue`**: Modal for selecting local Git repository - **`Collection.vue`**: Git collection indicators (branch icon, branch name, unapplied changes dot) - **`ImportExport.vue`**: Integration with import/export system - **`index.vue`**: Window focus sync handler ### Persistence - **`persistence/index.ts`**: Bidirectional sync logic - Filters git vs regular collections - Writes git collections to legitFs - Stores FileSystemDirectoryHandle in IndexedDB ### Configuration - **`vite.config.ts`**: Added Node.js polyfills for browser compatibility ## Current limitations I would be happy to resolve those issues when you like the approach. - **Single Repository**: Assumes one git repository collection per session (should be multiple as collections are already) - **Single File Format**: All collections in one `rest-collections.json` file. Best case this should be multiple files so it is also browsable in code. Still think that this could really be an enabler for engineering workflows. I would love to get feedback on this proposal and hear if that is going in the right direction.  --- ## Summary by cubic Add Git repository sync for collections with branch switching and bidirectional local sync. Teams can connect a local repo and version collections alongside code. - **New Features** - Connect a local Git repo via a new “Git Folder” import step; switch branches from the UI. - Bidirectional sync of collections to rest-collections.json in the repo; integrates with Import/Export. - Collection list shows current branch and an “unapplied changes” indicator. - Sync persists across sessions and runs on window focus. Limitations: one repo per session; single-file format. - **Dependencies** - Added @legit-sdk/core and @jsonjoy.com/fs-fsa-to-node for versioned FS over the File System Access API. - Added vite-plugin-node-polyfills to support Node built-ins in self-hosted builds. <sup>Written for commit e7113747df017526a88d8d098839b15616008ae2. Summary will update on new commits.</sup>  --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>