Detect base64 strings and show a decoded preview in the right-hand panel

For example, the image below is 64x64

You can see it live here: https://jsonhero.io/j/REqfdqUzgoYP

https://developers.google.com/search/docs/advanced/crawling/block-indexing

Thanks for this awesome tool it would be great if we had the feature to directly edit files which is hosted on github or gitlab.

We can use their API's to get repo access and then push commits from backend.

It would be very helpful to me if you could ship a Dockerfile and build official images.

Thanks for creating this project!

I have installed the extension 'jsonhero.io tools for VS Code'. It opens the .json file in the browser but it does not have an edit option. Could you please let me know where do I get the edit option when the file opens in the browser. Thanks.

The ability for a logged in user to edit the keyboard shortcuts. Including the ability to reset them back to the defaults.

This features requires the Accounts feature.

To share JSON Hero with dynamic endpoint (e.g. IDs on an REST API documentation) would be necessary to pass endpoint through URL with something like https://jsonhero.io/new?url=https://someapi.io/v1/id, right?
It's already possible? If not, wdyt about this feature?

https://twitter.com/relequestual/status/1498614383131381760?s=20&t=uPXIOAJvZYgO8CYIU53fSQ

We should infer when objects are meant to be a specific schema, and instead of using our own inferred schema, use the schema from the schema store.

How to replicate:

• Clone repo and npm install
• npm start
• Browse to http://localhost:8787
• Wait for about 5 seconds

This error appears in the browser:

Error: Unexpected Server Error
    at handleDataRequest (/Users/scott/Tools/jsonhero-web/node_modules/@remix-run/server-runtime/esm/server.js:163:31)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at requestHandler (/Users/scott/Tools/jsonhero-web/node_modules/@remix-run/server-runtime/esm/server.js:41:20)
    at handleEvent (/Users/scott/Tools/jsonhero-web/node_modules/@remix-run/cloudflare-workers/esm/worker.js:98:18)
    at EventTarget.[kDispatchFetch] (/Users/scott/Tools/jsonhero-web/node_modules/@miniflare/core/src/standards/event.ts:359:13)
    at Server.<anonymous> (/Users/scott/Tools/jsonhero-web/node_modules/@miniflare/http-server/src/index.ts:168:20)

In the console:

[1] GET /build/routes/actions/getPreview.$url-JE4JRBGI.js 200 OK (6.18ms)
[1] ReferenceError: PEEKALINK_API_KEY is not defined
[1]     at getPeekalink (/Users/scott/Tools/jsonhero-web/app/services/uriPreview.server.ts:17:3)
[1]     at getUriPreview (/Users/scott/Tools/jsonhero-web/app/services/uriPreview.server.ts:71:33)
[1]     at processTicksAndRejections (node:internal/process/task_queues:96:5)
[1]     at loader2 (/Users/scott/Tools/jsonhero-web/build/route:/Users/scott/Tools/jsonhero-web/app/routes/actions/getPreview.$url.ts:10:18)
[1]     at callRouteLoader (/Users/scott/Tools/jsonhero-web/node_modules/@remix-run/server-runtime/esm/data.js:69:14)
[1]     at handleDataRequest (/Users/scott/Tools/jsonhero-web/node_modules/@remix-run/server-runtime/esm/server.js:125:18)
[1]     at requestHandler (/Users/scott/Tools/jsonhero-web/node_modules/@remix-run/server-runtime/esm/server.js:41:20)
[1]     at handleEvent (/Users/scott/Tools/jsonhero-web/node_modules/@remix-run/cloudflare-workers/esm/worker.js:98:18)
[1]     at EventTarget.[kDispatchFetch] (/Users/scott/Tools/jsonhero-web/node_modules/@miniflare/core/src/standards/event.ts:359:13)
[1]     at Server.<anonymous> (/Users/scott/Tools/jsonhero-web/node_modules/@miniflare/http-server/src/index.ts:168:20)
[1] GET /actions/getPreview/https%3A%2F%2Fwww.theonion.com%2F?_data=routes%2Factions%2FgetPreview.%24url 500 Internal Server Error (557.21ms)

(Why is it trying to load a page on theonion.com?)

My environment:
macOS 12.3.1, MacBook Air (M1, 2020)
Node v16.13.2
Firefox 100.0b9

Currently, as of 4/29/22, if you attempt to open a large JSON file (around 22MB), the site does not allow you to open it. It simply acts as if you selected no file!

Usecase : Using JSON hero to browse log files & other automatically generated datastructures.

e.g. [email protected]:octocat/hello-worId.git

Homepage:

