[PR #1484] [MERGED] response outline for JSON responses #3342

New issue

Closed

opened 2026-03-17 00:57:59 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 00:57:59 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/1484
Author: @harshlele
Created: 2/14/2021
Status: ✅ Merged
Merged: 2/23/2021
Merged by: @liyasthomas

Base: main ← Head: json-outline

📝 Commits (10+)

2869b6a added basic cursor tracking
dbdb37b added basic cursor tracking
7138bbe Merge branch 'json-outline' of https://github.com/harshlele/hoppscotch into json-outline
0eada09 show siblings, click on sibling to scroll into view
23a47e3 added basic cursor tracking
2759df7 show siblings, click on sibling to scroll into view
fc782cf Merge branch 'json-outline' of https://github.com/harshlele/hoppscotch into json-outline
8741e4d Update ace-editor.vue
e7d86f7 added basic cursor tracking
212a120 show siblings, click on sibling to scroll into view

📊 Changes

4 files changed (+284 additions, -13 deletions)

View changed files

📝 components/http/http-raw-body.vue (+14 -12)
📝 components/lenses/renderers/JSONLensRenderer.vue (+1 -0)
📝 components/ui/ace-editor.vue (+143 -1)
➕ helpers/outline.js (+126 -0)

📄 Description

i've been using the app for a while, but one of the things ive always wanted is a outline for very long JSON responses, similar to how VS code does it, so i decided to see if i make it myself lol. I'd love it if you guys merged this. Ive added a screenshot:

Better language detection (show outline without clicking in editor)
Close drop down on click (broken now)
@mouseleave don't work on mobile devices

Deploy preview: https://deploy-preview-1484--hoppscotch.netlify.app

_{🔄 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/1484 **Author:** [@harshlele](https://github.com/harshlele) **Created:** 2/14/2021 **Status:** ✅ Merged **Merged:** 2/23/2021 **Merged by:** [@liyasthomas](https://github.com/liyasthomas) **Base:** `main` ← **Head:** `json-outline` --- ### 📝 Commits (10+) - [`2869b6a`](https://github.com/hoppscotch/hoppscotch/commit/2869b6a17f69c4d9bf1b2250fb8c9258ce33448f) added basic cursor tracking - [`dbdb37b`](https://github.com/hoppscotch/hoppscotch/commit/dbdb37b00a63c88d51708368e5da1d39ee023cd7) added basic cursor tracking - [`7138bbe`](https://github.com/hoppscotch/hoppscotch/commit/7138bbee6fb4d52839a37b76d419e92a26788a09) Merge branch 'json-outline' of https://github.com/harshlele/hoppscotch into json-outline - [`0eada09`](https://github.com/hoppscotch/hoppscotch/commit/0eada092ccf2cdc4bac3b46e54168b3ae90a6263) show siblings, click on sibling to scroll into view - [`23a47e3`](https://github.com/hoppscotch/hoppscotch/commit/23a47e30cb79202e41cce6318efef79d5d112452) added basic cursor tracking - [`2759df7`](https://github.com/hoppscotch/hoppscotch/commit/2759df7fb462074aa4471bf3bcf9808602bc2246) show siblings, click on sibling to scroll into view - [`fc782cf`](https://github.com/hoppscotch/hoppscotch/commit/fc782cfcb8d5fdb896646cfaecb8d2fe4eb57c05) Merge branch 'json-outline' of https://github.com/harshlele/hoppscotch into json-outline - [`8741e4d`](https://github.com/hoppscotch/hoppscotch/commit/8741e4d6f1ec749783a20c03cde940879ee52770) Update ace-editor.vue - [`e7d86f7`](https://github.com/hoppscotch/hoppscotch/commit/e7d86f731daf53e10865250eb6138f258b2ff865) added basic cursor tracking - [`212a120`](https://github.com/hoppscotch/hoppscotch/commit/212a1203335480740c6931021a2127d4e94306e1) show siblings, click on sibling to scroll into view ### 📊 Changes **4 files changed** (+284 additions, -13 deletions) <details> <summary>View changed files</summary> 📝 `components/http/http-raw-body.vue` (+14 -12) 📝 `components/lenses/renderers/JSONLensRenderer.vue` (+1 -0) 📝 `components/ui/ace-editor.vue` (+143 -1) ➕ `helpers/outline.js` (+126 -0) </details> ### 📄 Description i've been using the app for a while, but one of the things ive always wanted is a outline for very long JSON responses, similar to how VS code does it, so i decided to see if i make it myself lol. I'd love it if you guys merged this. Ive added a screenshot: ![image](https://user-images.githubusercontent.com/45959248/107877064-2496c880-6ef0-11eb-8613-4aba1967a133.png) --- - [x] Better language detection (show outline without clicking in editor) - [x] Close drop down on click (broken now) - [x] `@mouseleave` don't work on mobile devices **Deploy preview:** https://deploy-preview-1484--hoppscotch.netlify.app --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>