Example: REST API

Fetch data from REST API with axios.

"https://echo.hoppscotch.io"

Scroll area with extra small pre text

{
  "endpoint": "https://echo.hoppscotch.io",
  "dataA": {
    "method": "GET",
    "args": {},
    "data": "",
    "headers": {
      "accept": "*/*,image/webp",
      "cdn-loop": "netlify",
      "host": "echo.hoppscotch.io",
      "netlify-agent-category": "tooling; custom-code",
      "netlify-invocation-source": "client",
      "traceparent": "00-01a15bb2826b552b73aa46e42a2e8dad-f040c2b61f209f3b-01",
      "user-agent": "node-fetch",
      "x-country": "US",
      "x-forwarded-for": "54.226.195.230",
      "x-forwarded-proto": "https",
      "x-nf-account-id": "5e2b91527eb7a24fb0054390",
      "x-nf-account-tier": "account_type_free",
      "x-nf-branch": "main",
      "x-nf-client-connection-ip": "54.226.195.230",
      "x-nf-deploy-context": "production",
      "x-nf-deploy-id": "6a959dc525663bda225688ec",
      "x-nf-deploy-published": "1",
      "x-nf-geo": "eyJjaXR5IjoiQXNoYnVybiIsImNvdW50cnkiOnsiY29kZSI6IlVTIiwibmFtZSI6IlVuaXRlZCBTdGF0ZXMifSwicG9zdGFsX2NvZGUiOiIyMDE0OSIsInN1YmRpdmlzaW9uIjp7ImNvZGUiOiJWQSIsIm5hbWUiOiJWaXJnaW5pYSJ9LCJ0aW1lem9uZSI6IkFtZXJpY2EvTmV3X1lvcmsiLCJsYXRpdHVkZSI6MzkuMDQ2OSwibG9uZ2l0dWRlIjotNzcuNDkwM30=",
      "x-nf-request-id": "01M5DV50KBAMNQ7AJ6WGN2X3DD",
      "x-nf-request-start": "1792539787883585230, 1792539787884201037",
      "x-nf-site-id": "5d797a9d-fe11-4582-8837-9986a4673158",
      "x-nf-trace-span-id": "ebbabbc76f3c4449"
    },
    "path": "/",
    "isBase64Encoded": false
  },
  "dataB": {
    "method": "GET",
    "args": {},
    "data": "",
    "headers": {
      "accept": "application/json, text/plain, */*,image/webp",
      "cdn-loop": "netlify",
      "host": "echo.hoppscotch.io",
      "netlify-agent-category": "tooling; custom-code",
      "netlify-invocation-source": "client",
      "traceparent": "00-01a15bb282662a6a233c774465f2f0b0-e29ead011bd29492-01",
      "user-agent": "axios/0.27.2",
      "x-country": "US",
      "x-forwarded-for": "54.226.195.230",
      "x-forwarded-proto": "https",
      "x-nf-account-id": "5e2b91527eb7a24fb0054390",
      "x-nf-account-tier": "account_type_free",
      "x-nf-branch": "main",
      "x-nf-client-connection-ip": "54.226.195.230",
      "x-nf-deploy-context": "production",
      "x-nf-deploy-id": "6a959dc525663bda225688ec",
      "x-nf-deploy-published": "1",
      "x-nf-geo": "eyJjaXR5IjoiQXNoYnVybiIsImNvdW50cnkiOnsiY29kZSI6IlVTIiwibmFtZSI6IlVuaXRlZCBTdGF0ZXMifSwicG9zdGFsX2NvZGUiOiIyMDE0OSIsInN1YmRpdmlzaW9uIjp7ImNvZGUiOiJWQSIsIm5hbWUiOiJWaXJnaW5pYSJ9LCJ0aW1lem9uZSI6IkFtZXJpY2EvTmV3X1lvcmsiLCJsYXRpdHVkZSI6MzkuMDQ2OSwibG9uZ2l0dWRlIjotNzcuNDkwM30=",
      "x-nf-request-id": "01M5DV50K659N26F3Q8HJZ5W5G",
      "x-nf-request-start": "1792539787878354001, 1792539787878831403",
      "x-nf-site-id": "5d797a9d-fe11-4582-8837-9986a4673158",
      "x-nf-trace-span-id": "b6db590afbfe65dc"
    },
    "path": "/",
    "isBase64Encoded": false
  }
}