https://www.opengraph.xyz/url/https%3A%2F%2Fjsonhero.io/

Document page:

https://www.opengraph.xyz/url/https%3A%2F%2Fjsonhero.io%2Fj%2FKD5KVstvTPfk/

HI @ericallam
It seems that json data is being stored on the server.

Can I use it without saving it on the server?

https://owen-wilson-wow-api.herokuapp.com/

I have tried to use it with the json placholder api photos endpoint (https://jsonplaceholder.typicode.com/photos) but the page becomes unresponsive and return errors like this : https://jsonhero.io/j/KtjQydI5I4A3

HI! really love the jsonhero seems awesome. but what I really dream of is having it inside VScode.
is this possible?

@D-K-P

https://docs.insomnia.rest/insomnia/introduction-to-plugins

https://jsonhero.io/j/QcukgWd6RNQ2?theme=dark

https://www.smashingmagazine.com/2020/04/skeleton-screens-react/

Wrap it into an ElectronJS (or similar) technology and ship it to be downloaded.

• Thanks

https://opengraph.ninja/pricing

I used https://jsonhero.io to take a look at a dirty JSON, and it seems that the JSON contained a malformed field.
Until I cleaned that field I wasn't able to put it in the input to get it read.
However, no matter how many times I tried, it didn't said anything related to an error in the page, as if it wasn't working.

It happened to me in both Safari and Chrome.

A similar behaviour happens in #42 that no answer is given.

Reviewed the issues in the repo and found nothing (besides the other issue referenced) related to this.

Thank you :)

When I open jsonhero with the following json

{"url":"http://www.google.com/calendar/event?action=TEMPLATE&dates=20220707T103000Z%2F20220707T120000Z&text=bug&location=Nh%C3%A0%20h%C3%A0ng%20Tr%E1%BA%A7u%20Cau%202%2C%20%C4%90%C6%B0%E1%BB%9Dng%20L%C3%AA%20L%E1%BB%A3i%2C%20H%E1%BA%A3i%20C%E1%BA%A3ng%2C%20Th%C3%A0nh%20ph%E1%BB%91%20Qui%20Nh%C6%A1n%2C%20B%C3%ACnh%20%C4%90%E1%BB%8Bnh%2C%20Vi%E1%BB%87t%20Nam"}

I got this error

Envirorment:

Hardware

Apple MacBook Pro with M1 Pro chip.

Software

MacOS 12.4

npm test

> test
> jest

 PASS  tests/formatStarCount.test.ts
 PASS  tests/search.test.ts
 PASS  tests/stableJson.test.ts
 PASS  tests/relatedValues.test.ts
  ● Console

    console.log
      [
        { value: '1609937654', paths: [ '$.data.0.modifiedAt' ] },
        { value: 'null', paths: [ '$.data.1.modifiedAt' ] },
        { value: 'undefined', paths: [ '$.data.2.modifiedAt' ] }
      ]

      at Object.<anonymous> (tests/relatedValues.test.ts:174:13)

 PASS  tests/jsonColumnView.test.ts

Test Suites: 5 passed, 5 total
Tests:       14 passed, 14 total
Snapshots:   11 passed, 11 total
Time:        2.858 s
Ran all test suites.

npm --version

8.11.0

node -v

v18.3.0

Description

When I deployed this project on my own computer and try to switch from the light theme to the dark theme, then there will an error returned.

And here is the error log.

[1] TypeError: Value of "this" must be of type SubtleCrypto
[1]     at new NodeError (node:internal/errors:377:5)
[1]     at Proxy.importKey (node:internal/crypto/webcrypto:517:30)
[1]     at sign22 (/Users/user/Documents/gits/github/jsonhero-web/node_modules/@remix-run/cloudflare-workers/esm/cookieSigning.js:13:33)
[1]     at encodeCookieValue (/Users/user/Documents/gits/github/jsonhero-web/node_modules/@remix-run/server-runtime/esm/cookies.js:71:21)
[1]     at Object.serialize (/Users/user/Documents/gits/github/jsonhero-web/node_modules/@remix-run/server-runtime/esm/cookies.js:50:56)
[1]     at Object.commitSession (/Users/user/Documents/gits/github/jsonhero-web/node_modules/@remix-run/server-runtime/esm/sessions/cookieStorage.js:36:21)
[1]     at Object.commit (/Users/user/Documents/gits/github/jsonhero-web/app/theme.server.ts:30:32)
[1]     at action5 (/Users/user/Documents/gits/github/jsonhero-web/build/route:/Users/user/Documents/gits/github/jsonhero-web/app/routes/actions/setTheme.ts:31:51)
[1]     at processTicksAndRejections (node:internal/process/task_queues:95:5)
[1]     at callRouteAction (/Users/user/Documents/gits/github/jsonhero-web/node_modules/@remix-run/server-runtime/esm/data.js:32:14) {
[1]   code: 'ERR_INVALID_THIS'
[1] }
[1] POST /actions/setTheme?_data=routes%2Factions%2FsetTheme 500 Internal Server Error (598.38ms, waitUntil: 598.39ms)

