Repository: triggerdotdev/jsonhero-web Branch: main Commit: 15157053174b Files: 215 Total size: 517.7 KB Directory structure: gitextract_7rs4w8rw/ ├── .github/ │ └── workflows/ │ └── main.yml ├── .gitignore ├── .vscode/ │ ├── launch.json │ └── tasks.json ├── CONTRIBUTING.md ├── DEVELOPMENT.md ├── Dockerfile ├── LICENSE ├── README.md ├── SELF_HOSTING.md ├── app/ │ ├── bindings.d.ts │ ├── components/ │ │ ├── AutoplayVideo.tsx │ │ ├── BlankColumn.tsx │ │ ├── CodeEditor.tsx │ │ ├── CodeViewer.tsx │ │ ├── Column.tsx │ │ ├── ColumnItem.tsx │ │ ├── Columns.tsx │ │ ├── ContainerInfo.tsx │ │ ├── CopySelectedNode.tsx │ │ ├── CopyText.tsx │ │ ├── CopyTextButton.tsx │ │ ├── DataTable.tsx │ │ ├── DocumentTitle.tsx │ │ ├── DragAndDropForm.tsx │ │ ├── ExampleDoc.tsx │ │ ├── ExampleUrl.tsx │ │ ├── FileSelector/ │ │ │ └── FileDropzone.tsx │ │ ├── Footer.tsx │ │ ├── Header.tsx │ │ ├── Home/ │ │ │ ├── HomeApiHeroBanner.tsx │ │ │ ├── HomeApiHeroLaptop.tsx │ │ │ ├── HomeCollaborateSection.tsx │ │ │ ├── HomeEdgeCasesSection.tsx │ │ │ ├── HomeFeatureGridSection.tsx │ │ │ ├── HomeFooter.tsx │ │ │ ├── HomeGithubBanner.tsx │ │ │ ├── HomeGridFeatureItem.tsx │ │ │ ├── HomeHeader.tsx │ │ │ ├── HomeHeroSection.tsx │ │ │ ├── HomeInfoBoxSection.tsx │ │ │ ├── HomeSearchSection.tsx │ │ │ ├── HomeSection.tsx │ │ │ └── HomeSplitSection.tsx │ │ ├── Icons/ │ │ │ ├── ArrayIcon.tsx │ │ │ ├── ArrowKeysIcon.tsx │ │ │ ├── ArrowKeysUpDownIcon.tsx │ │ │ ├── CopyShortcutIcon.tsx │ │ │ ├── DiscordIcon.tsx │ │ │ ├── DiscordIconTransparent.tsx │ │ │ ├── EmailIcon.tsx │ │ │ ├── EmailIconTransparent.tsx │ │ │ ├── EscapeKeyIcon.tsx │ │ │ ├── GithubIcon.tsx │ │ │ ├── GithubIconSimple.tsx │ │ │ ├── LoadingIcon.tsx │ │ │ ├── Logo.tsx │ │ │ ├── LogoTriggerdotdev.tsx │ │ │ ├── MoonIcon.tsx │ │ │ ├── ObjectIcon.tsx │ │ │ ├── ShortcutIcon.tsx │ │ │ ├── SquareBracketsIcon.tsx │ │ │ ├── StringIcon.tsx │ │ │ ├── SunIcon.tsx │ │ │ ├── TreeIcon.tsx │ │ │ └── TwitterIcon.tsx │ │ ├── IndentPreference.tsx │ │ ├── InfoHeader.tsx │ │ ├── InfoPanel.tsx │ │ ├── JsonColumnView.tsx │ │ ├── JsonEditor.tsx │ │ ├── JsonPreview.tsx │ │ ├── JsonSchemaViewer.tsx │ │ ├── JsonTreeView.tsx │ │ ├── JsonView.tsx │ │ ├── NewDocument.tsx │ │ ├── NewFile.tsx │ │ ├── OpenInWindow.tsx │ │ ├── PathBar.tsx │ │ ├── PathPreview.tsx │ │ ├── PreferencesProvider.tsx │ │ ├── Preview/ │ │ │ ├── CalendarMonth.tsx │ │ │ ├── PreviewBox.tsx │ │ │ ├── PreviewProperties.tsx │ │ │ ├── PreviewValue.tsx │ │ │ └── Types/ │ │ │ ├── PreviewAudioUri.tsx │ │ │ ├── PreviewDate.tsx │ │ │ ├── PreviewHtml.tsx │ │ │ ├── PreviewIPFSImage.tsx │ │ │ ├── PreviewImage.tsx │ │ │ ├── PreviewImageUri.tsx │ │ │ ├── PreviewJson.tsx │ │ │ ├── PreviewString.tsx │ │ │ ├── PreviewUri.tsx │ │ │ ├── PreviewUriElement.tsx │ │ │ ├── PreviewVideoUri.tsx │ │ │ ├── RetweetIcon.tsx │ │ │ └── preview.types.d.ts │ │ ├── Primitives/ │ │ │ ├── Body.tsx │ │ │ ├── BodyBold.tsx │ │ │ ├── ExtraLargeTitle.tsx │ │ │ ├── LargeMono.tsx │ │ │ ├── LargeTitle.tsx │ │ │ ├── Mono.tsx │ │ │ ├── PageNotFoundTitle.tsx │ │ │ ├── SmallBody.tsx │ │ │ ├── SmallSubtitle.tsx │ │ │ ├── SmallTitle.tsx │ │ │ └── Title.tsx │ │ ├── Properties/ │ │ │ ├── PropertiesFloat.tsx │ │ │ ├── PropertiesInt.tsx │ │ │ ├── PropertiesString.tsx │ │ │ └── PropertiesValue.tsx │ │ ├── RelatedValues.tsx │ │ ├── Resizable.tsx │ │ ├── SampleUrls.tsx │ │ ├── SearchBar.tsx │ │ ├── SearchPalette.tsx │ │ ├── Share.tsx │ │ ├── SideBar.tsx │ │ ├── StarCountProvider.tsx │ │ ├── ThemeModeToggle.tsx │ │ ├── ThemeProvider.tsx │ │ ├── ToolTip.tsx │ │ ├── UI/ │ │ │ ├── Dialog.tsx │ │ │ ├── GithubStar.tsx │ │ │ ├── GithubStarSmall.tsx │ │ │ ├── Popover.tsx │ │ │ ├── Tabs.tsx │ │ │ └── ToastPopover.tsx │ │ ├── UrlForm.tsx │ │ ├── ValueIcon.tsx │ │ └── json-schema-map.d.ts │ ├── entry.client.tsx │ ├── entry.server.tsx │ ├── entry.worker.ts │ ├── graphJSON.server.ts │ ├── hooks/ │ │ ├── useClickOutside.tsx │ │ ├── useIsMounted.tsx │ │ ├── useJson.tsx │ │ ├── useJsonColumnView.tsx │ │ ├── useJsonDoc.tsx │ │ ├── useJsonSchema.tsx │ │ ├── useJsonSearch.tsx │ │ ├── useJsonTree.tsx │ │ ├── useLoadWhenOnline.tsx │ │ ├── useMemoCompare.ts │ │ ├── useOnScreen.tsx │ │ ├── useRelatedPaths.ts │ │ ├── useSelectedInfo.tsx │ │ └── useVirtualTree.ts │ ├── jsonDoc.server.ts │ ├── root.tsx │ ├── routes/ │ │ ├── actions/ │ │ │ ├── $id/ │ │ │ │ └── update.ts │ │ │ ├── createFromFile.ts │ │ │ ├── createFromUrl.ts │ │ │ ├── getPreview.$url.ts │ │ │ └── setTheme.ts │ │ ├── api/ │ │ │ └── create[.json].ts │ │ ├── index.tsx │ │ ├── j/ │ │ │ ├── $id/ │ │ │ │ ├── editor.tsx │ │ │ │ ├── index.tsx │ │ │ │ ├── terminal.tsx │ │ │ │ └── tree.tsx │ │ │ ├── $id.tsx │ │ │ └── $id[.json].ts │ │ ├── new.tsx │ │ └── privacy.mdx │ ├── services/ │ │ ├── apihero.server.ts │ │ ├── github.server.ts │ │ ├── toast.server.ts │ │ └── uriPreview.server.ts │ ├── theme.server.ts │ ├── useColumnView/ │ │ └── index.ts │ └── utilities/ │ ├── animationConstants.ts │ ├── classnames.ts │ ├── codeMirrorSetup.ts │ ├── codeMirrorTheme.ts │ ├── colors.ts │ ├── dataType.ts │ ├── formatStarCount.ts │ ├── formatter.ts │ ├── getRandomUserAgent.ts │ ├── icons.ts │ ├── inferredTemporal.ts │ ├── jsonColumnView.ts │ ├── nullable.ts │ ├── relatedValues.ts │ ├── safeFetch.ts │ ├── search.ts │ ├── stableJson.ts │ └── xml/ │ ├── __test__/ │ │ ├── convertXmlToJsonString.test.ts │ │ ├── isXML.test.ts │ │ └── xml.txt │ ├── convertFromRawXml.ts │ ├── createFromRawXml.ts │ └── isXML.ts ├── examples/ │ ├── owenWilsonWows.json │ ├── pokemon.json │ └── ronSwansonQuotes.json ├── package.json ├── remix.config.js ├── remix.env.d.ts ├── styles/ │ └── tailwind.css ├── tailwind.config.js ├── tests/ │ ├── formatStarCount.test.ts │ ├── jsonColumnView.test.ts │ ├── relatedValues.test.ts │ ├── search.test.ts │ ├── setup.js │ └── stableJson.test.ts ├── tsconfig.json ├── worker/ │ └── index.js ├── wrangler.toml └── wrangler.toml.dev ================================================ FILE CONTENTS ================================================ ================================================ FILE: .github/workflows/main.yml ================================================ name: CI on: push: branches: [main] paths: - ".github/workflows/main.yml" - "app/**/*.ts" - "app/**/*.tsx" - "public/*" - "styles/*" - "worker/*" - "tests/*" - "package.json" - "package-lock.json" - "remix.config.js" - "tsconfig.json" - "wrangler.toml" - "remix.env.d.ts" - "tailwind.config.js" workflow_dispatch: jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: "20" registry-url: "https://registry.npmjs.org" - run: npm ci - run: npm test - run: npm run build - name: Publish app uses: cloudflare/wrangler-action@1.3.0 with: apiToken: ${{ secrets.CF_API_TOKEN }} environment: "production" ================================================ FILE: .gitignore ================================================ node_modules /.cache /build /public/build .env /app/tailwind.css /jsonDocs .DS_Store /dist .mf /meta.json /stats.html public/entry.worker.js ================================================ FILE: .vscode/launch.json ================================================ { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "pwa-chrome", "request": "launch", "name": "Launch Chrome against localhost with document", "url": "http://localhost:8787", "webRoot": "${workspaceFolder}/app" }, { "name": "Debug Jest All Tests", "type": "node", "request": "launch", "runtimeArgs": [ "--inspect-brk", "${workspaceRoot}/node_modules/.bin/jest", "--runInBand" ], "console": "integratedTerminal", "internalConsoleOptions": "neverOpen" }, { "name": "Debug Jest Test File", "type": "node", "request": "launch", "runtimeArgs": [ "--inspect-brk", "${workspaceRoot}/node_modules/.bin/jest", "--runInBand" ], "args": ["${fileBasename}", "--no-cache"], "console": "integratedTerminal", "internalConsoleOptions": "neverOpen" } ] } ================================================ FILE: .vscode/tasks.json ================================================ { "version": "2.0.0", "tasks": [ { "type": "typescript", "tsconfig": "tsconfig.json", "option": "watch", "problemMatcher": ["$tsc-watch"], "group": "build", "label": "tsc: watch - tsconfig.json" } ] } ================================================ FILE: CONTRIBUTING.md ================================================ ## ⚡️ JSON Hero Contributing Guide First of all, thanks for considering contributing to this project! If you have any questions please don't hesitate to reach out to [eric@jsonhero.io](mailto:eric@jsonhero.io) or join us on [Discord](https://discord.gg/JtBAxBr2m3). JSON Hero is a Typescript React application built with [remix.run](https://remix.run), with support for deploying to Cloudflare workers. To get started with contributing, please read our [Development guide](https://github.com/triggerdotdev/jsonhero-web/blob/main/DEVELOPMENT.md) first to get JSON Hero running locally. ### Running tests Although there is less test-coverage for JSON Hero than there should be, tests should still be run to ensure builds have not been broken: ```bash npm test ``` You can also run tests in "watch" mode: ```bash npm run test:watch ``` ### Making changes Please make any changes to your forked repository in a branch other than `main`. If you are working on a bug fix, please use the `bug/` prefix for your branch name. If you are working on a feature, please use `features/`. If you are working on a specific issue please name the branch `issue-` Make sure to run the `npm lint` command to ensure there are no Typescript compile-time errors. ### Pull Requests Please open a Pull Request against the `main` branch in the `triggerdotdev/jsonhero-web` repository. We will aim to address all newly opened PRs by the following Friday. If you haven't opened a Pull Request before, please check out GitHub's [Pull Request documentation](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests) ### Other JSON Hero projects If you'd like to contribute to the [VSCode extension](https://marketplace.visualstudio.com/items?itemName=JSONHero.jsonhero-vscode), please see the [triggerdotdev/vscode-extension](https://github.com/triggerdotdev/vscode-extension) repo. For issues related to the JSON Schema inference, please check out [triggerdotdev/schema-infer](https://github.com/triggerdotdev/schema-infer). The "Smart Preview" feature is in-part powered by the [@jsonhero/json-infer-types](https://github.com/triggerdotdev/json-infer-types) project. If it's related to the Search functionality, please see the [triggerdotdev/fuzzy-json-search](https://github.com/triggerdotdev/fuzzy-json-search) repo. ================================================ FILE: DEVELOPMENT.md ================================================ ## 👩🏽‍💻 JSON Hero Local Development Guide Welcome to JSON Hero development and thanks for being here! If you'd like to run JSON Hero locally, please use the following guide to get started. If you have any issues with this guide please feel free to email me at [eric@jsonhero.io](mailto:eric@jsonhero.io) or come leave a message in our open [Discord Channel](https://discord.gg/JtBAxBr2m3). For more information about contributing to JSON Hero please see the [Contributing doc](https://github.com/triggerdotdev/jsonhero-web/blob/main/CONTRIBUTING.md). ### Install dependencies Before you can run JSON Hero locally, you will need to install the following dependencies on your machine: #### Git You most likely already have git installed on your machine, but if not, you can install it from the [Git website](https://git-scm.com). #### Node.js 16 Even though JSON Hero runs on [Cloudflare Workers](https://workers.cloudflare.com), which isn't a Node.js environment, you will still need Node.js 16 to run it locally. The recommended way to install Node.js is to download a pre-built package from the [Node.js website](https://nodejs.org/en/) #### NPM If you install Node.js through the above link, you should also have NPM automatically installed as well. To make sure, run the following command in your preferred Terminal: ```bash npm ---version ``` ### Fork JSON Hero on GitHub (optional) To contribute code to JSON Hero, you should first create a fork of the [jsonhero-web](https://github.com/triggerdotdev/jsonhero-web) repository on GitHub. Follow [these instructions](https://docs.github.com/en/get-started/quickstart/fork-a-repo) on repository forking. ### Clone the repo In your terminal, issue the following command to clone the repository to your local machine: ```bash git clone https://github.com/triggerdotdev/jsonhero-web.git ``` Or if you've forked the repository: ```bash git clone https://github.com//jsonhero-web.git ``` Then `cd` into the repository: ```bash cd jsonhero-web ``` ### Prepare the repo First, install npm dependencies: ```bash npm install ``` Run the following command to create the `.env` file with a new `SESSION_SECRET` environment variable: ```bash echo "SESSION_SECRET=$(openssl rand -hex 32)" > .env ``` Then, run `npm run build` or `npm run dev` to build. Start the development server: ```bash npm start ``` You should now be able to access your local JSON Hero server on [localhost:8787](http://localhost:8787) > **Note** JSON documents created locally are not persisted across server restarts ### Previewing URLs We currently use [OpenGraph Ninja](https://opengraph.ninja/) to power some of the Preview URL functionality. ### Deploying to Cloudflare _Coming Soon_ ================================================ FILE: Dockerfile ================================================ # Builder FROM node:16.17.0 as builder WORKDIR /src COPY . /src # App RUN cd /src RUN npm install RUN echo "SESSION_SECRET=abc123" > .env RUN npm run build CMD npm start ================================================ FILE: LICENSE ================================================ Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives. Copyright [yyyy] [name of copyright owner] Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. ================================================ FILE: README.md ================================================
Trigger.dev logo

