JSON Hero is an open-source, beautiful JSON explorer for the web that lets you browse, search and navigate your JSON files at speed. 🚀 JSON Hero was created and is maintained by the team behind API Hero[1]. API Hero makes it quick and easy to add popular APIs to your project using the frameworks you love, and scale without worry.JSON Hero makes reading and understand JSON files easy by giving you a clean and beautiful UI packed with extra features.View JSON any way you'd like: Column View, Tree View, Editor View, and more.Automatically infers the contents of strings and provides useful previewsCreates an inferred JSON Schema that could be used to validate your JSONQuickly scan related values to check for edge casesSearch your JSON files (both keys and values)Keyboard accessibleEasily sharable URLs with path support FeaturesSend to JSON HeroSend your JSON to JSON Hero in a variety of waysHead to jsonhero.io[2] and Drag and Drop a JSON file, or paste JSON or a JSON url in the provided formInclude a Base64 encoded string of a JSON payload: jsonhero.io/new?j=eyAiZm9vIjogImJhciIgfQ==[3]Include a JSON URL to the new endpoint: jsonhero.io/new?url=https://jsonplaceholder.typicode.com/todos/1[4]Install the VS Code extension[5] and open JSON from VS CodeRaycast user? Check out our extension here[6]Use the unofficial API:Make a POST request to jsonhero.io/api/create.json with the following JSON body:json{"title": "test 123","content": { "foo": "bar" },"readOnly": false, // this is optional, will make it so the document title cannot be edited or document cannot be deleted"ttl": 3600 // this will expire the document after 3600 seconds, also optional}The JSON response will be the following:json{"id": "YKKduNySH7Ub","title": "test 123","location": "https://jsonhero.io/j/YKKduNySH7Ub"}Column viewInspired by macOS Finder, Column View is a new way to browse a JSON document. It has all the features you'd expect: Keyboard navigation, Path bar, history.It also has a nifty feature that allows you to "hold" a descendent selected and travel up through the hierarchy, and then move between siblings and view the different values found at that path. It's hard to describe, but here is an animation to help demonstrate: As you can see, holding the Option (or Alt key on Windows) while moving to a parent keeps the part of the document selected and shows it in context of it's surrounding JSON. Then you can traverse between items in an array and compare the values of the selection across deep hierarchy cahnges.Editor viewView your entire JSON document in an editor, but keep the nice previews and related values you get from the sidebar as you move around the document: Tree viewUse a traditional tree view to traverse your JSON document, with collapsible sections and keyboard shortcuts. All while keeping the nice previews: SearchQuickly open a search panel and fuzzy search your entire JSON file in milliseconds. Searches through key names, key paths, values, and even pretty formatted values (e.g. Searching for "Dec" will find datetime strings in the month of December.) Content PreviewsJSON Hero automatically infers the content of strings and provides useful previews and properties of the value you've selected. It's "Show Don't Tell" for JSON:Dates and Times Image URLs Website URLs Tweet URLS JSON URLs Colors Related ValuesEasily see all the related values across your entire JSON document for a specific field, including any undefined or null values. Bugs and Feature RequestsHave a bug or a feature request? Feel free to open a new issue[7].You can also join our Discord channel[8] to hang out and discuss anything you'd like.DevelopingTo run locally, first clone the repo and install the dependencies:bashgit clone https://github.com/apihero-run/jsonhero-web.gitcd jsonhero-webnpm installThen, create a file at the root of the repo called .env and set the SESSION_SECRET value:SESSION_SECRET=abc123Then, run npm run build or npm run dev to build.Now, run npm start and open your browser to http://localhost:8787 To restore the repository download the bundle wget https://archive.org/download/github.com-apihero-run-jsonhero-web_-_2022-12-02_12-28-05/apihero-run-jsonhero-web_-_2022-12-02_12-28-05.bundle and run: git clone apihero-run-jsonhero-web_-_2022-12-02_12-28-05.bundle Source: https://github.com/apihero-run/jsonhero-web[9]Uploader: apihero-run[10]Upload date: 2022-12-02 References^ API Hero (apihero.run)^ jsonhero.io (jsonhero.io)^ jsonhero.io/new?j=eyAiZm9vIjogImJhciIgfQ== (jsonhero.io)^ jsonhero.io/new?url=https://jsonplaceholder.typicode.com/todos/1 (jsonhero.io)^ VS Code extension (marketplace.visualstudio.com)^ here (www.raycast.com)^ open a new issue (github.com)^ Discord channel (discord.gg)^ https://github.com/apihero-run/jsonhero-web (github.com)^ apihero-run (github.com)
Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.
JSON Hero is an open-source, beautiful JSON explorer for the web that lets you browse, search and navigate your JSON files at speed. 🚀 JSON Hero was created and is maintained by the team behind API Hero[1]. API Hero makes it quick and easy to add popular APIs to your project using the frameworks you love, and scale without worry.JSON Hero makes reading and understand JSON files easy by giving you a clean and beautiful UI packed with extra features.View JSON any way you'd like: Column View, Tree View, Editor View, and more.Automatically infers the contents of strings and provides useful previewsCreates an inferred JSON Schema that could be used to validate your JSONQuickly scan related values to check for edge casesSearch your JSON files (both keys and values)Keyboard accessibleEasily sharable URLs with path support FeaturesSend to JSON HeroSend your JSON to JSON Hero in a variety of waysHead to jsonhero.io[2] and Drag and Drop a JSON file, or paste JSON or a JSON url in the provided formInclude a Base64 encoded string of a JSON payload: jsonhero.io/new?j=eyAiZm9vIjogImJhciIgfQ==[3]Include a JSON URL to the new endpoint: jsonhero.io/new?url=https://jsonplaceholder.typicode.com/todos/1[4]Install the VS Code extension[5] and open JSON from VS CodeRaycast user? Check out our extension here[6]Use the unofficial API:Make a POST request to jsonhero.io/api/create.json with the following JSON body:json{"title": "test 123","content": { "foo": "bar" },"readOnly": false, // this is optional, will make it so the document title cannot be edited or document cannot be deleted"ttl": 3600 // this will expire the document after 3600 seconds, also optional}The JSON response will be the following:json{"id": "YKKduNySH7Ub","title": "test 123","location": "https://jsonhero.io/j/YKKduNySH7Ub"}Column viewInspired by macOS Finder, Column View is a new way to browse a JSON document. It has all the features you'd expect: Keyboard navigation, Path bar, history.It also has a nifty feature that allows you to "hold" a descendent selected and travel up through the hierarchy, and then move between siblings and view the different values found at that path. It's hard to describe, but here is an animation to help demonstrate: As you can see, holding the Option (or Alt key on Windows) while moving to a parent keeps the part of the document selected and shows it in context of it's surrounding JSON. Then you can traverse between items in an array and compare the values of the selection across deep hierarchy cahnges.Editor viewView your entire JSON document in an editor, but keep the nice previews and related values you get from the sidebar as you move around the document: Tree viewUse a traditional tree view to traverse your JSON document, with collapsible sections and keyboard shortcuts. All while keeping the nice previews: SearchQuickly open a search panel and fuzzy search your entire JSON file in milliseconds. Searches through key names, key paths, values, and even pretty formatted values (e.g. Searching for "Dec" will find datetime strings in the month of December.) Content PreviewsJSON Hero automatically infers the content of strings and provides useful previews and properties of the value you've selected. It's "Show Don't Tell" for JSON:Dates and Times Image URLs Website URLs Tweet URLS JSON URLs Colors Related ValuesEasily see all the related values across your entire JSON document for a specific field, including any undefined or null values. Bugs and Feature RequestsHave a bug or a feature request? Feel free to open a new issue[7].You can also join our Discord channel[8] to hang out and discuss anything you'd like.DevelopingTo run locally, first clone the repo and install the dependencies:bashgit clone https://github.com/apihero-run/jsonhero-web.gitcd jsonhero-webnpm installThen, create a file at the root of the repo called .env and set the SESSION_SECRET value:SESSION_SECRET=abc123Then, run npm run build or npm run dev to build.Now, run npm start and open your browser to http://localhost:8787 To restore the repository download the bundle wget https://archive.org/download/github.com-apihero-run-jsonhero-web_-_2022-12-02_12-28-05/apihero-run-jsonhero-web_-_2022-12-02_12-28-05.bundle and run: git clone apihero-run-jsonhero-web_-_2022-12-02_12-28-05.bundle Source: https://github.com/apihero-run/jsonhero-web[9]Uploader: apihero-run[10]Upload date: 2022-12-02 References^ API Hero (apihero.run)^ jsonhero.io (jsonhero.io)^ jsonhero.io/new?j=eyAiZm9vIjogImJhciIgfQ== (jsonhero.io)^ jsonhero.io/new?url=https://jsonplaceholder.typicode.com/todos/1 (jsonhero.io)^ VS Code extension (marketplace.visualstudio.com)^ here (www.raycast.com)^ open a new issue (github.com)^ Discord channel (discord.gg)^ https://github.com/apihero-run/jsonhero-web (github.com)^ apihero-run (github.com)