Extra large scroll area with medium pre text

{
  "endpoint": "https://echo.hoppscotch.io",
  "dataA": {
    "method": "GET",
    "args": {},
    "data": "",
    "headers": {
      "accept": "*/*,image/webp",
      "cdn-loop": "netlify",
      "host": "echo.hoppscotch.io",
      "netlify-agent-category": "tooling; custom-code",
      "netlify-invocation-source": "client",
      "traceparent": "00-01a15bb2826b552b73aa46e42a2e8dad-f040c2b61f209f3b-01",
      "user-agent": "node-fetch",
      "x-country": "US",
      "x-forwarded-for": "54.226.195.230",
      "x-forwarded-proto": "https",
      "x-nf-account-id": "5e2b91527eb7a24fb0054390",
      "x-nf-account-tier": "account_type_free",
      "x-nf-branch": "main",
      "x-nf-client-connection-ip": "54.226.195.230",
      "x-nf-deploy-context": "production",
      "x-nf-deploy-id": "6a959dc525663bda225688ec",
      "x-nf-deploy-published": "1",
      "x-nf-geo": "eyJjaXR5IjoiQXNoYnVybiIsImNvdW50cnkiOnsiY29kZSI6IlVTIiwibmFtZSI6IlVuaXRlZCBTdGF0ZXMifSwicG9zdGFsX2NvZGUiOiIyMDE0OSIsInN1YmRpdmlzaW9uIjp7ImNvZGUiOiJWQSIsIm5hbWUiOiJWaXJnaW5pYSJ9LCJ0aW1lem9uZSI6IkFtZXJpY2EvTmV3X1lvcmsiLCJsYXRpdHVkZSI6MzkuMDQ2OSwibG9uZ2l0dWRlIjotNzcuNDkwM30=",
      "x-nf-request-id": "01M5DV50KBAMNQ7AJ6WGN2X3DD",
      "x-nf-request-start": "1792539787883585230, 1792539787884201037",
      "x-nf-site-id": "5d797a9d-fe11-4582-8837-9986a4673158",
      "x-nf-trace-span-id": "ebbabbc76f3c4449"
    },
    "path": "/",
    "isBase64Encoded": false
  },
  "dataB": {
    "method": "GET",
    "args": {},
    "data": "",
    "headers": {
      "accept": "application/json, text/plain, */*,image/webp",
      "cdn-loop": "netlify",
      "host": "echo.hoppscotch.io",
      "netlify-agent-category": "tooling; custom-code",
      "netlify-invocation-source": "client",
      "traceparent": "00-01a15bb282662a6a233c774465f2f0b0-e29ead011bd29492-01",
      "user-agent": "axios/0.27.2",
      "x-country": "US",
      "x-forwarded-for": "54.226.195.230",
      "x-forwarded-proto": "https",
      "x-nf-account-id": "5e2b91527eb7a24fb0054390",
      "x-nf-account-tier": "account_type_free",
      "x-nf-branch": "main",
      "x-nf-client-connection-ip": "54.226.195.230",
      "x-nf-deploy-context": "production",
      "x-nf-deploy-id": "6a959dc525663bda225688ec",
      "x-nf-deploy-published": "1",
      "x-nf-geo": "eyJjaXR5IjoiQXNoYnVybiIsImNvdW50cnkiOnsiY29kZSI6IlVTIiwibmFtZSI6IlVuaXRlZCBTdGF0ZXMifSwicG9zdGFsX2NvZGUiOiIyMDE0OSIsInN1YmRpdmlzaW9uIjp7ImNvZGUiOiJWQSIsIm5hbWUiOiJWaXJnaW5pYSJ9LCJ0aW1lem9uZSI6IkFtZXJpY2EvTmV3X1lvcmsiLCJsYXRpdHVkZSI6MzkuMDQ2OSwibG9uZ2l0dWRlIjotNzcuNDkwM30=",
      "x-nf-request-id": "01M5DV50K659N26F3Q8HJZ5W5G",
      "x-nf-request-start": "1792539787878354001, 1792539787878831403",
      "x-nf-site-id": "5d797a9d-fe11-4582-8837-9986a4673158",
      "x-nf-trace-span-id": "b6db590afbfe65dc"
    },
    "path": "/",
    "isBase64Encoded": false
  }
}