Open Bounties Rewarded Bounties

# Brought to you by Trigger.dev JSON Hero was created and is maintained by the team behind [Trigger.dev](https://trigger.dev). With Trigger.dev you can trigger workflows from APIs, on a schedule, or on demand. We make API calls easy with authentication handled for you, and you can add durable delays that survive server restarts. # JSON Hero 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 previews - Creates an inferred JSON Schema that could be used to validate your JSON - Quickly scan related values to check for edge cases - Search your JSON files (both keys and values) - Keyboard accessible - Easily sharable URLs with path support ![JSON Hero Screenshot](https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/0f5735b3-2421-470b-244c-7047fd77f700/public) ## Features ### Send to JSON Hero Send your JSON to JSON Hero in a variety of ways - Head to [jsonhero.io](https://jsonhero.io) and Drag and Drop a JSON file, or paste JSON or a JSON url in the provided form - Include a Base64 encoded string of a JSON payload: [jsonhero.io/new?j=eyAiZm9vIjogImJhciIgfQ==](https://jsonhero.io/new?j=eyAiZm9vIjogImJhciIgfQ==) - Include a JSON URL to the `new` endpoint: [jsonhero.io/new?url=https://jsonplaceholder.typicode.com/todos/1](https://jsonhero.io/new?url=https://jsonplaceholder.typicode.com/todos/1) - Install the [VS Code extension](https://marketplace.visualstudio.com/items?itemName=JSONHero.jsonhero-vscode) and open JSON from VS Code - Raycast user? Check out our extension [here](https://www.raycast.com/maverickdotdev/open-in-json-hero) - 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 view Inspired by macOS Finder, Column View is a new way to browse a JSON document. ![JSON Hero Column View](https://raw.githubusercontent.com/triggerdotdev/documentation-hosting/main/images/features-columnview.gif) 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: ![Column View - Traverse with Context](https://raw.githubusercontent.com/triggerdotdev/documentation-hosting/main/images/features-traversewithcontext.gif) 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 view View 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: ![Editor view](https://raw.githubusercontent.com/triggerdotdev/documentation-hosting/main/images/features-editorview.gif) ### Tree view Use a traditional tree view to traverse your JSON document, with collapsible sections and keyboard shortcuts. All while keeping the nice previews: ![Tree view](https://raw.githubusercontent.com/triggerdotdev/documentation-hosting/main/images/features-treeview.gif) ### Search Quickly 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.) ![Search](https://raw.githubusercontent.com/triggerdotdev/documentation-hosting/main/images/features-search.gif) ### Content Previews JSON 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 ![Preview colors](https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/43f2c081-c09b-47db-cb10-8f15ee6a1a00/public) #### Image URLs ![Preview colors](https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/8a743bd5-a065-4f7f-1262-585c39c10100/public) #### Website URLs ![Preview websites](https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/cd7f2d28-2c8d-4b37-696d-e898937c3d00/public) #### Tweet URLS ![Preview tweets](https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/8455e9d6-1d3e-451e-a032-f3259204ef00/public) #### JSON URLs ![Preview JSON](https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/13743860-3d9c-4cac-dde9-881fba7eba00/public) #### Colors ![Preview colors](https://imagedelivery.net/3TbraffuDZ4aEf8KWOmI_w/22e37599-c2bd-4abd-79f2-466241d17b00/public) ### Related Values Easily see all the related values across your entire JSON document for a specific field, including any `undefined` or `null` values. ![Editor view](https://raw.githubusercontent.com/triggerdotdev/documentation-hosting/main/images/features-relatedvalues.gif) ## Bugs and Feature Requests Have a bug or a feature request? Feel free to [open a new issue](https://github.com/triggerdotdev/jsonhero-web/issues). You can also join our [Discord channel](https://discord.gg/JtBAxBr2m3) to hang out and discuss anything you'd like. ## Developing To run locally, first clone the repo and install the dependencies: ```bash git clone https://github.com/triggerdotdev/jsonhero-web.git cd jsonhero-web npm install ``` Then, create a file at the root of the repo called `.env` and set the `SESSION_SECRET` value: ``` SESSION_SECRET=abc123 ``` Then, run `npm run build` or `npm run dev` to build. Now, run `npm start` and open your browser to `http://localhost:8787` ================================================ FILE: SELF_HOSTING.md ================================================ ## Deploying to Cloudflare ### Install and login to wrangler ```bash npm install -g wrangler wrangler login ``` ### Create service Go to workers tab from your [cloudflare profile](https://dash.cloudflare.com/profile) and create a new worker. Use HTTP Handler as service type. The name of worker must match the `name` field in `wrangler.toml`. ### Setup wrangler.toml Edit the following variables in `wrangler.toml` and `wrangler.toml.dev`: - `account_id`: Get account id by using ```bash wrangler whoami ``` - `kv_namespaces`: Run the following comands to create a new KV namespace. ```bash wrangler kv:namespace create DOCUMENTS # gives namespace id wrangler kv:namespace create DOCUMENTS --preview # gives preview id for namespace ``` Replace current entry for `kv_namespaces` as: ```toml kv_namespaces = [ { binding = "DOCUMENTS", id = , preview_id = } ] ``` ### Configure Environment Variables Set `SESSION_SECRET` environment for worker. ```bash wrangler secret put SESSION_SECRET ``` Optionally set other secrets listed at the end of `wrangler.toml`. ### Publish worker ```bash wrangler publish ``` ================================================ FILE: app/bindings.d.ts ================================================ export {}; declare global { const DOCUMENTS: KVNamespace; const SESSION_SECRET: string; const GRAPH_JSON_API_KEY: string; const GRAPH_JSON_COLLECTION: string; const APIHERO_PROJECT_KEY: string; } ================================================ FILE: app/components/AutoplayVideo.tsx ================================================ import { useEffect, useRef } from "react"; import { useOnScreen } from "~/hooks/useOnScreen"; export function AutoplayVideo({ src }: { src: string }) { const elementRef = useRef(null); const isOnScreen = useOnScreen(elementRef); useEffect(() => { if (elementRef.current == null) return; elementRef.current.muted = true; elementRef.current.playsInline = true; if (isOnScreen) { elementRef.current.play(); } else { elementRef.current.pause(); } }, [isOnScreen]); return (