we want to parse api url JSON with authorization ( Bearer , Basic.,..etc)

https://github.com/donavon/remix-etag

This would be insane if it was a browser extension. <3

LOVE THE WORK!!!

At the top there is the breadcrumb shown anyways so adding a copy functionality sounds quite easy. I started to use JSON Hero at the start of this week and it is an awesome tool for huge JSON files with a lot of structure while developing. Second time I really need to get a path fairly deep nested and type it by hand.

e.g.: {
"someField": "a",
"someObj"": {
"someArray": [7,8,9]
}
}

When I now navigate to the 2nd element of the "someArray" it would be nice to copy that path for example like: "someObj.someArray[2]"

I would be open to implement it myself and contribute. if i find time this week. Thx for the great work and being OSS.

Currently whoever has access to a jsonhero.io url can edit the title. We should support adding a readonly=true flag to the /new endpoint to make it so the title cannot be editable. This would allow sharing of jsonhero.io urls publicly more safe as the title would not be able to be edited maliciously.

It would be nice if this site could be contained as a PWA so that it can have its own window. I have an iPad and I recently discovered how pwa's are supported full screen if you add a safari site to the Home Screen

The Library of Congress publishes a LOT of data (e.g., names and subject headings) in a format of one JSON object per line.

It would be great if you could handle this format.

You can download sample files from https://id.loc.gov/download/ -- the smaller more manageable files are lower down the page.

For example, this URL does not currently have a preview:

https://picsum.photos/64/64?random:

The getUriPreview function tries to do a HEAD request on this URL to determine if it's content is an image, but that results in a 405 Method Not Allowed response.

If you do request this URL with a GET request you get a 302 Found response with a location of https://i.picsum.photos/id/29/64/64.jpg?hmac=XAo2bhXlNLP-fdYM8H7kGqAWkIi0E8hywUNIYyZrokc.

Doing a HEAD request on that URL results in a 200 OK with a Content-Type of image/jpeg

https://www.w3.org/TR/wai-aria-practices-1.2/#grid

"Schema" view could be implemented in a similar mannger to the GraphQL Voyager: https://github.com/APIs-guru/graphql-voyager

Allow deleting submitted json data or at least privating certain links

https://markdoc.io/sandbox?mode=transform

It looks like this error reported to us could be caused by node.js 18:

[1] [mf:wrn] Cache operations will have no impact if you deploy to a workers.dev subdomain!
[1] TypeError: Value of "this" must be of type Crypto
[1]     at new NodeError (node:internal/errors:372:5)
[1]     at getRandomValues (node:internal/crypto/webcrypto:732:11)
[1]     at Proxy.<anonymous> (/Users/.../Desktop/JS/jsonhero-web/node_modules/@miniflare/core/src/standards/helpers.ts:35:16)
[1]     at /Users/.../Desktop/JS/jsonhero-web/app/jsonDoc.server.ts:115:14
[1]     at /Users/.../Desktop/JS/jsonhero-web/node_modules/nanoid/index.js:26:19
[1]     at createId (/Users/.../Desktop/JS/jsonhero-web/app/jsonDoc.server.ts:119:10)
[1]     at createFromRawJson (/Users/.../Desktop/JS/jsonhero-web/app/jsonDoc.server.ts:67:17)
[1]     at createFromUrlOrRawJson (/Users/.../Desktop/JS/jsonhero-web/app/jsonDoc.server.ts:36:12)
[1]     at action2 (/Users/.../Desktop/JS/jsonhero-web/build/route:/Users/.../Desktop/JS/jsonhero-web/app/routes/actions/createFromUrl.ts:26:21)
[1]     at processTicksAndRejections (node:internal/process/task_queues:95:5) {
[1]   code: 'ERR_INVALID_THIS'
[1] }
[1] POST /actions/createFromUrl?_data=routes%2Factions%2FcreateFromUrl 500 Internal Server Error (1157.81ms)

https://github.com/LottieFiles/lottie-react

Solution

• Stop Edge from bringing up the search. This is what other products like Slack do.

event.preventDefault() is already there so it might be that we need to use key down instead of key up. Requires investigation