[ { "path": ".github/ISSUE_TEMPLATE/bug_report.yml", "content": "name: Bug report\ndescription: Create a report to help us improve\ntitle: \"[BUG]: \"\nlabels: bug\nbody:\n - type: textarea\n id: description\n attributes:\n label: Issue description\n description: |\n Describe the issue in as much detail as possible.\n\n Tip: You can attach images or log files by clicking this area to highlight it and then dragging files into it.\n placeholder: |\n Steps to reproduce with below code sample:\n 1. do thing\n 2. click...\n 3. observe behavior\n 4. see error logs below\n validations:\n required: true\n - type: textarea\n id: media\n attributes:\n label: Media & Screenshots\n description: Include screenshots or video of reproduction as much as possible\n - type: textarea\n id: os\n attributes:\n label: Operating system\n description: Which OS does your application run on?\n value: |\n - OS: [e.g. iOS]:\n - Browser [e.g. chrome, safari]:\n\n - Any other details...\n - type: dropdown\n id: priority\n attributes:\n label: Priority this issue should have\n description: Please be realistic. If you need to elaborate on your reasoning, please use the Issue description field above.\n options:\n - Low (slightly annoying)\n - Medium (should be fixed soon)\n - High (immediate attention needed)\n validations:\n required: true\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.yml", "content": "name: Feature request\ndescription: Request a new feature\nlabels: [feature]\nbody:\n - type: textarea\n id: description\n attributes:\n label: Feature\n description: A clear and concise description of what the problem is, or what feature you want to be implemented.\n placeholder: I'm always frustrated when..., Discord has recently released..., A good addition would be...\n validations:\n required: true\n - type: textarea\n id: alternatives\n attributes:\n label: Alternative solutions or implementations\n description: A clear and concise description of any alternative solutions or features you have considered.\n - type: textarea\n id: additional-context\n attributes:\n label: Other context\n description: Any other context, screenshots, or file uploads that help us understand your feature request.\n" }, { "path": ".github/pull_request_template.md", "content": "## Issue\nCloses #[ISSUE_NUMBER]\n\n## What Changed\nBrief description of what you changed and why.\n\nExample:\n- Added JSON validation tooltip on parse error\n- Improved performance by memoizing graph component\n- Fixed bug where large JSON files caused slowdown\n\n## How to Test\nStep-by-step instructions to test the change:\n\n1. ...\n2. ...\n3. ...\n\n## Evidence\n**Screenshots or Video Required** — Choose one or both:\n\n### Screenshots\n- [ ] Before/after screenshots attached (for UI changes)\n\n### Video\n- [ ] Screen recording of the feature in action\n\n### Testing\n- [ ] Tested locally with `pnpm dev`\n- [ ] No console errors\n- [ ] Tested with large JSON files (if applicable)\n\n## Performance Impact\nAny notes on performance, re-renders, or potential concerns?\n\n- [ ] No performance impact\n- [ ] Improved performance (explain how)\n- [ ] Potential impact (explain and justify)\n\n## Additional Notes\nAnything else reviewers should know?\n\n---\n\n**Remember:** If this PR is not linked to an issue, it may be closed. Always reference an approved issue!\n" }, { "path": ".github/workflows/deploy.yml", "content": "name: Deploy Next.js site to Pages\n\non:\n push:\n branches: [\"main\"]\n\n workflow_dispatch:\n\npermissions:\n contents: read\n pages: write\n id-token: write\n\nconcurrency:\n group: \"pages\"\n cancel-in-progress: true\n\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@v6\n with:\n fetch-depth: 0\n\n - name: Setup Node\n uses: actions/setup-node@v6\n with:\n node-version: \"24.10.0\"\n\n - uses: pnpm/action-setup@v4\n name: Install pnpm\n with:\n version: 10.20.0\n run_install: false\n\n - name: Get pnpm store directory\n shell: bash\n run: |\n echo \"STORE_PATH=$(pnpm store path --silent)\" >> $GITHUB_ENV\n\n - uses: actions/cache@v5\n name: Setup pnpm cache\n with:\n path: ${{ env.STORE_PATH }}\n key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}\n restore-keys: |\n ${{ runner.os }}-pnpm-store-\n\n - name: Restore Turbo and Next.js cache\n uses: actions/cache@v5\n with:\n path: |\n .turbo\n apps/www/.next/cache\n key: ${{ runner.os }}-turbo-next-${{ hashFiles('pnpm-lock.yaml', 'turbo.json') }}-${{ hashFiles('apps/www/**.[jt]s', 'apps/www/**.[jt]sx', 'packages/**.[jt]s', 'packages/**.[jt]sx') }}\n restore-keys: |\n ${{ runner.os }}-turbo-next-${{ hashFiles('pnpm-lock.yaml', 'turbo.json') }}-\n\n - name: Install dependencies\n run: pnpm install --frozen-lockfile\n\n - name: Build with Turborepo\n run: pnpm run build:www\n env:\n NEXT_PUBLIC_GA_MEASUREMENT_ID: ${{ vars.NEXT_PUBLIC_GA_MEASUREMENT_ID }}\n\n - name: Upload Build Artifacts\n uses: actions/upload-artifact@v6\n with:\n name: build-files\n path: ./apps/www/out/_next/static/chunks\n\n - name: Upload artifact\n uses: actions/upload-pages-artifact@v4\n with:\n path: './apps/www/out'\n\n # Deployment job\n deploy:\n environment:\n name: github-pages\n url: ${{ steps.deployment.outputs.page_url }}\n runs-on: ubuntu-latest\n needs: build\n steps:\n - name: Deploy to GitHub Pages\n id: deployment\n uses: actions/deploy-pages@v4\n" }, { "path": ".github/workflows/pull-request.yml", "content": "name: Verify Pull Request\n\non:\n pull_request:\n branches: [ \"main\" ]\n\njobs:\n cache-and-install:\n runs-on: ubuntu-latest\n\n steps:\n - name: Checkout\n uses: actions/checkout@v6\n\n - name: Install Node.js\n uses: actions/setup-node@v6\n with:\n node-version: \"24.10.0\"\n\n - uses: pnpm/action-setup@v4\n name: Install pnpm\n with:\n version: 10.20.0\n run_install: false\n\n - name: Get pnpm store directory\n shell: bash\n run: |\n echo \"STORE_PATH=$(pnpm store path --silent)\" >> $GITHUB_ENV\n\n - uses: actions/cache@v5\n name: Setup pnpm cache\n with:\n path: ${{ env.STORE_PATH }}\n key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}\n restore-keys: |\n ${{ runner.os }}-pnpm-store-\n\n - name: Restore Turbo and Next.js cache\n uses: actions/cache@v5\n with:\n path: |\n .turbo\n apps/www/.next/cache\n key: ${{ runner.os }}-turbo-next-${{ hashFiles('pnpm-lock.yaml', 'turbo.json') }}-${{ hashFiles('apps/www/**.[jt]s', 'apps/www/**.[jt]sx', 'packages/**.[jt]s', 'packages/**.[jt]sx') }}\n restore-keys: |\n ${{ runner.os }}-turbo-next-${{ hashFiles('pnpm-lock.yaml', 'turbo.json') }}-\n\n - name: Install dependencies\n run: pnpm install --frozen-lockfile\n\n - name: Lint\n run: pnpm turbo run lint\n\n - name: Build\n run: pnpm turbo run build\n\n \n" }, { "path": ".gitignore", "content": "# Agent tooling\n.agents\n.claude\n.codex\nskills-lock.json\n\n# Package manager\nnode_modules/\n.npm-cache/\n.pnpm-store/\n.pnp*\nnpm-debug.log*\npnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Turborepo\n.turbo/\n\n# Build outputs and caches (all workspaces)\n**/.next/\n**/out/\n**/coverage/\n**/*.tsbuildinfo\n\n# OS\n.DS_Store\n" }, { "path": ".npmrc", "content": "engine-strict=true\n" }, { "path": ".vscode/launch.json", "content": "{\n \"version\": \"0.2.0\",\n \"configurations\": [\n {\n \"name\": \"Run VSCode Extension\",\n \"type\": \"extensionHost\",\n \"request\": \"launch\",\n \"args\": [\"--extensionDevelopmentPath=${workspaceFolder}/apps/vscode\"],\n \"outFiles\": [\"${workspaceFolder}/apps/vscode/build/**/*.js\"],\n \"preLaunchTask\": \"build vscode extension\"\n }\n ]\n}\n" }, { "path": ".vscode/tasks.json", "content": "{\n \"version\": \"2.0.0\",\n \"tasks\": [\n {\n \"label\": \"build vscode extension\",\n \"type\": \"shell\",\n \"command\": \"pnpm run build:vscode\",\n \"group\": {\n \"kind\": \"build\",\n \"isDefault\": true\n }\n },\n {\n \"label\": \"watch vscode extension\",\n \"type\": \"shell\",\n \"command\": \"pnpm run dev:vscode\",\n \"isBackground\": true\n }\n ]\n}\n" }, { "path": "CODE_OF_CONDUCT.md", "content": "\n# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participation in our\ncommunity a harassment-free experience for everyone, regardless of age, body\nsize, visible or invisible disability, ethnicity, sex characteristics, gender\nidentity and expression, level of experience, education, socio-economic status,\nnationality, personal appearance, race, caste, color, religion, or sexual\nidentity and orientation.\n\nWe pledge to act and interact in ways that contribute to an open, welcoming,\ndiverse, inclusive, and healthy community.\n\n## Our Standards\n\nExamples of behavior that contributes to a positive environment for our\ncommunity include:\n\n* Demonstrating empathy and kindness toward other people\n* Being respectful of differing opinions, viewpoints, and experiences\n* Giving and gracefully accepting constructive feedback\n* Accepting responsibility and apologizing to those affected by our mistakes,\n and learning from the experience\n* Focusing on what is best not just for us as individuals, but for the overall\n community\n\nExamples of unacceptable behavior include:\n\n* The use of sexualized language or imagery, and sexual attention or advances of\n any kind\n* Trolling, insulting or derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or email address,\n without their explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Enforcement Responsibilities\n\nCommunity leaders are responsible for clarifying and enforcing our standards of\nacceptable behavior and will take appropriate and fair corrective action in\nresponse to any behavior that they deem inappropriate, threatening, offensive,\nor harmful.\n\nCommunity leaders have the right and responsibility to remove, edit, or reject\ncomments, commits, code, wiki edits, issues, and other contributions that are\nnot aligned to this Code of Conduct, and will communicate reasons for moderation\ndecisions when appropriate.\n\n## Scope\n\nThis Code of Conduct applies within all community spaces, and also applies when\nan individual is officially representing the community in public spaces.\nExamples of representing our community include using an official e-mail address,\nposting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported to the community leaders responsible for enforcement at\nopensource@github.com.\nAll complaints will be reviewed and investigated promptly and fairly.\n\nAll community leaders are obligated to respect the privacy and security of the\nreporter of any incident.\n\n## Enforcement Guidelines\n\nCommunity leaders will follow these Community Impact Guidelines in determining\nthe consequences for any action they deem in violation of this Code of Conduct:\n\n### 1. Correction\n\n**Community Impact**: Use of inappropriate language or other behavior deemed\nunprofessional or unwelcome in the community.\n\n**Consequence**: A private, written warning from community leaders, providing\nclarity around the nature of the violation and an explanation of why the\nbehavior was inappropriate. A public apology may be requested.\n\n### 2. Warning\n\n**Community Impact**: A violation through a single incident or series of\nactions.\n\n**Consequence**: A warning with consequences for continued behavior. No\ninteraction with the people involved, including unsolicited interaction with\nthose enforcing the Code of Conduct, for a specified period of time. This\nincludes avoiding interactions in community spaces as well as external channels\nlike social media. Violating these terms may lead to a temporary or permanent\nban.\n\n### 3. Temporary Ban\n\n**Community Impact**: A serious violation of community standards, including\nsustained inappropriate behavior.\n\n**Consequence**: A temporary ban from any sort of interaction or public\ncommunication with the community for a specified period of time. No public or\nprivate interaction with the people involved, including unsolicited interaction\nwith those enforcing the Code of Conduct, is allowed during this period.\nViolating these terms may lead to a permanent ban.\n\n### 4. Permanent Ban\n\n**Community Impact**: Demonstrating a pattern of violation of community\nstandards, including sustained inappropriate behavior, harassment of an\nindividual, or aggression toward or disparagement of classes of individuals.\n\n**Consequence**: A permanent ban from any sort of public interaction within the\ncommunity.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage],\nversion 2.1, available at\n[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].\n\nCommunity Impact Guidelines were inspired by\n[Mozilla's code of conduct enforcement ladder][Mozilla CoC].\n\nFor answers to common questions about this code of conduct, see the FAQ at\n[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at\n[https://www.contributor-covenant.org/translations][translations].\n\n[homepage]: https://www.contributor-covenant.org\n[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html\n[Mozilla CoC]: https://github.com/mozilla/diversity\n[FAQ]: https://www.contributor-covenant.org/faq\n[translations]: https://www.contributor-covenant.org/translations\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing to JSON Crack\n\nThank you for wanting to contribute! This is a community-driven project, and we appreciate your help. Please read this guide carefully to make the review process smooth and fast.\n\n**Read our [Code of Conduct](./CODE_OF_CONDUCT.md) first** — we want to keep this community friendly and welcoming.\n\n---\n\n## Before You Start: The Issue-First Workflow\n\n**Always open or find an issue BEFORE you start coding.** This saves everyone time.\n\n1. **Check existing issues** — Search to see if someone already reported this or is working on it\n2. **Open a new issue** if one doesn't exist — Describe what you want to fix or build\n3. **Wait for approval** — I'll review and give feedback (usually within a few days)\n4. **Once approved**, you can start coding\n5. **Link your PR to the issue** — Use `Closes #123` in your PR description\n\nThis workflow prevents duplicate work and ensures your contribution aligns with the project's direction.\n\n---\n\n## Quick Setup\n\n### Prerequisites\n- Node.js 18+\n- pnpm (or npm/yarn)\n\n### Tech Stack\nJSON Crack uses:\n- **React** — UI library\n- **Reaflow** — Graph visualization\n- **Mantine UI** — UI components\n- **Zustand** — State management\n\n### Get Started\n```bash\n# Clone the repo\ngit clone https://github.com/AykutSarac/jsoncrack.com.git\ncd jsoncrack.com\n\n# Install dependencies\npnpm install\n\n# Run the dev server\npnpm dev\n```\n\nThe app will be available at `http://localhost:3000`\n\n---\n\n## How to Submit a Pull Request\n\n### Requirements\nBefore submitting, make sure your PR includes:\n\n1. **Issue ID** — Reference the issue: `Closes #123`\n2. **Clear description** — What does this change do? Why?\n3. **Evidence of working changes** — One or both:\n - **Screenshot** — Show the UI before/after\n - **Video** — Screen recording of the feature in action\n4. **Test it locally** — Run `pnpm dev` and verify it works\n5. **Follow code style** — Use [Google TypeScript Style Guide](https://google.github.io/styleguide/tsguide.html)\n\n### Creating Your Branch\n```bash\ngit checkout -b fix/issue-123-description\n# or\ngit checkout -b feature/issue-123-description\n```\n\nUse clear branch names that reference the issue.\n\n---\n\n## Guidelines\n\n### Performance First\n- Avoid unnecessary re-renders\n- Use React DevTools Profiler to check performance\n- Test with large JSON files to ensure no slowdowns\n\n### Code Quality\n- Follow the [Google TypeScript Style Guide](https://google.github.io/styleguide/tsguide.html)\n- Write descriptive commit messages\n- Keep changes focused — one feature/fix per PR\n\n### Testing\n- Manually test your changes thoroughly\n- Describe exactly how you tested it in the PR\n- Make sure existing features still work\n\n---\n\n## Example PR\n\nHere's what a good PR looks like:\n\n**Title:** Add JSON validation tooltip on parse error\n\n**Description:**\n```\nCloses #234\n\n## What Changed\nAdded a helpful tooltip that shows validation errors when JSON fails to parse, making it easier for users to fix their JSON.\n\n## How to Test\n1. Paste invalid JSON: `{invalid`\n2. Look for the red error indicator\n3. Hover over it to see the detailed error message\n\n## Evidence\n- [Screenshot of tooltip](link-to-image)\n\n## Performance Notes\nNo performance impact. Tooltip renders conditionally only on errors.\n```\n\n---\n\n## Questions?\n\n- Found a bug? Open an issue\n- Have an idea? Open an issue\n- Confused about something? Comment on the issue\n\nThank you for contributing to JSON Crack! 🎉\n" }, { "path": "LICENSE.md", "content": " Apache License\n Version 2.0, January 2004\n http://www.apache.org/licenses/\n\n TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n 1. Definitions.\n\n \"License\" shall mean the terms and conditions for use, reproduction,\n and distribution as defined by Sections 1 through 9 of this document.\n\n \"Licensor\" shall mean the copyright owner or entity authorized by\n the copyright owner that is granting the License.\n\n \"Legal Entity\" shall mean the union of the acting entity and all\n other entities that control, are controlled by, or are under common\n control with that entity. For the purposes of this definition,\n \"control\" means (i) the power, direct or indirect, to cause the\n direction or management of such entity, whether by contract or\n otherwise, or (ii) ownership of fifty percent (50%) or more of the\n outstanding shares, or (iii) beneficial ownership of such entity.\n\n \"You\" (or \"Your\") shall mean an individual or Legal Entity\n exercising permissions granted by this License.\n\n \"Source\" form shall mean the preferred form for making modifications,\n including but not limited to software source code, documentation\n source, and configuration files.\n\n \"Object\" form shall mean any form resulting from mechanical\n transformation or translation of a Source form, including but\n not limited to compiled object code, generated documentation,\n and conversions to other media types.\n\n \"Work\" shall mean the work of authorship, whether in Source or\n Object form, made available under the License, as indicated by a\n copyright notice that is included in or attached to the work\n (an example is provided in the Appendix below).\n\n \"Derivative Works\" shall mean any work, whether in Source or Object\n form, that is based on (or derived from) the Work and for which the\n editorial revisions, annotations, elaborations, or other modifications\n represent, as a whole, an original work of authorship. For the purposes\n of this License, Derivative Works shall not include works that remain\n separable from, or merely link (or bind by name) to the interfaces of,\n the Work and Derivative Works thereof.\n\n \"Contribution\" shall mean any work of authorship, including\n the original version of the Work and any modifications or additions\n to that Work or Derivative Works thereof, that is intentionally\n submitted to Licensor for inclusion in the Work by the copyright owner\n or by an individual or Legal Entity authorized to submit on behalf of\n the copyright owner. For the purposes of this definition, \"submitted\"\n means any form of electronic, verbal, or written communication sent\n to the Licensor or its representatives, including but not limited to\n communication on electronic mailing lists, source code control systems,\n and issue tracking systems that are managed by, or on behalf of, the\n Licensor for the purpose of discussing and improving the Work, but\n excluding communication that is conspicuously marked or otherwise\n designated in writing by the copyright owner as \"Not a Contribution.\"\n\n \"Contributor\" shall mean Licensor and any individual or Legal Entity\n on behalf of whom a Contribution has been received by Licensor and\n subsequently incorporated within the Work.\n\n 2. Grant of Copyright License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n copyright license to reproduce, prepare Derivative Works of,\n publicly display, publicly perform, sublicense, and distribute the\n Work and such Derivative Works in Source or Object form.\n\n 3. Grant of Patent License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n (except as stated in this section) patent license to make, have made,\n use, offer to sell, sell, import, and otherwise transfer the Work,\n where such license applies only to those patent claims licensable\n by such Contributor that are necessarily infringed by their\n Contribution(s) alone or by combination of their Contribution(s)\n with the Work to which such Contribution(s) was submitted. If You\n institute patent litigation against any entity (including a\n cross-claim or counterclaim in a lawsuit) alleging that the Work\n or a Contribution incorporated within the Work constitutes direct\n or contributory patent infringement, then any patent licenses\n granted to You under this License for that Work shall terminate\n as of the date such litigation is filed.\n\n 4. Redistribution. You may reproduce and distribute copies of the\n Work or Derivative Works thereof in any medium, with or without\n modifications, and in Source or Object form, provided that You\n meet the following conditions:\n\n (a) You must give any other recipients of the Work or\n Derivative Works a copy of this License; and\n\n (b) You must cause any modified files to carry prominent notices\n stating that You changed the files; and\n\n (c) You must retain, in the Source form of any Derivative Works\n that You distribute, all copyright, patent, trademark, and\n attribution notices from the Source form of the Work,\n excluding those notices that do not pertain to any part of\n the Derivative Works; and\n\n (d) If the Work includes a \"NOTICE\" text file as part of its\n distribution, then any Derivative Works that You distribute must\n include a readable copy of the attribution notices contained\n within such NOTICE file, excluding those notices that do not\n pertain to any part of the Derivative Works, in at least one\n of the following places: within a NOTICE text file distributed\n as part of the Derivative Works; within the Source form or\n documentation, if provided along with the Derivative Works; or,\n within a display generated by the Derivative Works, if and\n wherever such third-party notices normally appear. The contents\n of the NOTICE file are for informational purposes only and\n do not modify the License. You may add Your own attribution\n notices within Derivative Works that You distribute, alongside\n or as an addendum to the NOTICE text from the Work, provided\n that such additional attribution notices cannot be construed\n as modifying the License.\n\n You may add Your own copyright statement to Your modifications and\n may provide additional or different license terms and conditions\n for use, reproduction, or distribution of Your modifications, or\n for any such Derivative Works as a whole, provided Your use,\n reproduction, and distribution of the Work otherwise complies with\n the conditions stated in this License.\n\n 5. Submission of Contributions. Unless You explicitly state otherwise,\n any Contribution intentionally submitted for inclusion in the Work\n by You to the Licensor shall be under the terms and conditions of\n this License, without any additional terms or conditions.\n Notwithstanding the above, nothing herein shall supersede or modify\n the terms of any separate license agreement you may have executed\n with Licensor regarding such Contributions.\n\n 6. Trademarks. This License does not grant permission to use the trade\n names, trademarks, service marks, or product names of the Licensor,\n except as required for reasonable and customary use in describing the\n origin of the Work and reproducing the content of the NOTICE file.\n\n 7. Disclaimer of Warranty. Unless required by applicable law or\n agreed to in writing, Licensor provides the Work (and each\n Contributor provides its Contributions) on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n implied, including, without limitation, any warranties or conditions\n of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n PARTICULAR PURPOSE. You are solely responsible for determining the\n appropriateness of using or redistributing the Work and assume any\n risks associated with Your exercise of permissions under this License.\n\n 8. Limitation of Liability. In no event and under no legal theory,\n whether in tort (including negligence), contract, or otherwise,\n unless required by applicable law (such as deliberate and grossly\n negligent acts) or agreed to in writing, shall any Contributor be\n liable to You for damages, including any direct, indirect, special,\n incidental, or consequential damages of any character arising as a\n result of this License or out of the use or inability to use the\n Work (including but not limited to damages for loss of goodwill,\n work stoppage, computer failure or malfunction, or any and all\n other commercial damages or losses), even if such Contributor\n has been advised of the possibility of such damages.\n\n 9. Accepting Warranty or Additional Liability. While redistributing\n the Work or Derivative Works thereof, You may choose to offer,\n and charge a fee for, acceptance of support, warranty, indemnity,\n or other liability obligations and/or rights consistent with this\n License. However, in accepting such obligations, You may act only\n on Your own behalf and on Your sole responsibility, not on behalf\n of any other Contributor, and only if You agree to indemnify,\n defend, and hold each Contributor harmless for any liability\n incurred by, or claims asserted against, such Contributor by reason\n of your accepting any such warranty or additional liability.\n\n END OF TERMS AND CONDITIONS\n\n APPENDIX: How to apply the Apache License to your work.\n\n To apply the Apache License to your work, attach the following\n boilerplate notice, with the fields enclosed by brackets \"[]\"\n replaced with your own identifying information. (Don't include\n the brackets!) The text should be enclosed in the appropriate\n comment syntax for the file format. We also recommend that a\n file or class name and description of purpose be included on the\n same \"printed page\" as the copyright notice for easier\n identification within third-party archives.\n\n Copyright 2025 Aykut Saraç\n\n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n" }, { "path": "README.md", "content": "\n

\n \n \"Logo\"\n \n\n

JSON Crack

\n\n

\n The open-source JSON Editor.\n
\n Learn more »\n
\n
\n ToDiagram\n ·\n Discord\n ·\n Website\n ·\n Issues\n ·\n VS Code\n

\n

\n\n\n\n## About the Project\n\n\"booking-screen\"\n\n## Visualize JSON into interactive graphs\n\nJSON Crack is a tool for visualizing JSON data in a structured, interactive graphs, making it easier to explore, format, and validate JSON. It offers features like converting JSON to other formats (CSV, YAML), generating JSON Schema, executing queries, and exporting visualizations as images. Designed for both readability and usability.\n\n* **Visualizer**: Instantly convert JSON, YAML, CSV, and XML into interactive graphs or trees in dark or light mode.\n* **Convert**: Seamlessly transform data formats, like JSON to CSV or XML to JSON, for easy sharing.\n* **Format & Validate**: Beautify and validate JSON, YAML, and CSV for clear and accurate data.\n* **Code Generation**: Generate TypeScript interfaces, Golang structs, and JSON Schema.\n* **JSON Schema**: Create JSON Schema, mock data, and validate various data formats.\n* **Advanced Tools**: Decode JWT, randomize data, and run jq or JSON path queries.\n* **Export Image**: Download your visualization as PNG, JPEG, or SVG.\n* **Privacy**: All data processing is local; nothing is stored on our servers.\n\n## Recognition\n\n\n \n\n\n\"JSON\n\n## Integrations\n\n- [VS Code Extension](https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode)\n- [npm Package (`jsoncrack-react`)](https://www.npmjs.com/package/jsoncrack-react)\n\n## Contributing\n\n- Found a bug or missing feature? Open an issue on [GitHub Issues](https://github.com/AykutSarac/jsoncrack.com/issues).\n- Want to contribute code or docs? Start with our [contribution guide](./CONTRIBUTING.md).\n\n## Sponsors & Support\n\nIf you find JSON Crack useful, you can support the project by using [ToDiagram](https://todiagram.com).\n\n## Stay Up-to-Date\n\nJSON Crack officially launched as v1.0 on the 17th of February 2022 and we've come a long way so far. Watch **releases** of this repository to be notified of future updates:\n\n\"Star\n\n\n\n## Getting Started\n\nTo get a local copy up and running, please follow these simple steps.\n\n### Prerequisites\n\nHere is what you need to be able to run JSON Crack.\n\n- Node.js (Version: >=24.x)\n- pnpm (Version: >=10)\n\n\n## Development\n\n### Setup\n\n1. Clone the repo into a public GitHub repository (or fork https://github.com/AykutSarac/jsoncrack.com/fork). If you plan to distribute the code, read the [`LICENSE`](/LICENSE.md) for additional details.\n\n ```sh\n git clone https://github.com/AykutSarac/jsoncrack.com.git\n ```\n\n2. Go to the project folder\n\n ```sh\n cd jsoncrack.com\n ```\n\n3. Install packages\n\n ```sh\n pnpm install\n ```\n\n4. Run the web app\n\n ```sh\n pnpm dev:www\n\n # Running on http://localhost:3000/\n ```\n\n### Useful Commands\n\nFrom repository root:\n\n```sh\n# Web app\npnpm dev:www\npnpm build:www\n\n# VS Code extension\npnpm dev:vscode\npnpm build:vscode\npnpm lint:vscode\npnpm lint:fix:vscode\n\n# All workspaces\npnpm dev\npnpm build\npnpm lint\n```\n\n`pnpm build:www` is the production build command used in GitHub Actions deployment.\n\n### Debug VS Code Extension\n\n1. Open repository root in VS Code.\n2. Press `F5`.\n3. Select `Run VSCode Extension (apps/vscode)` when prompted.\n4. In the Extension Development Host window, open a `.json` file and run:\n `JSON Crack: Enable JSON Crack visualization`.\n\n### Docker\n\n🐳 Docker assets are in `apps/www`.\nIf you want to run JSON Crack locally:\n\n```console\ncd apps/www\n\n# Build a Docker image with:\ndocker compose build\n\n# Run locally with `docker-compose`\ndocker compose up\n\n# Go to http://localhost:8888\n```\n\n## Configuration\n\nThe supported node limit can be changed by editing `NEXT_PUBLIC_NODE_LIMIT` in `apps/www/.env`.\n\n\n\n## License\n\nSee [`LICENSE`](/LICENSE.md) for more information.\n" }, { "path": "apps/vscode/.gitignore", "content": "node_modules/\nbuild/\n*.vsix" }, { "path": "apps/vscode/.prettierignore", "content": ".github\n.next\nnode_modules/\nout\npublic\n*-lock.json\ntsconfig.json\nbuild\njsoncrack" }, { "path": "apps/vscode/.prettierrc", "content": "{\n \"trailingComma\": \"es5\",\n \"singleQuote\": false,\n \"semi\": true,\n \"printWidth\": 100,\n \"arrowParens\": \"avoid\",\n \"importOrder\": [\n \"^(react/(.*)$)|^(react$)\",\n \"^(next/(.*)$)|^(next$)\",\n \"^@mantine/core\",\n \"^@mantine\",\n \"styled\",\n \"\",\n \"^src/(.*)$\",\n \"^[./]\"\n ],\n \"importOrderParserPlugins\": [\"typescript\", \"jsx\", \"decorators-legacy\"],\n \"plugins\": [\"@trivago/prettier-plugin-sort-imports\"]\n}\n" }, { "path": "apps/vscode/.vscodeignore", "content": ".vscode/**\n.vscode-test/**\n.github/**\n.turbo/**\nnode_modules/**\nsrc/**\next-src/**\n.gitignore\n.prettierignore\n.prettierrc\nindex.html\nvite.config.ts\nesbuild.config.mjs\neslint.config.mjs\n**/tsconfig.json\n**/*.map\n" }, { "path": "apps/vscode/LICENSE.md", "content": "MIT License\n\nCopyright (c) 2025 Aykut Saraç\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE." }, { "path": "apps/vscode/README.md", "content": " \"JSON\n\n
\n\n[JSON Crack](https://jsoncrack.com?utm_source=jsoncrack-vscode&utm_medium=readme)'s Official Visual Studio Code Extension that visualizes JSON data as an interactive diagram. The extension parses the open JSON file and displays its structure as a connected graph where nodes represent objects, arrays, and values.\n\n## How to use?\n\n1. Install the JSON Crack extension from the [VS Code marketplace](https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode).\n2. Open a JSON file.\n3. Click on the JSON Crack icon in the menubar at top right.\n\n\"image\"\n\n## Privacy\n\nThe extension works **fully offline**. No data is sent to any server. All JSON parsing and visualization happens locally in your editor.\n\n## Development\n\nThis extension lives in `apps/vscode` inside the [jsoncrack.com](https://github.com/AykutSarac/jsoncrack.com) monorepo.\n\n**Prerequisites:** Node.js `>=20`, pnpm `>=10`\n\n**Stack:** Vite (webview) + esbuild (extension host) + React 19\n\n```sh\n# Install dependencies from repo root\npnpm install\n\n# Build the extension\ncd apps/vscode\npnpm run build\n```\n\n### Debugging\n\n1. Open the **monorepo root** in VS Code.\n2. Press **F5** to launch the \"Run VSCode Extension\" config — it builds and opens the Extension Development Host.\n3. After making changes, press `Cmd+R` (macOS) / `Ctrl+R` (Windows/Linux) in the host window to reload.\n\n### Scripts\n\n| Script | Description |\n|---|---|\n| `build` | Production build (minified, no sourcemaps) |\n| `build:dev` | Dev build (sourcemaps, no minification) |\n| `watch` | Watch extension host (`ext-src/`) for changes |\n| `watch:webview` | Watch webview (`src/`) for changes |\n| `dev` | Start Vite dev server (standalone webview in browser) |\n| `lint` | Run ESLint + Prettier check |\n| `clean` | Remove `build/` directory |\n" }, { "path": "apps/vscode/esbuild.config.mjs", "content": "import * as esbuild from \"esbuild\";\n\nconst isWatch = process.argv.includes(\"--watch\");\nconst isProduction = process.argv.includes(\"--production\");\n\n/** @type {esbuild.BuildOptions} */\nconst config = {\n entryPoints: [\"ext-src/extension.ts\"],\n bundle: true,\n outdir: \"build\",\n external: [\"vscode\"],\n format: \"cjs\",\n platform: \"node\",\n target: \"node20\",\n sourcemap: !isProduction,\n minify: isProduction,\n logLevel: \"info\",\n};\n\nif (isWatch) {\n const ctx = await esbuild.context(config);\n await ctx.watch();\n console.log(\"Watching for changes...\");\n} else {\n await esbuild.build(config);\n}\n" }, { "path": "apps/vscode/eslint.config.mjs", "content": "import eslint from \"@eslint/js\";\nimport { defineConfig, globalIgnores } from \"eslint/config\";\nimport eslintConfigPrettier from \"eslint-config-prettier/flat\";\nimport eslintPluginPrettier from \"eslint-plugin-prettier/recommended\";\nimport unusedImports from \"eslint-plugin-unused-imports\";\nimport globals from \"globals\";\nimport tseslint from \"typescript-eslint\";\n\nexport default defineConfig([\n eslint.configs.recommended,\n tseslint.configs.recommended,\n eslintConfigPrettier,\n eslintPluginPrettier,\n {\n languageOptions: {\n globals: {\n ...globals.browser,\n ...globals.node,\n },\n parserOptions: {\n ecmaVersion: \"latest\",\n sourceType: \"module\",\n tsconfigRootDir: import.meta.dirname,\n },\n },\n plugins: {\n \"unused-imports\": unusedImports,\n },\n rules: {\n \"@typescript-eslint/consistent-type-imports\": \"error\",\n \"unused-imports/no-unused-imports\": \"error\",\n \"@typescript-eslint/no-explicit-any\": \"off\",\n \"prettier/prettier\": \"error\",\n \"space-in-parens\": \"error\",\n \"no-empty\": \"error\",\n \"no-multiple-empty-lines\": \"error\",\n \"no-irregular-whitespace\": \"error\",\n strict: [\"error\", \"never\"],\n \"linebreak-style\": [\"error\", \"unix\"],\n quotes: [\"error\", \"double\", { avoidEscape: true }],\n semi: [\"error\", \"always\"],\n \"prefer-const\": \"error\",\n \"space-before-function-paren\": [\n \"error\",\n {\n anonymous: \"always\",\n named: \"never\",\n asyncArrow: \"always\",\n },\n ],\n },\n },\n globalIgnores([\"build/**\"]),\n]);\n" }, { "path": "apps/vscode/ext-src/extension.ts", "content": "import * as path from \"path\";\nimport * as vscode from \"vscode\";\nimport { createWebviewPanel } from \"./webview\";\n\nfunction getPanelTitle(document?: vscode.TextDocument) {\n if (!document) return \"JSON Crack\";\n\n const fileName = path.basename(document.fileName);\n return fileName || \"JSON Crack\";\n}\n\nexport function activate(context: vscode.ExtensionContext) {\n context.subscriptions.push(\n vscode.commands.registerCommand(\"jsoncrack-vscode.start\", () =>\n createWebviewForActiveEditor(context)\n ),\n vscode.commands.registerCommand(\"jsoncrack-vscode.start.specific\", (content?: string) =>\n createWebviewForContent(context, content)\n ),\n vscode.commands.registerCommand(\"jsoncrack-vscode.start.selected\", () =>\n createWebviewForSelectedText(context)\n )\n );\n}\n\n// create webview for selected text\nasync function createWebviewForSelectedText(context: vscode.ExtensionContext) {\n const editor = vscode.window.activeTextEditor;\n\n if (editor && editor.selection.isEmpty) {\n vscode.window.showInformationMessage(\"Please select some text first!\");\n return;\n }\n\n const selectedText = editor?.document.getText(editor.selection);\n\n // Create the webview panel and send the selected JSON content\n const panel = createWebviewPanel(context, getPanelTitle(editor?.document));\n panel.webview.postMessage({\n json: selectedText,\n });\n\n const onReceiveMessage = panel.webview.onDidReceiveMessage(e => {\n if (e === \"ready\") {\n panel.webview.postMessage({\n json: selectedText,\n });\n }\n });\n\n const onTextChange = vscode.workspace.onDidChangeTextDocument(changeEvent => {\n if (changeEvent.document === editor?.document) {\n panel.webview.postMessage({\n json: changeEvent.document.getText(editor?.selection),\n });\n }\n });\n\n const disposer = () => {\n onTextChange.dispose();\n onReceiveMessage.dispose();\n };\n\n panel.onDidDispose(disposer, null, context.subscriptions);\n}\n\nasync function createWebviewForActiveEditor(context: vscode.ExtensionContext) {\n const editor = vscode.window.activeTextEditor;\n const panel = createWebviewPanel(context, getPanelTitle(editor?.document));\n\n const onReceiveMessage = panel.webview.onDidReceiveMessage(e => {\n if (e === \"ready\") {\n panel.webview.postMessage({\n json: editor?.document.getText(),\n });\n }\n });\n\n const onTextChange = vscode.workspace.onDidChangeTextDocument(changeEvent => {\n if (changeEvent.document === editor?.document) {\n panel.webview.postMessage({\n json: changeEvent.document.getText(),\n });\n }\n });\n\n const disposer = () => {\n onTextChange.dispose();\n onReceiveMessage.dispose();\n };\n\n panel.onDidDispose(disposer, null, context.subscriptions);\n}\n\n/**\n * Renders a readonly diagram from a string\n * @param context ExtensionContext\n * @param content JSON content as a string\n */\nfunction createWebviewForContent(context?: vscode.ExtensionContext, content?: string): any {\n if (context && content) {\n const panel = createWebviewPanel(\n context,\n getPanelTitle(vscode.window.activeTextEditor?.document)\n );\n panel.webview.postMessage({\n json: content,\n });\n }\n}\n\n// This method is called when your extension is deactivated\nexport function deactivate() {}\n" }, { "path": "apps/vscode/ext-src/webview.ts", "content": "import * as path from \"path\";\nimport * as vscode from \"vscode\";\n\nexport function createWebviewPanel(context: vscode.ExtensionContext, title = \"JSON Crack\") {\n const extPath = context.extensionPath;\n const webviewDir = vscode.Uri.file(path.join(extPath, \"build\", \"webview\"));\n\n const panel = vscode.window.createWebviewPanel(\n \"liveHTMLPreviewer\",\n title,\n vscode.ViewColumn.Beside,\n {\n enableScripts: true,\n retainContextWhenHidden: true,\n localResourceRoots: [webviewDir, vscode.Uri.file(path.join(extPath, \"assets\"))],\n }\n );\n panel.iconPath = vscode.Uri.file(path.join(extPath, \"assets\", \"jsoncrack.png\"));\n\n const scriptUri = panel.webview.asWebviewUri(\n vscode.Uri.file(path.join(extPath, \"build\", \"webview\", \"index.js\"))\n );\n const styleUri = panel.webview.asWebviewUri(\n vscode.Uri.file(path.join(extPath, \"build\", \"webview\", \"index.css\"))\n );\n\n const nonce = getNonce();\n const csp = [\n `default-src 'self' ${panel.webview.cspSource} blob:`,\n `connect-src ${panel.webview.cspSource} blob:`,\n `script-src 'unsafe-eval' 'unsafe-inline' ${panel.webview.cspSource}`,\n `style-src ${panel.webview.cspSource} 'unsafe-inline'`,\n `worker-src ${panel.webview.cspSource} blob: data:`,\n ].join(\"; \");\n\n panel.webview.html = `\n \n \n \n \n \n \n \n \n
\n \n \n `;\n\n return panel;\n}\n\nfunction getNonce() {\n let text = \"\";\n const possible = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\n for (let i = 0; i < 32; i++) {\n text += possible.charAt(Math.floor(Math.random() * possible.length));\n }\n return text;\n}\n" }, { "path": "apps/vscode/index.html", "content": "\n\n \n \n \n \n \n \n
\n \n \n\n" }, { "path": "apps/vscode/package.json", "content": "{\n \"name\": \"vscode\",\n \"version\": \"3.0.0\",\n \"displayName\": \"JSON Crack\",\n \"description\": \"Seamlessly visualize your JSON data instantly into graphs.\",\n \"publisher\": \"AykutSarac\",\n \"license\": \"MIT\",\n \"author\": {\n \"email\": \"aykutsarac0@gmail.com\",\n \"name\": \"Aykut Saraç\"\n },\n \"homepage\": \"https://jsoncrack.com\",\n \"icon\": \"assets/jsoncrack.png\",\n \"galleryBanner\": {\n \"color\": \"#202225\",\n \"theme\": \"dark\"\n },\n \"categories\": [\n \"Visualization\"\n ],\n \"keywords\": [\n \"json\",\n \"visualizer\",\n \"jsoncrack\",\n \"data\",\n \"yaml\",\n \"livepreview\"\n ],\n \"activationEvents\": [\n \"workspaceContains:**/*.{json}\"\n ],\n \"main\": \"./build/extension.js\",\n \"contributes\": {\n \"commands\": [\n {\n \"command\": \"jsoncrack-vscode.start\",\n \"title\": \"Enable JSON Crack visualization\",\n \"category\": \"menubar\",\n \"icon\": {\n \"light\": \"./assets/icon-light.svg\",\n \"dark\": \"./assets/icon-dark.svg\"\n }\n },\n {\n \"command\": \"jsoncrack-vscode.start.specific\",\n \"title\": \"Enable JSON Crack visualization for specific file\",\n \"category\": \"menubar\"\n },\n {\n \"command\": \"jsoncrack-vscode.start.selected\",\n \"title\": \"Open with JSON Crack\",\n \"category\": \"Navigation\"\n }\n ],\n \"menus\": {\n \"editor/context\": [\n {\n \"command\": \"jsoncrack-vscode.start.selected\",\n \"when\": \"editorHasSelection\",\n \"group\": \"navigation\"\n }\n ],\n \"commandPalette\": [\n {\n \"command\": \"jsoncrack-vscode.start\",\n \"when\": \"never\"\n }\n ],\n \"editor/title\": [\n {\n \"command\": \"jsoncrack-vscode.start\",\n \"when\": \"resourceExtname == .json || editorLangId == json\",\n \"group\": \"navigation\"\n }\n ]\n }\n },\n \"scripts\": {\n \"vscode:prepublish\": \"pnpm run build\",\n \"dev\": \"vite\",\n \"build\": \"vite build && node esbuild.config.mjs --production\",\n \"build:dev\": \"vite build && node esbuild.config.mjs\",\n \"watch\": \"node esbuild.config.mjs --watch\",\n \"watch:webview\": \"vite build --watch\",\n \"lint\": \"eslint src ext-src && prettier --check src ext-src\",\n \"lint:fix\": \"eslint --fix src ext-src && prettier --write src ext-src\",\n \"clean\": \"rm -rf build\"\n },\n \"devDependencies\": {\n \"@eslint/js\": \"^10.0.1\",\n \"@mantine/code-highlight\": \"^8.3.18\",\n \"@mantine/core\": \"^8.3.18\",\n \"@mantine/hooks\": \"^8.3.18\",\n \"@trivago/prettier-plugin-sort-imports\": \"^6.0.2\",\n \"@types/node\": \"^22.19.15\",\n \"@types/react\": \"19.2.11\",\n \"@types/react-dom\": \"19.2.3\",\n \"@types/vscode\": \"^1.110.0\",\n \"@typescript-eslint/eslint-plugin\": \"^8.57.1\",\n \"@typescript-eslint/parser\": \"^8.57.1\",\n \"@vitejs/plugin-react\": \"^4.7.0\",\n \"esbuild\": \"^0.25.12\",\n \"eslint\": \"^10.0.3\",\n \"eslint-config-prettier\": \"^10.1.8\",\n \"eslint-plugin-prettier\": \"^5.5.5\",\n \"eslint-plugin-unused-imports\": \"^4.4.1\",\n \"globals\": \"^17.4.0\",\n \"prettier\": \"^3.8.1\",\n \"typescript\": \"^5.9.3\",\n \"typescript-eslint\": \"^8.57.1\",\n \"vite\": \"^6.4.1\"\n },\n \"dependencies\": {\n \"jsoncrack-react\": \"workspace:*\",\n \"react\": \"19.2.4\",\n \"react-dom\": \"19.2.4\",\n \"shiki\": \"^4.0.2\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/AykutSarac/jsoncrack.com\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/AykutSarac/jsoncrack.com/issues\"\n },\n \"engines\": {\n \"vscode\": \"^1.86.0\"\n },\n \"packageManager\": \"pnpm@10.20.0\"\n}\n" }, { "path": "apps/vscode/src/App.tsx", "content": "import { useCallback, useEffect, useState } from \"react\";\nimport { Anchor, Box, MantineProvider, Text } from \"@mantine/core\";\nimport { CodeHighlightAdapterProvider, createShikiAdapter } from \"@mantine/code-highlight\";\nimport type { NodeData } from \"jsoncrack-react\";\nimport { JSONCrack } from \"jsoncrack-react\";\nimport { NodeModal } from \"./components/NodeModal\";\n\nasync function loadShiki() {\n const { createHighlighter } = await import(\"shiki\");\n return createHighlighter({ langs: [\"json\"], themes: [] });\n}\n\nconst shikiAdapter = createShikiAdapter(loadShiki);\n\nfunction getTheme() {\n const theme = document.body.getAttribute(\"data-vscode-theme-kind\");\n if (theme?.includes(\"light\")) return \"light\" as const;\n return \"dark\";\n}\n\nconst App: React.FC = () => {\n const [json, setJson] = useState(\"{}\");\n const [selectedNode, setSelectedNode] = useState(null);\n const theme = getTheme();\n\n useEffect(() => {\n const vscode = window?.acquireVsCodeApi?.();\n vscode?.postMessage(\"ready\");\n\n const onMessage = (event: MessageEvent<{ json?: string }>) => {\n const jsonData = event.data?.json;\n if (typeof jsonData === \"string\") {\n setJson(jsonData);\n }\n };\n\n window.addEventListener(\"message\", onMessage);\n\n return () => {\n window.removeEventListener(\"message\", onMessage);\n };\n }, []);\n\n const handleNodeClick = useCallback((node: NodeData) => {\n setSelectedNode(node);\n }, []);\n\n const closeNodeModal = useCallback(() => {\n setSelectedNode(null);\n }, []);\n\n return (\n \n \n \n \n {selectedNode && (\n \n )}\n \n \n \n Powered by JSON Crack\n \n \n \n \n \n \n );\n};\n\nexport default App;\n\ndeclare global {\n interface Window {\n acquireVsCodeApi?: () => any;\n }\n}\n" }, { "path": "apps/vscode/src/components/NodeModal.tsx", "content": "import type { ModalProps } from \"@mantine/core\";\nimport { Modal, Stack, Text, ScrollArea } from \"@mantine/core\";\nimport { CodeHighlight } from \"@mantine/code-highlight\";\nimport type { NodeData } from \"jsoncrack-react\";\n\ninterface NodeModalProps extends ModalProps {\n nodeData: NodeData | null;\n}\n\nconst normalizeNodeData = (nodeRows: NodeData[\"text\"]) => {\n if (!nodeRows || nodeRows.length === 0) return \"{}\";\n if (nodeRows.length === 1 && !nodeRows[0].key) return `${nodeRows[0].value}`;\n\n const obj: Record = {};\n nodeRows.forEach(row => {\n if (row.type !== \"array\" && row.type !== \"object\" && row.key) {\n obj[row.key] = row.value;\n }\n });\n\n return JSON.stringify(obj, null, 2);\n};\n\nconst jsonPathToString = (path?: NodeData[\"path\"]) => {\n if (!path || path.length === 0) return \"$\";\n const segments = path.map(seg => (typeof seg === \"number\" ? seg : `\"${seg}\"`));\n return `$[${segments.join(\"][\")}]`;\n};\n\nexport const NodeModal = ({ opened, onClose, nodeData }: NodeModalProps) => {\n const nodeContent = normalizeNodeData(nodeData?.text ?? []);\n const jsonPath = jsonPathToString(nodeData?.path);\n\n return (\n \n \n \n \n Content\n \n \n \n \n \n \n JSON Path\n \n \n \n \n \n \n );\n};\n" }, { "path": "apps/vscode/src/env.d.ts", "content": "/// \n" }, { "path": "apps/vscode/src/global.css", "content": "html,\nbody,\n#root {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\na {\n color: inherit;\n text-decoration: none;\n}\n" }, { "path": "apps/vscode/src/index.tsx", "content": "import \"@mantine/core/styles.css\";\nimport \"@mantine/code-highlight/styles.css\";\nimport \"jsoncrack-react/style.css\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nimport \"./global.css\";\n\nconst container = document.getElementById(\"root\") as HTMLElement;\nconst root = createRoot(container);\nroot.render();\n" }, { "path": "apps/vscode/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"ES2020\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"module\": \"esnext\",\n \"moduleResolution\": \"bundler\",\n \"jsx\": \"react-jsx\",\n \"strict\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": true,\n \"noImplicitAny\": false\n },\n \"include\": [\"src\", \"ext-src\"],\n \"exclude\": [\"node_modules\"]\n}\n" }, { "path": "apps/vscode/vite.config.ts", "content": "import react from \"@vitejs/plugin-react\";\nimport path from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport { defineConfig } from \"vite\";\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url));\n\nexport default defineConfig({\n plugins: [react()],\n build: {\n outDir: \"build/webview\",\n emptyOutDir: true,\n rollupOptions: {\n input: \"src/index.tsx\",\n output: {\n entryFileNames: \"index.js\",\n assetFileNames: \"index[extname]\",\n inlineDynamicImports: true,\n },\n },\n },\n resolve: {\n alias: {\n react: path.resolve(__dirname, \"node_modules/react\"),\n \"react-dom\": path.resolve(__dirname, \"node_modules/react-dom\"),\n },\n },\n});\n" }, { "path": "apps/www/.dockerignore", "content": "Dockerfile\n.dockerignore\nnode_modules\nnpm-debug.log\nREADME.md\n.next\n.git" }, { "path": "apps/www/.gitignore", "content": "# App dependencies\nnode_modules/\n\n# Next.js\n.next/\nout/\n\n# Turborepo task cache\n.turbo/\n\n# Test/build artifacts\ncoverage/\nbuild/\n*.tsbuildinfo\n\n# Local environment files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# Deployment\n.vercel\n\n# Workspace migration artifact (root lockfile is authoritative)\npnpm-lock.yaml\n\n# PWA workers\npublic/workbox-*.js\npublic/sw.js\npublic/fallback-*.js\n" }, { "path": "apps/www/.prettierignore", "content": ".github\n.next\nnode_modules/\nout\npublic\n*-lock.json\ntsconfig.json" }, { "path": "apps/www/.prettierrc", "content": "{\n \"trailingComma\": \"es5\",\n \"singleQuote\": false,\n \"semi\": true,\n \"printWidth\": 100,\n \"arrowParens\": \"avoid\",\n \"importOrder\": [\n \"^(react/(.*)$)|^(react$)\",\n \"^(next/(.*)$)|^(next$)\",\n \"^@mantine/core\",\n \"^@mantine\",\n \"styled\",\n \"\",\n \"^src/(.*)$\",\n \"^[./]\"\n ],\n \"importOrderParserPlugins\": [\"typescript\", \"jsx\", \"decorators-legacy\"],\n \"plugins\": [\"@trivago/prettier-plugin-sort-imports\"]\n}\n" }, { "path": "apps/www/Dockerfile", "content": "FROM node:24.10.0-alpine AS base\nRUN npm install -g pnpm@10.10.0\n\n# Stage 1: Install dependencies\nFROM base AS deps\nWORKDIR /app\nCOPY package.json pnpm-lock.yaml ./\nRUN corepack enable pnpm && pnpm install --frozen-lockfile\n\n# Stage 2: Build the application\nFROM base AS builder\nWORKDIR /app\nCOPY --from=deps /app/node_modules ./node_modules\nCOPY . .\nRUN corepack enable pnpm && pnpm run build\n\n# Stage 3: Production image\nFROM nginxinc/nginx-unprivileged:stable AS production\nWORKDIR /app\nCOPY --from=builder /app/out /app\nCOPY ./nginx.conf /etc/nginx/conf.d/default.conf\n\nEXPOSE 8080\n" }, { "path": "apps/www/LICENSE.md", "content": " Apache License\n Version 2.0, January 2004\n http://www.apache.org/licenses/\n\n TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n 1. Definitions.\n\n \"License\" shall mean the terms and conditions for use, reproduction,\n and distribution as defined by Sections 1 through 9 of this document.\n\n \"Licensor\" shall mean the copyright owner or entity authorized by\n the copyright owner that is granting the License.\n\n \"Legal Entity\" shall mean the union of the acting entity and all\n other entities that control, are controlled by, or are under common\n control with that entity. For the purposes of this definition,\n \"control\" means (i) the power, direct or indirect, to cause the\n direction or management of such entity, whether by contract or\n otherwise, or (ii) ownership of fifty percent (50%) or more of the\n outstanding shares, or (iii) beneficial ownership of such entity.\n\n \"You\" (or \"Your\") shall mean an individual or Legal Entity\n exercising permissions granted by this License.\n\n \"Source\" form shall mean the preferred form for making modifications,\n including but not limited to software source code, documentation\n source, and configuration files.\n\n \"Object\" form shall mean any form resulting from mechanical\n transformation or translation of a Source form, including but\n not limited to compiled object code, generated documentation,\n and conversions to other media types.\n\n \"Work\" shall mean the work of authorship, whether in Source or\n Object form, made available under the License, as indicated by a\n copyright notice that is included in or attached to the work\n (an example is provided in the Appendix below).\n\n \"Derivative Works\" shall mean any work, whether in Source or Object\n form, that is based on (or derived from) the Work and for which the\n editorial revisions, annotations, elaborations, or other modifications\n represent, as a whole, an original work of authorship. For the purposes\n of this License, Derivative Works shall not include works that remain\n separable from, or merely link (or bind by name) to the interfaces of,\n the Work and Derivative Works thereof.\n\n \"Contribution\" shall mean any work of authorship, including\n the original version of the Work and any modifications or additions\n to that Work or Derivative Works thereof, that is intentionally\n submitted to Licensor for inclusion in the Work by the copyright owner\n or by an individual or Legal Entity authorized to submit on behalf of\n the copyright owner. For the purposes of this definition, \"submitted\"\n means any form of electronic, verbal, or written communication sent\n to the Licensor or its representatives, including but not limited to\n communication on electronic mailing lists, source code control systems,\n and issue tracking systems that are managed by, or on behalf of, the\n Licensor for the purpose of discussing and improving the Work, but\n excluding communication that is conspicuously marked or otherwise\n designated in writing by the copyright owner as \"Not a Contribution.\"\n\n \"Contributor\" shall mean Licensor and any individual or Legal Entity\n on behalf of whom a Contribution has been received by Licensor and\n subsequently incorporated within the Work.\n\n 2. Grant of Copyright License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n copyright license to reproduce, prepare Derivative Works of,\n publicly display, publicly perform, sublicense, and distribute the\n Work and such Derivative Works in Source or Object form.\n\n 3. Grant of Patent License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n (except as stated in this section) patent license to make, have made,\n use, offer to sell, sell, import, and otherwise transfer the Work,\n where such license applies only to those patent claims licensable\n by such Contributor that are necessarily infringed by their\n Contribution(s) alone or by combination of their Contribution(s)\n with the Work to which such Contribution(s) was submitted. If You\n institute patent litigation against any entity (including a\n cross-claim or counterclaim in a lawsuit) alleging that the Work\n or a Contribution incorporated within the Work constitutes direct\n or contributory patent infringement, then any patent licenses\n granted to You under this License for that Work shall terminate\n as of the date such litigation is filed.\n\n 4. Redistribution. You may reproduce and distribute copies of the\n Work or Derivative Works thereof in any medium, with or without\n modifications, and in Source or Object form, provided that You\n meet the following conditions:\n\n (a) You must give any other recipients of the Work or\n Derivative Works a copy of this License; and\n\n (b) You must cause any modified files to carry prominent notices\n stating that You changed the files; and\n\n (c) You must retain, in the Source form of any Derivative Works\n that You distribute, all copyright, patent, trademark, and\n attribution notices from the Source form of the Work,\n excluding those notices that do not pertain to any part of\n the Derivative Works; and\n\n (d) If the Work includes a \"NOTICE\" text file as part of its\n distribution, then any Derivative Works that You distribute must\n include a readable copy of the attribution notices contained\n within such NOTICE file, excluding those notices that do not\n pertain to any part of the Derivative Works, in at least one\n of the following places: within a NOTICE text file distributed\n as part of the Derivative Works; within the Source form or\n documentation, if provided along with the Derivative Works; or,\n within a display generated by the Derivative Works, if and\n wherever such third-party notices normally appear. The contents\n of the NOTICE file are for informational purposes only and\n do not modify the License. You may add Your own attribution\n notices within Derivative Works that You distribute, alongside\n or as an addendum to the NOTICE text from the Work, provided\n that such additional attribution notices cannot be construed\n as modifying the License.\n\n You may add Your own copyright statement to Your modifications and\n may provide additional or different license terms and conditions\n for use, reproduction, or distribution of Your modifications, or\n for any such Derivative Works as a whole, provided Your use,\n reproduction, and distribution of the Work otherwise complies with\n the conditions stated in this License.\n\n 5. Submission of Contributions. Unless You explicitly state otherwise,\n any Contribution intentionally submitted for inclusion in the Work\n by You to the Licensor shall be under the terms and conditions of\n this License, without any additional terms or conditions.\n Notwithstanding the above, nothing herein shall supersede or modify\n the terms of any separate license agreement you may have executed\n with Licensor regarding such Contributions.\n\n 6. Trademarks. This License does not grant permission to use the trade\n names, trademarks, service marks, or product names of the Licensor,\n except as required for reasonable and customary use in describing the\n origin of the Work and reproducing the content of the NOTICE file.\n\n 7. Disclaimer of Warranty. Unless required by applicable law or\n agreed to in writing, Licensor provides the Work (and each\n Contributor provides its Contributions) on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n implied, including, without limitation, any warranties or conditions\n of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n PARTICULAR PURPOSE. You are solely responsible for determining the\n appropriateness of using or redistributing the Work and assume any\n risks associated with Your exercise of permissions under this License.\n\n 8. Limitation of Liability. In no event and under no legal theory,\n whether in tort (including negligence), contract, or otherwise,\n unless required by applicable law (such as deliberate and grossly\n negligent acts) or agreed to in writing, shall any Contributor be\n liable to You for damages, including any direct, indirect, special,\n incidental, or consequential damages of any character arising as a\n result of this License or out of the use or inability to use the\n Work (including but not limited to damages for loss of goodwill,\n work stoppage, computer failure or malfunction, or any and all\n other commercial damages or losses), even if such Contributor\n has been advised of the possibility of such damages.\n\n 9. Accepting Warranty or Additional Liability. While redistributing\n the Work or Derivative Works thereof, You may choose to offer,\n and charge a fee for, acceptance of support, warranty, indemnity,\n or other liability obligations and/or rights consistent with this\n License. However, in accepting such obligations, You may act only\n on Your own behalf and on Your sole responsibility, not on behalf\n of any other Contributor, and only if You agree to indemnify,\n defend, and hold each Contributor harmless for any liability\n incurred by, or claims asserted against, such Contributor by reason\n of your accepting any such warranty or additional liability.\n\n END OF TERMS AND CONDITIONS\n\n APPENDIX: How to apply the Apache License to your work.\n\n To apply the Apache License to your work, attach the following\n boilerplate notice, with the fields enclosed by brackets \"[]\"\n replaced with your own identifying information. (Don't include\n the brackets!) The text should be enclosed in the appropriate\n comment syntax for the file format. We also recommend that a\n file or class name and description of purpose be included on the\n same \"printed page\" as the copyright notice for easier\n identification within third-party archives.\n\n Copyright 2025 Aykut Saraç\n\n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n" }, { "path": "apps/www/docker-compose.yml", "content": "services:\n jsoncrack:\n image: jsoncrack\n container_name: jsoncrack\n build: \n context: .\n dockerfile: Dockerfile\n ports:\n - \"8888:8080\"\n environment:\n - NODE_ENV=production" }, { "path": "apps/www/eslint.config.mjs", "content": "import eslint from \"@eslint/js\";\nimport nextPlugin from \"@next/eslint-plugin-next\";\nimport eslintConfigPrettier from \"eslint-config-prettier/flat\";\nimport eslintPluginPrettier from \"eslint-plugin-prettier/recommended\";\nimport unusedImports from \"eslint-plugin-unused-imports\";\nimport { defineConfig, globalIgnores } from \"eslint/config\";\nimport tseslint from \"typescript-eslint\";\n\nexport default defineConfig([\n globalIgnores([\"src/enums\", \"**/next.config.js\", \"src/lib/utils/json2go.js\"]),\n eslint.configs.recommended,\n tseslint.configs.recommended,\n {\n plugins: {\n \"@next/next\": nextPlugin,\n },\n rules: {\n ...nextPlugin.configs.recommended.rules,\n ...nextPlugin.configs[\"core-web-vitals\"].rules,\n \"@next/next/no-img-element\": \"off\",\n },\n },\n eslintConfigPrettier,\n eslintPluginPrettier,\n {\n languageOptions: {\n parserOptions: {\n tsconfigRootDir: import.meta.dirname,\n },\n },\n plugins: {\n \"unused-imports\": unusedImports,\n },\n rules: {\n \"@typescript-eslint/consistent-type-imports\": \"error\",\n \"unused-imports/no-unused-imports\": \"error\",\n \"@typescript-eslint/no-explicit-any\": \"off\",\n \"prettier/prettier\": \"error\",\n \"space-in-parens\": \"error\",\n \"no-empty\": \"error\",\n \"no-multiple-empty-lines\": \"error\",\n \"no-irregular-whitespace\": \"error\",\n strict: [\"error\", \"never\"],\n \"linebreak-style\": [\"error\", \"unix\"],\n quotes: [\"error\", \"double\", { avoidEscape: true }],\n semi: [\"error\", \"always\"],\n \"prefer-const\": \"error\",\n \"space-before-function-paren\": [\n \"error\",\n {\n anonymous: \"always\",\n named: \"never\",\n asyncArrow: \"always\",\n },\n ],\n },\n },\n]);\n" }, { "path": "apps/www/next-env.d.ts", "content": "/// \n/// \nimport \"./.next/dev/types/routes.d.ts\";\n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.\n" }, { "path": "apps/www/next-sitemap.config.js", "content": "/** @type {import('next-sitemap').IConfig} */\nmodule.exports = {\n siteUrl: \"https://jsoncrack.com\",\n exclude: [\"/widget\"],\n autoLastmod: false,\n changefreq: \"never\",\n};\n" }, { "path": "apps/www/next.config.js", "content": "const withBundleAnalyzer = require(\"@next/bundle-analyzer\")({\n enabled: process.env.ANALYZE === \"true\",\n});\n\n/**\n * @type {import('next').NextConfig}\n */\nconst config = {\n output: \"export\",\n transpilePackages: [\"jsoncrack\"],\n reactStrictMode: false,\n productionBrowserSourceMaps: true,\n compiler: {\n styledComponents: true,\n },\n turbopack: {\n resolveAlias: {\n fs: {\n browser: \"./shims/empty.ts\",\n },\n },\n },\n webpack: (config, { isServer }) => {\n config.resolve.fallback = { fs: false };\n config.output.webassemblyModuleFilename = \"static/wasm/[modulehash].wasm\";\n config.experiments = { asyncWebAssembly: true, layers: true };\n\n if (!isServer) {\n config.output.environment = { ...config.output.environment, asyncFunction: true };\n }\n\n return config;\n },\n};\n\nconst configExport = () => {\n if (process.env.ANALYZE === \"true\") return withBundleAnalyzer(config);\n return config;\n};\n\nmodule.exports = configExport();\n" }, { "path": "apps/www/nginx.conf", "content": "server {\n listen 8080;\n root /app;\n include /etc/nginx/mime.types;\n\n location /editor {\n try_files $uri /editor.html;\n }\n \n location /widget {\n try_files $uri /widget.html;\n }\n\n location /docs {\n try_files $uri /docs.html;\n }\n}\n" }, { "path": "apps/www/package.json", "content": "{\n \"name\": \"www\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"license\": \"Apache-2.0\",\n \"scripts\": {\n \"dev\": \"next dev --webpack\",\n \"build\": \"next build --webpack\",\n \"postbuild\": \"next-sitemap --config next-sitemap.config.js\",\n \"start\": \"next start\",\n \"lint\": \"tsc --project tsconfig.json && eslint src && prettier --check src\",\n \"lint:fix\": \"eslint --fix src && prettier --write src\",\n \"analyze\": \"ANALYZE=true npm run build\"\n },\n \"dependencies\": {\n \"@mantine/code-highlight\": \"^8.3.18\",\n \"@mantine/core\": \"^8.3.18\",\n \"@mantine/dropzone\": \"^8.3.18\",\n \"@mantine/hooks\": \"^8.3.18\",\n \"@monaco-editor/react\": \"^4.7.0\",\n \"allotment\": \"^1.20.5\",\n \"fast-xml-parser\": \"5.5.6\",\n \"gofmt.js\": \"0.0.2\",\n \"html-to-image\": \"1.11.13\",\n \"jq-web\": \"0.6.2\",\n \"js-yaml\": \"4.1.1\",\n \"json-2-csv\": \"5.5.10\",\n \"json-schema-faker\": \"0.6.0\",\n \"json_typegen_wasm\": \"0.7.0\",\n \"jsonc-parser\": \"3.3.1\",\n \"jsoncrack-react\": \"workspace:*\",\n \"jsonpath-plus\": \"10.4.0\",\n \"lodash.debounce\": \"^4.0.8\",\n \"next\": \"16.1.7\",\n \"next-seo\": \"^7.2.0\",\n \"next-sitemap\": \"^4.2.3\",\n \"nextjs-google-analytics\": \"^2.3.7\",\n \"react\": \"19.2.4\",\n \"react-dom\": \"19.2.4\",\n \"react-hot-toast\": \"^2.6.0\",\n \"react-icons\": \"^5.6.0\",\n \"react-json-tree\": \"^0.20.0\",\n \"react-linkify-it\": \"^2.0.0\",\n \"react-zoomable-ui\": \"^0.11.0\",\n \"reaflow\": \"5.4.1\",\n \"shiki\": \"^4.0.2\",\n \"styled-components\": \"^6.3.11\",\n \"use-long-press\": \"^3.3.0\",\n \"zustand\": \"^5.0.12\"\n },\n \"devDependencies\": {\n \"@eslint/js\": \"^10.0.1\",\n \"@next/bundle-analyzer\": \"16.1.7\",\n \"@next/eslint-plugin-next\": \"16.1.7\",\n \"@trivago/prettier-plugin-sort-imports\": \"^6.0.2\",\n \"@types/js-yaml\": \"^4.0.9\",\n \"@types/node\": \"^25.5.0\",\n \"@types/react\": \"19.2.14\",\n \"@types/react-dom\": \"19.2.3\",\n \"eslint\": \"^10.0.3\",\n \"eslint-config-prettier\": \"^10.1.8\",\n \"eslint-plugin-prettier\": \"^5.5.5\",\n \"eslint-plugin-unused-imports\": \"^4.4.1\",\n \"prettier\": \"^3.8.1\",\n \"ts-node\": \"^10.9.2\",\n \"typescript\": \"5.9.3\",\n \"typescript-eslint\": \"^8.57.1\"\n },\n \"packageManager\": \"pnpm@10.20.0\"\n}\n" }, { "path": "apps/www/public/.nojekyll", "content": "" }, { "path": "apps/www/public/CNAME", "content": "jsoncrack.com" }, { "path": "apps/www/public/manifest.json", "content": "{\n \"name\": \"JSON Crack\",\n \"short_name\": \"JSON Crack\",\n \"description\": \"JSON Crack Editor is a tool for visualizing into graphs, analyzing, editing, formatting, querying, transforming and validating JSON, CSV, YAML, XML, and more.\",\n \"theme_color\": \"#36393e\",\n \"background_color\": \"#36393e\",\n \"display\": \"standalone\",\n \"orientation\": \"landscape\",\n \"scope\": \"/editor\",\n \"start_url\": \"/editor\",\n \"icons\": [\n {\n \"src\": \"assets/192.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\"\n },\n\n {\n \"src\": \"assets/512.png\",\n \"sizes\": \"512x512\",\n \"type\": \"image/png\"\n }\n ]\n}\n" }, { "path": "apps/www/public/robots.txt", "content": "User-agent: *\n\nAllow: /\n\nSitemap: https://jsoncrack.com/sitemap.xml\n" }, { "path": "apps/www/public/sitemap-0.xml", "content": "\n\nhttps://jsoncrack.comnever0.7\nhttps://jsoncrack.com/converter/csv-to-jsonnever0.7\nhttps://jsoncrack.com/converter/csv-to-xmlnever0.7\nhttps://jsoncrack.com/converter/csv-to-yamlnever0.7\nhttps://jsoncrack.com/converter/json-to-csvnever0.7\nhttps://jsoncrack.com/converter/json-to-xmlnever0.7\nhttps://jsoncrack.com/converter/json-to-yamlnever0.7\nhttps://jsoncrack.com/converter/xml-to-csvnever0.7\nhttps://jsoncrack.com/converter/xml-to-jsonnever0.7\nhttps://jsoncrack.com/converter/xml-to-yamlnever0.7\nhttps://jsoncrack.com/converter/yaml-to-csvnever0.7\nhttps://jsoncrack.com/converter/yaml-to-jsonnever0.7\nhttps://jsoncrack.com/converter/yaml-to-xmlnever0.7\nhttps://jsoncrack.com/docsnever0.7\nhttps://jsoncrack.com/editornever0.7\nhttps://jsoncrack.com/legal/privacynever0.7\nhttps://jsoncrack.com/legal/termsnever0.7\nhttps://jsoncrack.com/tools/json-schemanever0.7\nhttps://jsoncrack.com/type/csv-to-gonever0.7\nhttps://jsoncrack.com/type/csv-to-kotlinnever0.7\nhttps://jsoncrack.com/type/csv-to-rustnever0.7\nhttps://jsoncrack.com/type/csv-to-typescriptnever0.7\nhttps://jsoncrack.com/type/json-to-gonever0.7\nhttps://jsoncrack.com/type/json-to-kotlinnever0.7\nhttps://jsoncrack.com/type/json-to-rustnever0.7\nhttps://jsoncrack.com/type/json-to-typescriptnever0.7\nhttps://jsoncrack.com/type/xml-to-gonever0.7\nhttps://jsoncrack.com/type/xml-to-kotlinnever0.7\nhttps://jsoncrack.com/type/xml-to-rustnever0.7\nhttps://jsoncrack.com/type/xml-to-typescriptnever0.7\nhttps://jsoncrack.com/type/yaml-to-gonever0.7\nhttps://jsoncrack.com/type/yaml-to-kotlinnever0.7\nhttps://jsoncrack.com/type/yaml-to-rustnever0.7\nhttps://jsoncrack.com/type/yaml-to-typescriptnever0.7\n" }, { "path": "apps/www/public/sitemap.xml", "content": "\n\nhttps://jsoncrack.com/sitemap-0.xml\n" }, { "path": "apps/www/shims/empty.ts", "content": "export {};\n" }, { "path": "apps/www/src/constants/globalStyle.ts", "content": "import { createGlobalStyle } from \"styled-components\";\n\nconst GlobalStyle = createGlobalStyle`\n html, body {\n background: #ffffff;\n overscroll-behavior: none;\n -webkit-font-smoothing: subpixel-antialiased !important;\n }\n\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n scroll-behavior: smooth !important;\n -webkit-tap-highlight-color: transparent;\n -webkit-font-smoothing: never;\n }\n\n .hide {\n display: none;\n }\n\n svg {\n vertical-align: text-top;\n }\n\n a {\n color: unset;\n text-decoration: none;\n }\n\n button {\n border: none;\n outline: none;\n background: transparent;\n width: fit-content;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n`;\n\nexport default GlobalStyle;\n" }, { "path": "apps/www/src/constants/graph.ts", "content": "export const NODE_DIMENSIONS = {\n ROW_HEIGHT: 30, // Regular row height\n PARENT_HEIGHT: 36, // Height for parent nodes\n} as const;\n\nexport const SUPPORTED_LIMIT = +(process.env.NEXT_PUBLIC_NODE_LIMIT as string);\n" }, { "path": "apps/www/src/constants/seo.ts", "content": "import type { DefaultSeoProps } from \"next-seo/pages\";\n\nexport const SEO: DefaultSeoProps = {\n title: \"JSON Crack | Online JSON Viewer - Transform your data into interactive graphs\",\n description:\n \"JSON Crack Editor is a tool for visualizing into graphs, analyzing, editing, formatting, querying, transforming and validating JSON, CSV, YAML, XML, and more.\",\n themeColor: \"#36393E\",\n openGraph: {\n type: \"website\",\n images: [\n {\n url: \"https://jsoncrack.com/assets/jsoncrack.png\",\n width: 1200,\n height: 627,\n },\n ],\n },\n twitter: {\n handle: \"@jsoncrack\",\n cardType: \"summary_large_image\",\n },\n additionalLinkTags: [\n {\n rel: \"manifest\",\n href: \"/manifest.json\",\n },\n {\n rel: \"icon\",\n href: \"/favicon.ico\",\n sizes: \"48x48\",\n },\n ],\n};\n" }, { "path": "apps/www/src/constants/theme.ts", "content": "const fixedColors = {\n CRIMSON: \"#DC143C\",\n BLURPLE: \"#5865F2\",\n PURPLE: \"#9036AF\",\n FULL_WHITE: \"#FFFFFF\",\n BLACK: \"#202225\",\n BLACK_DARK: \"#2C2F33\",\n BLACK_LIGHT: \"#2F3136\",\n BLACK_PRIMARY: \"#36393f\",\n DARK_SALMON: \"#E9967A\",\n DANGER: \"hsl(359,calc(var(--saturation-factor, 1)*66.7%),54.1%)\",\n LIGHTGREEN: \"#90EE90\",\n SEAGREEN: \"#11883B\",\n ORANGE: \"#FAA81A\",\n SILVER: \"#B9BBBE\",\n PRIMARY: \"#4D4D4D\",\n TEXT_DANGER: \"#db662e\",\n};\n\nconst nodeColors = {\n dark: {\n NODE_COLORS: {\n TEXT: \"#DCE5E7\",\n NODE_KEY: \"#59b8ff\",\n NODE_VALUE: \"#DCE5E7\",\n INTEGER: \"#e8c479\",\n NULL: \"#939598\",\n BOOL: {\n FALSE: \"#F85C50\",\n TRUE: \"#00DC7D\",\n },\n PARENT_ARR: \"#FC9A40\",\n PARENT_OBJ: \"#59b8ff\",\n CHILD_COUNT: \"white\",\n DIVIDER: \"#383838\",\n },\n },\n light: {\n NODE_COLORS: {\n TEXT: \"#000\",\n NODE_KEY: \"#761CEA\",\n NODE_VALUE: \"#535353\",\n INTEGER: \"#FD0079\",\n NULL: \"#afafaf\",\n BOOL: {\n FALSE: \"#FF0000\",\n TRUE: \"#748700\",\n },\n PARENT_ARR: \"#FF6B00\",\n PARENT_OBJ: \"#761CEA\",\n CHILD_COUNT: \"#535353\",\n DIVIDER: \"#e6e6e6\",\n },\n },\n};\n\nexport const darkTheme = {\n ...fixedColors,\n ...nodeColors.dark,\n BLACK_SECONDARY: \"#23272A\",\n SILVER_DARK: \"#4D4D4D\",\n NODE_KEY: \"#FAA81A\",\n OBJECT_KEY: \"#59b8ff\",\n SIDEBAR_ICONS: \"#8B8E90\",\n\n INTERACTIVE_NORMAL: \"#b9bbbe\",\n INTERACTIVE_HOVER: \"#dcddde\",\n INTERACTIVE_ACTIVE: \"#fff\",\n BACKGROUND_NODE: \"#2B2C3E\",\n BACKGROUND_TERTIARY: \"#202225\",\n BACKGROUND_SECONDARY: \"#2f3136\",\n TOOLBAR_BG: \"#262626\",\n BACKGROUND_PRIMARY: \"#36393f\",\n BACKGROUND_MODIFIER_ACCENT: \"rgba(79,84,92,0.48)\",\n MODAL_BACKGROUND: \"#36393E\",\n TEXT_NORMAL: \"#dcddde\",\n TEXT_POSITIVE: \"hsl(139,calc(var(--saturation-factor, 1)*51.6%),52.2%)\",\n GRID_BG_COLOR: \"#141414\",\n GRID_COLOR_PRIMARY: \"#1c1b1b\",\n GRID_COLOR_SECONDARY: \"#191919\",\n};\n\nexport const lightTheme = {\n ...fixedColors,\n ...nodeColors.light,\n BLACK_SECONDARY: \"#F2F2F2\",\n SILVER_DARK: \"#CCCCCC\",\n NODE_KEY: \"#DC3790\",\n OBJECT_KEY: \"#0260E8\",\n SIDEBAR_ICONS: \"#6D6E70\",\n\n INTERACTIVE_NORMAL: \"#4f5660\",\n INTERACTIVE_HOVER: \"#2e3338\",\n INTERACTIVE_ACTIVE: \"#060607\",\n BACKGROUND_NODE: \"#F6F8FA\",\n BACKGROUND_TERTIARY: \"#e3e5e8\",\n BACKGROUND_SECONDARY: \"#f2f3f5\",\n TOOLBAR_BG: \"#ECECEC\",\n BACKGROUND_PRIMARY: \"#FFFFFF\",\n BACKGROUND_MODIFIER_ACCENT: \"rgba(106,116,128,0.24)\",\n MODAL_BACKGROUND: \"#FFFFFF\",\n TEXT_NORMAL: \"#2e3338\",\n TEXT_POSITIVE: \"#008736\",\n GRID_BG_COLOR: \"#f7f7f7\",\n GRID_COLOR_PRIMARY: \"#ebe8e8\",\n GRID_COLOR_SECONDARY: \"#f2eeee\",\n};\n\nconst themeDs = {\n ...lightTheme,\n ...darkTheme,\n};\n\nexport default themeDs;\n" }, { "path": "apps/www/src/data/example.json", "content": "{\n \"fruits\": [\n {\n \"name\": \"Apple\",\n \"color\": \"#FF0000\",\n \"details\": {\n \"type\": \"Pome\",\n \"season\": \"Fall\"\n },\n \"nutrients\": {\n \"calories\": 52,\n \"fiber\": \"2.4g\",\n \"vitaminC\": \"4.6mg\"\n }\n },\n {\n \"name\": \"Banana\",\n \"color\": \"#FFFF00\",\n \"details\": {\n \"type\": \"Berry\",\n \"season\": \"Year-round\"\n },\n \"nutrients\": {\n \"calories\": 89,\n \"fiber\": \"2.6g\",\n \"potassium\": \"358mg\"\n }\n },\n {\n \"name\": \"Orange\",\n \"color\": \"#FFA500\",\n \"details\": {\n \"type\": \"Citrus\",\n \"season\": \"Winter\"\n },\n \"nutrients\": {\n \"calories\": 47,\n \"fiber\": \"2.4g\",\n \"vitaminC\": \"53.2mg\"\n }\n }\n ]\n}\n" }, { "path": "apps/www/src/data/faq.json", "content": "[\n {\n \"title\": \"What is JSON Crack and what does it do?\",\n \"content\": \"JSON Crack is an online JSON viewer tool designed to visualize and analyze various data formats, including JSON, YAML, CSV, XML and more. It transforms complex data into intuitive graphs and tree views, making it ideal for developers, data analysts, and anyone working with structured data.\"\n },\n {\n \"title\": \"How is it different than traditional JSON viewers?\",\n \"content\": \"While traditional JSON Viewers and JSON formatters only allow you to work with raw data on text editors, JSON Crack offers a unique visual representation of your data, making it easier to understand and analyze complex data structures. It provides a tree view and graph view to help you visualize your data in different ways.\"\n },\n {\n \"title\": \"Is JSON Crack free?\",\n \"content\": \"Yes, JSON Crack is a free-forever open source online tool. For advanced features you may use ToDiagram.com\"\n },\n {\n \"title\": \"Is my data secure?\",\n \"content\": \"Yes. When you paste or import your data into the editor, it's processed only on your browser to create the visualization without going into our servers.\"\n },\n {\n \"title\": \"Can I convert JSON to other formats using JSON Crack?\",\n \"content\": \"Yes, JSON Crack offers robust data conversion capabilities. You can easily convert JSON to YAML, XML to JSON, CSV to JSON and other popular formats.\"\n },\n {\n \"title\": \"What kind of data formats are supported?\",\n \"content\": \"A wide range of data formats are supported including JSON, YAML, XML, and CSV.\"\n },\n {\n \"title\": \"What size of data can I visualize?\",\n \"content\": \"It supports approximately 300 KB. It might vary depending on the complexity of the data and your hardware.\"\n },\n {\n \"title\": \"Can I export the generated graphs?\",\n \"content\": \"Yes, you can export the generated graphs as PNG, JPEG, or SVG files.\"\n },\n {\n \"title\": \"How to use VS Code extension?\",\n \"content\": \"You can use the VS Code extension to visualize JSON data directly in your editor. Install the extension from the VS Code marketplace and follow the instructions at extension's page.\"\n },\n {\n \"title\": \"I've previously subscribed to the premium plan, where did it go?\",\n \"content\": \"We have moved the premium features to ToDiagram.com. You can use the same credentials to access the premium features or manage your subscription.\"\n }\n]\n" }, { "path": "apps/www/src/data/privacy.json", "content": "{\n \"Introduction\": [\n \"Welcome to JSON Crack.\",\n \"JSON Crack (“us”, “we”, or “our”) operates https://jsoncrack.com (hereinafter referred to as “Service”).\",\n \"Our Privacy Policy governs your visit to https://jsoncrack.com, explaining how we collect, safeguard, and disclose information resulting from your use of our Service.\",\n \"By using the Service, you agree to the collection and use of information in accordance with this policy. Unless otherwise defined in this Privacy Policy, the terms used have the same meanings as in our Terms and Conditions.\",\n \"Our Terms and Conditions (“Terms”) govern all use of our Service and together with the Privacy Policy constitute your agreement with us (“agreement”).\"\n ],\n \"Definitions\": [\n \"SERVICE means the https://jsoncrack.com website.\",\n \"PERSONAL DATA means data about a living individual who can be identified from those data.\",\n \"USAGE DATA is data collected automatically, generated by the use of Service or from Service infrastructure itself (e.g., the duration of a page visit).\",\n \"COOKIES are small files stored on your device (computer or mobile device).\"\n ],\n \"Information Collection and Use\": [\n \"We collect limited information for the purpose of improving our Service. We do not collect or store any Personal Data beyond what is necessary for analytics and security.\"\n ],\n \"Data Collection\": [\n \"Usage Data\",\n \"• We may collect information that your browser sends whenever you visit our Service (“Usage Data”).\",\n \"• This may include your computer's IP address, browser type, browser version, pages visited, time and date of your visit, time spent on pages, and other diagnostic data.\",\n \"Cookies\",\n \"• We use cookies and similar tracking technologies to monitor activity on our Service.\",\n \"• Cookies are files with a small amount of data that may include an anonymous unique identifier.\"\n ],\n \"Use of Data\": [\n \"JSON Crack uses collected data to:\",\n \"• Provide and maintain the Service;\",\n \"• Improve and analyze Service performance.\"\n ],\n \"Security of Data\": [\n \"The data you paste into the editor for transformation into visualizations is not stored or processed on our servers, ensuring that your information remains private.\",\n \"Usage Data may be shared with third-party analytics services as outlined below.\"\n ],\n \"Analytics\": [\n \"We may use Google Analytics to monitor Service usage.\",\n \"• Google Analytics collects non-personally identifying information such as browser type, referring pages, and time spent on the site.\",\n \"• We do not collect IP addresses through Google Analytics.\",\n \"• Learn more about Google's privacy practices: https://support.google.com/analytics/answer/4597324?hl=en\"\n ],\n \"Changes to This Privacy Policy\": [\n \"We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page.\",\n \"You are advised to review this Privacy Policy periodically for any changes. Changes are effective when posted on this page.\"\n ],\n \"Contact Us\": [\n \"If you have any questions about this Privacy Policy, please contact us at contact@todiagram.com.\"\n ]\n}\n" }, { "path": "apps/www/src/data/terms.json", "content": "{\n \"Introduction\": [\n \"Subject to these Terms of Service (“Terms”, “Terms of Service”), jsoncrack.com ('JSON Crack', 'we', 'us' and/or 'our') provides access to JSON Crack's application as a service (collectively, the 'Services'). By using or accessing the Services, you acknowledge that you have read, understand, and agree to be bound by this Agreement.\",\n \"These Terms of Service govern your use of our web pages located at https://jsoncrack.com.\",\n \"Our Privacy Policy also governs your use of our Service and explains how we collect, safeguard and disclose information that results from your use of our web pages. Please read it here https://jsoncrack.com/legal/privacy.\",\n \"Your agreement with us includes these Terms and our Privacy Policy (“Agreements”). You acknowledge that you have read and understood Agreements, and agree to be bound of them.\",\n \"If you do not agree with (or cannot comply with) Agreements, then you may not use the Service, but please let us know by emailing at contact@todiagram.com so we can try to find a solution. These Terms apply to all visitors, users and others who wish to access or use Service.\",\n \"Thank you for being responsible.\"\n ],\n \"Prohibited Uses\": [\n \"You may use Service only for lawful purposes and in accordance with Terms. You agree not to use Service:\",\n \"• In any way that violates any applicable national or international law or regulation.\",\n \"• For the purpose of exploiting, harming, or attempting to exploit or harm minors in any way by exposing them to inappropriate content or otherwise.\",\n \"• To transmit, or procure the sending of, any advertising or promotional material, including any “junk mail”, “chain letter,” “spam,” or any other similar solicitation.\",\n \"• In any way that infringes upon the rights of others, or in any way is illegal, threatening, fraudulent, or harmful, or in connection with any unlawful, illegal, fraudulent, or harmful purpose or activity.\",\n \"• To engage in any other conduct that restricts or inhibits anyone's use or enjoyment of Service, or which, as determined by us, may harm or offend Company or users of Service or expose them to liability.\",\n \"Additionally, you agree not to:\",\n \"• Use Service in any manner that could disable, overburden, damage, or impair Service or interfere with any other party's use of Service, including their ability to engage in real time activities through Service.\",\n \"• Use any robot, spider, or other automatic device, process, or means to access Service for any purpose, including monitoring or copying any of the material on Service.\",\n \"• Use any manual process to monitor or copy any of the material on Service or for any other unauthorized purpose without our prior written consent.\",\n \"• Use any device, software, or routine that interferes with the proper working of Service.\",\n \"• Introduce any viruses, trojan horses, worms, logic bombs, or other material which is malicious or technologically harmful.\",\n \"• Attempt to gain unauthorized access to, interfere with, damage, or disrupt any parts of Service, the server on which Service is stored, or any server, computer, or database connected to Service.\",\n \"• Attack Service via a denial-of-service attack or a distributed denial-of-service attack.\",\n \"• Take any action that may damage or falsify Company rating.\",\n \"• Otherwise attempt to interfere with the proper working of Service.\"\n ],\n \"Analytics\": [\n \"We may use third-party Service Providers to monitor and analyze the use of our Service.\",\n \"Google Analytics is a web analytics service offered by Google that tracks and reports website traffic. Google uses the data collected to track and monitor the use of our Service. This data is shared with other Google services. Google may use the collected data to contextualise and personalise the ads of its own advertising network.\",\n \"For more information on the privacy practices of Google, please visit the Google Privacy Terms web page: https://policies.google.com/privacy?hl=en\",\n \"We also encourage you to review the Google's policy for safeguarding your data: https://support.google.com/analytics/answer/6004245\"\n ],\n \"Data Security\": [\n \"As we do not store any user data on our servers, we are not responsible for any data security risks that may occur when users store or process data locally on their devices.\"\n ],\n \"Intellectual Property\": [\n \"Service and its original content (excluding Content provided by users), features and functionality are and will remain the exclusive property of JSON Crack and its licensors. Service is protected by copyright and other laws of foreign countries. Our trademarks and trade dress may not be used in connection with any product or service without the prior written consent of JSON Crack.\"\n ],\n \"Disclaimer of Warranty\": [\n \"THESE SERVICES ARE PROVIDED BY COMPANY ON AN “AS IS” AND “AS AVAILABLE” BASIS. COMPANY MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY KIND, EXPRESS OR IMPLIED, AS TO THE OPERATION OF THEIR SERVICES, OR THE INFORMATION, CONTENT OR MATERIALS INCLUDED THEREIN. YOU EXPRESSLY AGREE THAT YOUR USE OF THESE SERVICES, THEIR CONTENT, AND ANY SERVICES OR ITEMS OBTAINED FROM US IS AT YOUR SOLE RISK.\",\n \"NEITHER COMPANY NOR ANY PERSON ASSOCIATED WITH COMPANY MAKES ANY WARRANTY OR REPRESENTATION WITH RESPECT TO THE COMPLETENESS, SECURITY, RELIABILITY, QUALITY, ACCURACY, OR AVAILABILITY OF THE SERVICES. WITHOUT LIMITING THE FOREGOING, NEITHER COMPANY NOR ANYONE ASSOCIATED WITH COMPANY REPRESENTS OR WARRANTS THAT THE SERVICES, THEIR CONTENT, OR ANY SERVICES OR ITEMS OBTAINED THROUGH THE SERVICES WILL BE ACCURATE, RELIABLE, ERROR-FREE, OR UNINTERRUPTED, THAT DEFECTS WILL BE CORRECTED, THAT THE SERVICES OR THE SERVER THAT MAKES IT AVAILABLE ARE FREE OF VIRUSES OR OTHER HARMFUL COMPONENTS OR THAT THE SERVICES OR ANY SERVICES OR ITEMS OBTAINED THROUGH THE SERVICES WILL OTHERWISE MEET YOUR NEEDS OR EXPECTATIONS.\",\n \"COMPANY HEREBY DISCLAIMS ALL WARRANTIES OF ANY KIND, WHETHER EXPRESS OR IMPLIED, STATUTORY, OR OTHERWISE, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, NON-INFRINGEMENT, AND FITNESS FOR PARTICULAR PURPOSE.\",\n \"THE FOREGOING DOES NOT AFFECT ANY WARRANTIES WHICH CANNOT BE EXCLUDED OR LIMITED UNDER APPLICABLE LAW.\"\n ],\n \"Limitation of Liability\": [\n \"EXCEPT AS PROHIBITED BY LAW, YOU WILL HOLD US AND OUR OFFICERS, DIRECTORS, EMPLOYEES, AND AGENTS HARMLESS FOR ANY INDIRECT, PUNITIVE, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGE, HOWEVER IT ARISES (INCLUDING ATTORNEYS' FEES AND ALL RELATED COSTS AND EXPENSES OF LITIGATION AND ARBITRATION, OR AT TRIAL OR ON APPEAL, IF ANY, WHETHER OR NOT LITIGATION OR ARBITRATION IS INSTITUTED), WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE, OR OTHER TORTIOUS ACTION, OR ARISING OUT OF OR IN CONNECTION WITH THIS AGREEMENT, INCLUDING WITHOUT LIMITATION ANY CLAIM FOR PERSONAL INJURY OR PROPERTY DAMAGE, ARISING FROM THIS AGREEMENT AND ANY VIOLATION BY YOU OF ANY FEDERAL, STATE, OR LOCAL LAWS, STATUTES, RULES, OR REGULATIONS, EVEN IF COMPANY HAS BEEN PREVIOUSLY ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. EXCEPT AS PROHIBITED BY LAW, IF THERE IS LIABILITY FOUND ON THE PART OF COMPANY, IT WILL BE LIMITED TO THE AMOUNT PAID FOR THE PRODUCTS AND/OR SERVICES, AND UNDER NO CIRCUMSTANCES WILL THERE BE CONSEQUENTIAL OR PUNITIVE DAMAGES. SOME STATES DO NOT ALLOW THE EXCLUSION OR LIMITATION OF PUNITIVE, INCIDENTAL OR CONSEQUENTIAL DAMAGES, SO THE PRIOR LIMITATION OR EXCLUSION MAY NOT APPLY TO YOU.\"\n ],\n \"Termination\": [\n \"We may terminate or suspend your account and bar access to Service immediately, without prior notice or liability, under our sole discretion, for any reason whatsoever and without limitation, including but not limited to a breach of Terms.\",\n \"If you wish to terminate your account, you may simply discontinue using Service.\",\n \"All provisions of Terms which by their nature should survive termination shall survive termination, including, without limitation, ownership provisions, warranty disclaimers, indemnity and limitations of liability.\"\n ],\n \"Changes To Service\": [\n \"We reserve the right to withdraw or amend our Service, and any service or material we provide via Service, in our sole discretion without notice. We will not be liable if for any reason all or any part of Service is unavailable at any time or for any period. From time to time, we may restrict access to some parts of Service, or the entire Service, to users, including registered users.\"\n ],\n \"Amendments To Terms\": [\n \"We may amend Terms at any time by posting the amended terms on this site. It is your responsibility to review these Terms periodically.\",\n \"Your continued use of the Platform following the posting of revised Terms means that you accept and agree to the changes. You are expected to check this page frequently so you are aware of any changes, as they are binding on you.\",\n \"By continuing to access or use our Service after any revisions become effective, you agree to be bound by the revised terms. If you do not agree to the new terms, you are no longer authorized to use Service.\"\n ],\n \"Acknowledgement\": [\n \"BY USING SERVICE OR OTHER SERVICES PROVIDED BY US, YOU ACKNOWLEDGE THAT YOU HAVE READ THESE TERMS OF SERVICE AND AGREE TO BE BOUND BY THEM.\"\n ],\n \"Contact Us\": [\n \"If you have any questions about these terms of service, please contact us:\",\n \"By email: contact@todiagram.com.\"\n ]\n}\n" }, { "path": "apps/www/src/enums/file.enum.ts", "content": "export enum FileFormat {\n \"JSON\" = \"json\",\n \"YAML\" = \"yaml\",\n \"XML\" = \"xml\",\n \"CSV\" = \"csv\",\n}\n\nexport const formats = [\n { value: FileFormat.JSON, label: \"JSON\" },\n { value: FileFormat.YAML, label: \"YAML\" },\n { value: FileFormat.XML, label: \"XML\" },\n { value: FileFormat.CSV, label: \"CSV\" },\n];\n\nexport enum TypeLanguage {\n TypeScript = \"typescript\",\n TypeScript_Combined = \"typescript/typealias\",\n Go = \"go\",\n JSON_SCHEMA = \"json_schema\",\n Kotlin = \"kotlin\",\n Rust = \"rust\",\n}\n\nexport const typeOptions = [\n {\n label: \"TypeScript\",\n value: TypeLanguage.TypeScript,\n lang: \"typescript\",\n },\n {\n label: \"TypeScript (merged)\",\n value: TypeLanguage.TypeScript_Combined,\n lang: \"typescript\",\n },\n {\n label: \"Go\",\n value: TypeLanguage.Go,\n lang: \"go\",\n },\n {\n label: \"JSON Schema\",\n value: TypeLanguage.JSON_SCHEMA,\n lang: \"json\",\n },\n {\n label: \"Kotlin\",\n value: TypeLanguage.Kotlin,\n lang: \"kotlin\",\n },\n {\n label: \"Rust\",\n value: TypeLanguage.Rust,\n lang: \"rust\",\n },\n];\n" }, { "path": "apps/www/src/enums/viewMode.enum.ts", "content": "export enum ViewMode {\n Graph = \"graph\",\n Tree = \"tree\",\n}\n" }, { "path": "apps/www/src/features/Banner.tsx", "content": "import React, { useEffect, useState } from \"react\";\nimport { Anchor, Flex, Button, ActionIcon } from \"@mantine/core\";\nimport { useSessionStorage } from \"@mantine/hooks\";\nimport { MdClose } from \"react-icons/md\";\n\nexport const BANNER_HEIGHT =\n process.env.NEXT_PUBLIC_DISABLE_EXTERNAL_MODE === \"true\" ? \"0px\" : \"40px\";\n\nconst BANNER_LIST = [\n \"Save and store your diagrams with ToDiagram\",\n \"Explore the ToDiagram from the creators of JSON Crack\",\n \"Generate AI diagrams with single prompt\",\n \"Try ToDiagram for free, no sign-up required\",\n \"Edit data directly inside diagrams\",\n \"Explore larger datasets (up to 50 MB) easily\",\n];\n\nexport const Banner = () => {\n const ROTATION_INTERVAL = 6000; // ms between label changes\n const FADE_DURATION = 500; // ms for fade transition\n\n const [index, setIndex] = useState(0);\n const [visible, setVisible] = useState(true);\n const [dismissed, setDismissed] = useSessionStorage({\n key: \"jsoncrack_banner_dismissed\",\n defaultValue: false,\n });\n\n useEffect(() => {\n if (dismissed) return;\n\n let fadeTimeout: ReturnType | undefined;\n const intervalId = setInterval(() => {\n setVisible(false);\n fadeTimeout = setTimeout(() => {\n setIndex(i => (i + 1) % BANNER_LIST.length);\n setVisible(true);\n }, FADE_DURATION);\n }, ROTATION_INTERVAL);\n\n return () => {\n clearInterval(intervalId);\n if (fadeTimeout) clearTimeout(fadeTimeout);\n };\n }, [dismissed]);\n\n const handleDismiss = (e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setDismissed(true);\n };\n\n if (dismissed) return null;\n\n return (\n \n \n \n {BANNER_LIST[index]}{\" \"}\n \n \n \n \n \n \n \n );\n};\n" }, { "path": "apps/www/src/features/editor/BottomBar.tsx", "content": "import React from \"react\";\nimport { Flex, Menu, Popover, Text } from \"@mantine/core\";\nimport styled from \"styled-components\";\nimport { event as gaEvent } from \"nextjs-google-analytics\";\nimport { BiSolidDockLeft } from \"react-icons/bi\";\nimport { IoMdCheckmark } from \"react-icons/io\";\nimport { MdArrowUpward } from \"react-icons/md\";\nimport { VscCheck, VscError, VscRunAll, VscSync, VscSyncIgnored } from \"react-icons/vsc\";\nimport { formats } from \"../../enums/file.enum\";\nimport useConfig from \"../../store/useConfig\";\nimport useFile from \"../../store/useFile\";\nimport useGraph from \"./views/GraphView/stores/useGraph\";\n\nconst StyledBottomBar = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-top: 1px solid ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};\n background: ${({ theme }) => theme.TOOLBAR_BG};\n max-height: 27px;\n height: 27px;\n z-index: 35;\n padding-right: 6px;\n\n @media screen and (max-width: 320px) {\n display: none;\n }\n`;\n\nconst StyledLeft = styled.div`\n display: flex;\n align-items: center;\n justify-content: left;\n gap: 4px;\n padding-left: 8px;\n\n @media screen and (max-width: 480px) {\n display: none;\n }\n`;\n\nconst StyledRight = styled.div`\n display: flex;\n align-items: center;\n justify-content: right;\n gap: 4px;\n`;\n\nconst StyledBottomBarItem = styled.button<{ $bg?: string }>`\n display: flex;\n align-items: center;\n gap: 4px;\n width: fit-content;\n margin: 0;\n height: 28px;\n padding: 4px;\n font-size: 12px;\n font-weight: 400;\n color: ${({ theme }) => theme.INTERACTIVE_NORMAL};\n background: ${({ $bg }) => $bg};\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n\n &:hover:not(&:disabled) {\n background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);\n color: ${({ theme }) => theme.INTERACTIVE_HOVER};\n }\n\n &:disabled {\n opacity: 0.6;\n cursor: default;\n }\n`;\n\nexport const BottomBar = () => {\n const data = useFile(state => state.fileData);\n const toggleLiveTransform = useConfig(state => state.toggleLiveTransform);\n const liveTransformEnabled = useConfig(state => state.liveTransformEnabled);\n const error = useFile(state => state.error);\n const setContents = useFile(state => state.setContents);\n const toggleFullscreen = useGraph(state => state.toggleFullscreen);\n const fullscreen = useGraph(state => state.fullscreen);\n const setFormat = useFile(state => state.setFormat);\n const currentFormat = useFile(state => state.format);\n\n const toggleEditor = () => {\n toggleFullscreen(!fullscreen);\n gaEvent(\"toggle_fullscreen\");\n };\n\n React.useEffect(() => {\n if (data?.name) window.document.title = `${data.name} | JSON Crack`;\n }, [data]);\n\n return (\n \n \n \n \n \n \n {error ? (\n \n \n \n \n \n Invalid\n \n \n \n \n {error}\n \n \n ) : (\n \n \n Valid\n \n )}\n \n {\n toggleLiveTransform(!liveTransformEnabled);\n gaEvent(\"toggle_live_transform\");\n }}\n >\n {liveTransformEnabled ? : }\n Live Transform\n \n {!liveTransformEnabled && (\n setContents({})} disabled={!!error}>\n \n Click to Transform\n \n )}\n \n\n \n \n \n \n \n \n {currentFormat?.toUpperCase()}\n \n \n \n \n {formats.map(format => (\n setFormat(format.value)}\n rightSection={currentFormat === format.value && }\n >\n {format.label}\n \n ))}\n \n \n \n \n );\n};\n" }, { "path": "apps/www/src/features/editor/ExternalMode.tsx", "content": "import React from \"react\";\nimport { Accordion, Anchor, Code, Flex, FocusTrap, Group, Modal, Text } from \"@mantine/core\";\n\nconst ExternalMode = () => {\n const [isExternal, setExternal] = React.useState(false);\n\n React.useEffect(() => {\n if (process.env.NEXT_PUBLIC_DISABLE_EXTERNAL_MODE === \"false\") {\n if (typeof window !== \"undefined\") {\n if (window.location.pathname.includes(\"widget\")) return setExternal(false);\n if (window.location.host !== \"jsoncrack.com\") return setExternal(true);\n return setExternal(false);\n }\n }\n }, []);\n\n if (!isExternal) return null;\n\n return (\n setExternal(false)}\n centered\n size=\"lg\"\n >\n \n \n \n \n How can I change the file size limit?\n \n The main reason for the file size limit is to prevent performance issues, not to push\n you to upgrade. You can increase the limit by setting{\" \"}\n NEXT_PUBLIC_NODE_LIMIT in your .env file.\n
\n
\n If you'd like to work with even larger files and unlock additional features, you\n can upgrade to the{\" \"}\n \n Pro\n {\" \"}\n version.\n \n \n \n How can I stop this dialog from appearing?\n \n You can disable this dialog by setting NEXT_PUBLIC_DISABLE_EXTERNAL_MODE{\" \"}\n to true in your .env.development file.\n
\n
\n If you want to re-enable it, simply remove or set the value to false.\n \n \n \n What are the license terms?\n \n Read the full license terms on{\" \"}\n \n GitHub\n \n .\n \n \n \n How do I report a bug or request a feature?\n \n You can report bugs or request features by opening an issue on our{\" \"}\n \n GitHub Issues page\n \n .\n
\n
\n Please provide as much detail as possible to help us address your feedback quickly.\n \n \n \n How do I contribute to the project?\n \n We welcome contributions! Visit our{\" \"}\n \n GitHub repository\n {\" \"}\n and read the{\" \"}\n \n contributing guide\n {\" \"}\n to get started.\n \n \n \n \n What is the difference between JSON Crack and ToDiagram?\n \n \n JSON Crack is a free and open-source tool for visualizing JSON data. ToDiagram is the\n professional version that offers advanced features, higher limits, and the ability to\n edit data directly from diagrams. You can learn more or upgrade at{\" \"}\n \n todiagram.com\n \n .\n \n \n \n \n \n \n GitHub\n \n •\n \n ToDiagram\n \n •\n \n Aykut Saraç (@aykutsarach)\n \n \n \n );\n};\n\nexport default ExternalMode;\n" }, { "path": "apps/www/src/features/editor/FullscreenDropzone.tsx", "content": "import React from \"react\";\nimport { Group, Text } from \"@mantine/core\";\nimport { Dropzone } from \"@mantine/dropzone\";\nimport toast from \"react-hot-toast\";\nimport { VscCircleSlash, VscFiles } from \"react-icons/vsc\";\nimport { FileFormat } from \"../../enums/file.enum\";\nimport useFile from \"../../store/useFile\";\n\nexport const FullscreenDropzone = () => {\n const setContents = useFile(state => state.setContents);\n\n return (\n toast.error(`Unable to load file ${files[0].file.name}`)}\n onDrop={async e => {\n try {\n const fileContent = await e[0].text();\n let fileExtension = e[0].name.split(\".\").pop() as FileFormat | undefined;\n if (!fileExtension) fileExtension = FileFormat.JSON;\n setContents({ contents: fileContent, format: fileExtension, hasChanges: false });\n } catch (err) {\n toast.error(\"An error occurred while reading the file.\");\n console.error(err);\n }\n }}\n >\n \n \n \n \n Upload to JSON Crack\n \n \n (Max file size: 300 KB)\n \n \n \n \n \n Invalid file\n \n \n Allowed formats are JSON, YAML, CSV, XML\n \n \n \n \n );\n};\n" }, { "path": "apps/www/src/features/editor/LiveEditor.tsx", "content": "import React from \"react\";\nimport { useSessionStorage } from \"@mantine/hooks\";\nimport styled from \"styled-components\";\nimport { ViewMode } from \"../../enums/viewMode.enum\";\nimport { GraphView } from \"./views/GraphView\";\nimport { TreeView } from \"./views/TreeView\";\n\nconst StyledLiveEditor = styled.div`\n position: relative;\n height: 100%;\n background: ${({ theme }) => theme.GRID_BG_COLOR};\n overflow: auto;\n\n & > ul {\n margin-top: 0 !important;\n padding: 12px !important;\n font-family: monospace;\n font-size: 14px;\n font-weight: 500;\n }\n\n .tab-group {\n position: absolute;\n top: 10px;\n left: 10px;\n z-index: 2;\n }\n`;\n\nconst View = () => {\n const [viewMode] = useSessionStorage({\n key: \"viewMode\",\n defaultValue: ViewMode.Graph,\n });\n\n if (viewMode === ViewMode.Graph) return ;\n if (viewMode === ViewMode.Tree) return ;\n return null;\n};\n\nconst LiveEditor = () => {\n return (\n e.preventDefault()}>\n \n \n );\n};\n\nexport default LiveEditor;\n" }, { "path": "apps/www/src/features/editor/TextEditor.tsx", "content": "import React, { useCallback } from \"react\";\nimport { LoadingOverlay } from \"@mantine/core\";\nimport styled from \"styled-components\";\nimport Editor, { type EditorProps, loader, type OnMount, useMonaco } from \"@monaco-editor/react\";\nimport useConfig from \"../../store/useConfig\";\nimport useFile from \"../../store/useFile\";\n\nloader.config({\n paths: {\n vs: \"https://unpkg.com/monaco-editor@0.55.1/min/vs\",\n },\n});\n\nconst editorOptions: EditorProps[\"options\"] = {\n tabSize: 2,\n formatOnType: true,\n minimap: { enabled: false },\n stickyScroll: { enabled: false },\n scrollBeyondLastLine: false,\n placeholder: \"Start typing...\",\n};\n\nconst TextEditor = () => {\n const monaco = useMonaco();\n const contents = useFile(state => state.contents);\n const setContents = useFile(state => state.setContents);\n const setError = useFile(state => state.setError);\n const jsonSchema = useFile(state => state.jsonSchema);\n const getHasChanges = useFile(state => state.getHasChanges);\n const theme = useConfig(state => (state.darkmodeEnabled ? \"vs-dark\" : \"light\"));\n const fileType = useFile(state => state.format);\n const jsonDefaults = (monaco?.languages as any)?.json?.jsonDefaults as\n | { setDiagnosticsOptions: (options: unknown) => void }\n | undefined;\n\n React.useEffect(() => {\n if (!jsonDefaults) return;\n\n jsonDefaults.setDiagnosticsOptions({\n validate: true,\n allowComments: true,\n enableSchemaRequest: true,\n ...(jsonSchema && {\n schemas: [\n {\n uri: \"http://myserver/foo-schema.json\",\n fileMatch: [\"*\"],\n schema: jsonSchema,\n },\n ],\n }),\n });\n }, [jsonDefaults, jsonSchema]);\n\n React.useEffect(() => {\n const beforeunload = (e: BeforeUnloadEvent) => {\n if (getHasChanges()) {\n const confirmationMessage =\n \"Unsaved changes, if you leave before saving your changes will be lost\";\n\n (e || window.event).returnValue = confirmationMessage; //Gecko + IE\n return confirmationMessage;\n }\n };\n\n window.addEventListener(\"beforeunload\", beforeunload);\n\n return () => {\n window.removeEventListener(\"beforeunload\", beforeunload);\n };\n }, [getHasChanges]);\n\n const handleMount: OnMount = useCallback(editor => {\n editor.onDidPaste(() => {\n editor.getAction(\"editor.action.formatDocument\")?.run();\n });\n }, []);\n\n return (\n \n \n setError(errors[0]?.message || \"\")}\n onChange={contents => setContents({ contents, skipUpdate: true })}\n loading={}\n />\n \n \n );\n};\n\nexport default TextEditor;\n\nconst StyledEditorWrapper = styled.div`\n display: flex;\n flex-direction: column;\n height: 100%;\n user-select: none;\n`;\n\nconst StyledWrapper = styled.div`\n display: grid;\n height: 100%;\n grid-template-columns: 100%;\n grid-template-rows: minmax(0, 1fr);\n`;\n" }, { "path": "apps/www/src/features/editor/Toolbar/FileMenu.tsx", "content": "import React from \"react\";\nimport { Flex, Menu } from \"@mantine/core\";\nimport { event as gaEvent } from \"nextjs-google-analytics\";\nimport { CgChevronDown } from \"react-icons/cg\";\nimport useFile from \"../../../store/useFile\";\nimport { useModal } from \"../../../store/useModal\";\nimport { StyledToolElement } from \"./styles\";\n\nexport const FileMenu = () => {\n const setVisible = useModal(state => state.setVisible);\n const getContents = useFile(state => state.getContents);\n const getFormat = useFile(state => state.getFormat);\n\n const handleSave = () => {\n const a = document.createElement(\"a\");\n const file = new Blob([getContents()], { type: \"text/plain\" });\n\n a.href = window.URL.createObjectURL(file);\n a.download = `jsoncrack.${getFormat()}`;\n a.click();\n\n gaEvent(\"save_file\", { label: getFormat() });\n };\n\n return (\n \n \n \n \n File\n \n \n \n \n \n setVisible(\"ImportModal\", true)}>Import\n Export\n \n \n );\n};\n" }, { "path": "apps/www/src/features/editor/Toolbar/SearchInput.tsx", "content": "import React from \"react\";\nimport { Flex, Text, TextInput } from \"@mantine/core\";\nimport { getHotkeyHandler } from \"@mantine/hooks\";\nimport { useOs } from \"@mantine/hooks\";\nimport { AiOutlineSearch } from \"react-icons/ai\";\nimport { useFocusNode } from \"../../../hooks/useFocusNode\";\n\nexport const SearchInput = () => {\n const [searchValue, setValue, skip, nodeCount, currentNode] = useFocusNode();\n const os = useOs();\n\n const coreKey = os === \"macos\" ? \"⌘\" : \"Ctrl\";\n\n return (\n setValue(e.currentTarget.value)}\n placeholder={`Search Node (${coreKey} + F)`}\n autoComplete=\"off\"\n autoCorrect=\"off\"\n onKeyDown={getHotkeyHandler([[\"Enter\", skip]])}\n leftSection={}\n rightSection={\n searchValue && (\n \n \n {searchValue && `${nodeCount}/${nodeCount > 0 ? currentNode + 1 : \"0\"}`}\n \n \n )\n }\n style={{ borderBottom: \"1px solid gray\" }}\n />\n );\n};\n" }, { "path": "apps/www/src/features/editor/Toolbar/ThemeToggle.tsx", "content": "import { FaMoon, FaSun } from \"react-icons/fa6\";\nimport useConfig from \"../../../store/useConfig\";\nimport { StyledToolElement } from \"./styles\";\n\nexport const ThemeToggle = () => {\n const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);\n const toggleDarkMode = useConfig(state => state.toggleDarkMode);\n\n return (\n toggleDarkMode(!darkmodeEnabled)}>\n {!darkmodeEnabled ? : }\n \n );\n};\n" }, { "path": "apps/www/src/features/editor/Toolbar/ToolsMenu.tsx", "content": "import React from \"react\";\nimport { Menu, Flex } from \"@mantine/core\";\nimport { event as gaEvent } from \"nextjs-google-analytics\";\nimport { CgChevronDown } from \"react-icons/cg\";\nimport { MdFilterListAlt } from \"react-icons/md\";\nimport { VscSearchFuzzy, VscJson, VscGroupByRefType } from \"react-icons/vsc\";\nimport { useModal } from \"../../../store/useModal\";\nimport { StyledToolElement } from \"./styles\";\n\nexport const ToolsMenu = () => {\n const setVisible = useModal(state => state.setVisible);\n\n return (\n \n \n gaEvent(\"show_tools_menu\")}>\n \n Tools \n \n \n \n \n }\n onClick={() => {\n setVisible(\"JQModal\", true);\n gaEvent(\"open_jq_modal\");\n }}\n >\n JSON Query (jq)\n \n }\n onClick={() => {\n setVisible(\"JPathModal\", true);\n gaEvent(\"open_json_path_modal\");\n }}\n >\n JSON Path\n \n }\n onClick={() => {\n setVisible(\"SchemaModal\", true);\n gaEvent(\"open_schema_modal\");\n }}\n >\n JSON Schema\n \n \n }\n onClick={() => {\n setVisible(\"TypeModal\", true);\n gaEvent(\"open_type_modal\");\n }}\n >\n Generate Type\n \n \n \n );\n};\n" }, { "path": "apps/www/src/features/editor/Toolbar/ViewMenu.tsx", "content": "import { Menu, Flex, SegmentedControl } from \"@mantine/core\";\nimport { useSessionStorage } from \"@mantine/hooks\";\nimport { event as gaEvent } from \"nextjs-google-analytics\";\nimport { CgChevronDown } from \"react-icons/cg\";\nimport { ViewMode } from \"../../../enums/viewMode.enum\";\nimport { StyledToolElement } from \"./styles\";\n\nexport const ViewMenu = () => {\n const [viewMode, setViewMode] = useSessionStorage({\n key: \"viewMode\",\n defaultValue: ViewMode.Graph,\n });\n\n return (\n \n \n gaEvent(\"show_view_menu\")}>\n \n View \n \n \n \n \n {\n setViewMode(e as ViewMode);\n gaEvent(\"change_view_mode\", { label: e });\n }}\n data={[\n { value: ViewMode.Graph, label: \"Graph\" },\n { value: ViewMode.Tree, label: \"Tree\" },\n ]}\n fullWidth\n orientation=\"vertical\"\n />\n \n \n );\n};\n" }, { "path": "apps/www/src/features/editor/Toolbar/index.tsx", "content": "import React from \"react\";\nimport Link from \"next/link\";\nimport { Flex, Group } from \"@mantine/core\";\nimport styled from \"styled-components\";\nimport toast from \"react-hot-toast\";\nimport { AiOutlineFullscreen } from \"react-icons/ai\";\nimport { FaGithub } from \"react-icons/fa6\";\nimport { JSONCrackLogo } from \"../../../layout/JSONCrackBrandLogo\";\nimport { FileMenu } from \"./FileMenu\";\nimport { ThemeToggle } from \"./ThemeToggle\";\nimport { ToolsMenu } from \"./ToolsMenu\";\nimport { ViewMenu } from \"./ViewMenu\";\nimport { StyledToolElement } from \"./styles\";\n\nconst StyledTools = styled.div`\n position: relative;\n display: flex;\n width: 100%;\n align-items: center;\n gap: 4px;\n justify-content: space-between;\n height: 45px;\n padding: 6px 12px;\n background: ${({ theme }) => theme.TOOLBAR_BG};\n color: ${({ theme }) => theme.SILVER};\n z-index: 36;\n border-bottom: 1px solid ${({ theme }) => theme.SILVER_DARK};\n\n @media only screen and (max-width: 320px) {\n display: none;\n }\n`;\n\nfunction fullscreenBrowser() {\n if (!document.fullscreenElement) {\n document.documentElement.requestFullscreen().catch(() => {\n toast.error(\"Unable to enter fullscreen mode.\");\n });\n } else if (document.exitFullscreen) {\n document.exitFullscreen();\n }\n}\n\nexport const Toolbar = () => {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n" }, { "path": "apps/www/src/features/editor/Toolbar/styles.ts", "content": "import styled from \"styled-components\";\n\nexport const StyledToolElement = styled.button<{ $hide?: boolean; $highlight?: boolean }>`\n display: ${({ $hide }) => ($hide ? \"none\" : \"flex\")};\n align-items: center;\n gap: 4px;\n place-content: center;\n font-size: 14px;\n background: ${({ $highlight }) =>\n $highlight ? \"linear-gradient(rgba(0, 0, 0, 0.1) 0 0)\" : \"none\"};\n color: ${({ theme }) => theme.INTERACTIVE_NORMAL};\n padding: 6px;\n border-radius: 3px;\n white-space: nowrap;\n\n &:hover {\n background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);\n }\n\n &:hover {\n color: ${({ theme }) => theme.INTERACTIVE_HOVER};\n opacity: 1;\n box-shadow: none;\n }\n`;\n" }, { "path": "apps/www/src/features/editor/views/GraphView/CustomEdge/index.tsx", "content": "import React from \"react\";\nimport { useComputedColorScheme } from \"@mantine/core\";\nimport type { EdgeProps } from \"reaflow\";\nimport { Edge } from \"reaflow\";\nimport useGraph from \"../stores/useGraph\";\n\nconst CustomEdgeWrapper = (props: EdgeProps) => {\n const colorScheme = useComputedColorScheme();\n const viewPort = useGraph(state => state.viewPort);\n const [hovered, setHovered] = React.useState(false);\n\n const handeClick = () => {\n const targetNodeId = (props.properties as { to?: string } | undefined)?.to;\n const targetNodeDom = document.querySelector(\n `[data-id$=\"node-${targetNodeId}\"]`\n ) as HTMLElement;\n if (targetNodeDom && targetNodeDom.parentElement) {\n viewPort?.camera.centerFitElementIntoView(targetNodeDom.parentElement, {\n elementExtraMarginForZoom: 150,\n });\n }\n };\n\n return (\n setHovered(true)}\n onLeave={() => setHovered(false)}\n style={{\n stroke: colorScheme === \"dark\" ? \"#444444\" : \"#BCBEC0\",\n ...(hovered && { stroke: \"#3B82F6\" }),\n strokeWidth: 1.5,\n }}\n {...props}\n />\n );\n};\n\nexport const CustomEdge = React.memo(CustomEdgeWrapper);\n" }, { "path": "apps/www/src/features/editor/views/GraphView/CustomNode/ObjectNode.tsx", "content": "import React from \"react\";\nimport type { NodeData } from \"jsoncrack-react\";\nimport type { CustomNodeProps } from \".\";\nimport { NODE_DIMENSIONS } from \"../../../../../constants/graph\";\nimport { TextRenderer } from \"./TextRenderer\";\nimport * as Styled from \"./styles\";\n\ntype RowProps = {\n row: NodeData[\"text\"][number];\n x: number;\n y: number;\n index: number;\n};\n\nconst Row = ({ row, x, y, index }: RowProps) => {\n const rowPosition = index * NODE_DIMENSIONS.ROW_HEIGHT;\n\n const getRowText = () => {\n if (row.type === \"object\") return `{${row.childrenCount ?? 0} keys}`;\n if (row.type === \"array\") return `[${row.childrenCount ?? 0} items]`;\n return row.value;\n };\n\n return (\n \n {row.key}: \n {getRowText()}\n \n );\n};\n\nconst Node = ({ node, x, y }: CustomNodeProps) => (\n \n {node.text.map((row, index) => (\n \n ))}\n \n);\n\nfunction propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {\n return (\n JSON.stringify(prev.node.text) === JSON.stringify(next.node.text) &&\n prev.node.width === next.node.width\n );\n}\n\nexport const ObjectNode = React.memo(Node, propsAreEqual);\n" }, { "path": "apps/www/src/features/editor/views/GraphView/CustomNode/TextNode.tsx", "content": "import React from \"react\";\nimport styled from \"styled-components\";\nimport type { CustomNodeProps } from \".\";\nimport { TextRenderer } from \"./TextRenderer\";\nimport * as Styled from \"./styles\";\n\nconst StyledTextNodeWrapper = styled.span<{ $isParent: boolean }>`\n display: flex;\n justify-content: ${({ $isParent }) => ($isParent ? \"center\" : \"flex-start\")};\n align-items: center;\n height: 100%;\n width: 100%;\n overflow: hidden;\n padding: 0 10px;\n`;\n\nconst Node = ({ node, x, y }: CustomNodeProps) => {\n const { text, width, height } = node;\n const value = text[0].value;\n\n return (\n \n \n \n {value}\n \n \n \n );\n};\n\nfunction propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {\n return prev.node.text === next.node.text && prev.node.width === next.node.width;\n}\n\nexport const TextNode = React.memo(Node, propsAreEqual);\n" }, { "path": "apps/www/src/features/editor/views/GraphView/CustomNode/TextRenderer.tsx", "content": "import React from \"react\";\nimport { ColorSwatch } from \"@mantine/core\";\nimport styled from \"styled-components\";\n\nconst StyledRow = styled.span`\n display: inline-flex;\n align-items: center;\n overflow: hidden;\n gap: 4px;\n vertical-align: middle;\n`;\n\nconst isURL = (word: string) => {\n const urlPattern =\n /^(http:\\/\\/www\\.|https:\\/\\/www\\.|http:\\/\\/|https:\\/\\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\\.[a-z]{2,5}(:[0-9]{1,5})?(\\/.*)?$/gm;\n\n return word?.match(urlPattern);\n};\n\nconst Linkify = (text: string) => {\n const addMarkup = (word: string) => {\n return isURL(word)\n ? `${word}`\n : word;\n };\n\n const words = text.split(\" \");\n const formatedWords = words.map(w => addMarkup(w));\n const html = formatedWords.join(\" \");\n return ;\n};\n\nexport const TextRenderer = ({ children }: React.PropsWithChildren) => {\n if (typeof children === \"string\" && isURL(children)) return Linkify(children);\n\n if (typeof children === \"string\" && isColorFormat(children)) {\n return (\n \n \n {children}\n \n );\n }\n\n return <>{`${children}`};\n};\n\nfunction isColorFormat(colorString: string) {\n const hexCodeRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;\n const rgbRegex = /^rgb\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*\\)$/;\n const rgbaRegex = /^rgba\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(0|1|0\\.\\d+)\\s*\\)$/;\n\n return (\n hexCodeRegex.test(colorString) || rgbRegex.test(colorString) || rgbaRegex.test(colorString)\n );\n}\n" }, { "path": "apps/www/src/features/editor/views/GraphView/CustomNode/index.tsx", "content": "import React from \"react\";\nimport { useComputedColorScheme } from \"@mantine/core\";\nimport type { NodeData } from \"jsoncrack-react\";\nimport type { NodeProps } from \"reaflow\";\nimport { Node } from \"reaflow\";\nimport { useModal } from \"../../../../../store/useModal\";\nimport useGraph from \"../stores/useGraph\";\nimport { ObjectNode } from \"./ObjectNode\";\nimport { TextNode } from \"./TextNode\";\n\nexport interface CustomNodeProps {\n node: NodeData;\n x: number;\n y: number;\n hasCollapse?: boolean;\n}\n\nconst CustomNodeWrapper = (nodeProps: NodeProps) => {\n const setSelectedNode = useGraph(state => state.setSelectedNode);\n const setVisible = useModal(state => state.setVisible);\n const colorScheme = useComputedColorScheme();\n\n const handleNodeClick = React.useCallback(\n (_: React.MouseEvent, data: NodeData) => {\n if (setSelectedNode) setSelectedNode(data);\n setVisible(\"NodeModal\", true);\n },\n [setSelectedNode, setVisible]\n );\n\n return (\n {\n ev.currentTarget.style.stroke = \"#3B82F6\";\n }}\n onLeave={ev => {\n ev.currentTarget.style.stroke = colorScheme === \"dark\" ? \"#424242\" : \"#BCBEC0\";\n }}\n style={{\n fill: colorScheme === \"dark\" ? \"#292929\" : \"#ffffff\",\n stroke: colorScheme === \"dark\" ? \"#424242\" : \"#BCBEC0\",\n strokeWidth: 1,\n }}\n >\n {({ node, x, y }) => {\n const hasKey = nodeProps.properties.text[0].key;\n if (!hasKey) return ;\n\n return ;\n }}\n \n );\n};\n\nexport const CustomNode = React.memo(CustomNodeWrapper);\n" }, { "path": "apps/www/src/features/editor/views/GraphView/CustomNode/styles.tsx", "content": "import type { DefaultTheme } from \"styled-components\";\nimport styled from \"styled-components\";\nimport { LinkItUrl } from \"react-linkify-it\";\nimport { NODE_DIMENSIONS } from \"../../../../../constants/graph\";\n\ntype TextColorFn = {\n theme: DefaultTheme;\n $type?: string;\n $value?: string | number | null | boolean;\n};\n\nfunction getTextColor({ $value, $type, theme }: TextColorFn) {\n if ($value === null) return theme.NODE_COLORS.NULL;\n if ($type === \"object\") return theme.NODE_COLORS.NODE_KEY;\n if ($type === \"number\") return theme.NODE_COLORS.INTEGER;\n if ($value === true) return theme.NODE_COLORS.BOOL.TRUE;\n if ($value === false) return theme.NODE_COLORS.BOOL.FALSE;\n return theme.NODE_COLORS.NODE_VALUE;\n}\n\nexport const StyledLinkItUrl = styled(LinkItUrl)`\n text-decoration: underline;\n pointer-events: all;\n`;\n\nexport const StyledForeignObject = styled.foreignObject<{ $isObject?: boolean }>`\n text-align: ${({ $isObject }) => !$isObject && \"center\"};\n color: ${({ theme }) => theme.NODE_COLORS.TEXT};\n font-family: monospace;\n font-size: 12px;\n font-weight: 500;\n overflow: hidden;\n pointer-events: none;\n\n &.searched {\n background: rgba(27, 255, 0, 0.1);\n border: 1px solid ${({ theme }) => theme.TEXT_POSITIVE};\n border-radius: 2px;\n box-sizing: border-box;\n }\n\n .highlight {\n background: rgba(255, 214, 0, 0.15);\n }\n\n .renderVisible {\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 12px;\n width: 100%;\n height: 100%;\n overflow: hidden;\n cursor: pointer;\n }\n`;\n\nexport const StyledKey = styled.span<{\n $type: TextColorFn[\"$type\"];\n $value?: TextColorFn[\"$value\"];\n}>`\n display: inline;\n align-items: center;\n justify-content: center;\n flex: 1;\n min-width: 0;\n height: auto;\n line-height: inherit;\n padding: 0; // Remove padding\n color: ${({ theme, $type, $value = \"\" }) => getTextColor({ $value, $type, theme })};\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const StyledRow = styled.span<{ $value: TextColorFn[\"$value\"] }>`\n padding: 3px 10px;\n height: ${NODE_DIMENSIONS.ROW_HEIGHT}px;\n line-height: 24px;\n color: ${({ theme, $value }) => getTextColor({ $value, theme, $type: typeof $value })};\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n border-bottom: 1px solid ${({ theme }) => theme.NODE_COLORS.DIVIDER};\n box-sizing: border-box;\n\n &:last-of-type {\n border-bottom: none;\n }\n\n .searched & {\n border-bottom: 1px solid ${({ theme }) => theme.TEXT_POSITIVE};\n }\n`;\n\nexport const StyledChildrenCount = styled.span`\n color: ${({ theme }) => theme.NODE_COLORS.CHILD_COUNT};\n padding: 10px;\n margin-left: -15px;\n`;\n" }, { "path": "apps/www/src/features/editor/views/GraphView/NotSupported.tsx", "content": "import React from \"react\";\nimport { Anchor, Button, Image, Overlay, Stack, Text } from \"@mantine/core\";\nimport styled, { keyframes } from \"styled-components\";\nimport useConfig from \"../../../../store/useConfig\";\n\nconst shineEffect = keyframes`\n 0% {\n transform: translateX(-120%) rotate(25deg);\n opacity: 0.5;\n }\n 5% {\n opacity: 0.5;\n transform: translateX(-80%) rotate(25deg);\n }\n 70% {\n transform: translateX(80%) rotate(25deg);\n opacity: 0.5;\n }\n 80% {\n transform: translateX(120%) rotate(25deg);\n opacity: 0;\n }\n 100% {\n transform: translateX(120%) rotate(25deg);\n opacity: 0;\n }\n`;\n\nconst ShiningButton = styled.div`\n position: relative;\n overflow: hidden;\n display: inline-block;\n border-radius: 0.5rem;\n z-index: 10;\n\n &::before {\n content: \"\";\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: linear-gradient(\n to right,\n rgba(255, 255, 255, 0) 0%,\n rgba(255, 255, 255, 0) 35%,\n rgba(255, 255, 255, 0.5) 50%,\n rgba(255, 255, 255, 0) 65%,\n rgba(255, 255, 255, 0) 100%\n );\n transform: translateX(-120%) rotate(25deg);\n z-index: 20;\n pointer-events: none;\n animation: ${shineEffect} 4s ease-out infinite;\n transition: transform 0.2s ease-out;\n }\n`;\n\nexport const NotSupported = () => {\n const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);\n\n return (\n \n \n \"Unsupported\"\n \n Time to upgrade!\n \n \n This diagram is too large and not supported at JSON Crack.\n
\n Try{\" \"}\n \n ToDiagram\n {\" \"}\n for larger diagrams and more features.\n \n \n \n Try now →\n \n \n \n \n );\n};\n" }, { "path": "apps/www/src/features/editor/views/GraphView/OptionsMenu.tsx", "content": "import React from \"react\";\nimport { ActionIcon, Flex, Menu, Text } from \"@mantine/core\";\nimport { useHotkeys } from \"@mantine/hooks\";\nimport styled from \"styled-components\";\nimport type { LayoutDirection } from \"jsoncrack-react\";\nimport { event as gaEvent } from \"nextjs-google-analytics\";\nimport { BsCheck2 } from \"react-icons/bs\";\nimport { LuImageDown, LuMenu } from \"react-icons/lu\";\nimport { TiFlowMerge } from \"react-icons/ti\";\nimport useConfig from \"../../../../store/useConfig\";\nimport { useModal } from \"../../../../store/useModal\";\nimport useGraph from \"./stores/useGraph\";\n\nconst StyledFlowIcon = styled(TiFlowMerge)<{ rotate: number }>`\n transform: rotate(${({ rotate }) => `${rotate}deg`});\n`;\n\nconst getNextDirection = (direction: LayoutDirection) => {\n if (direction === \"RIGHT\") return \"DOWN\";\n if (direction === \"DOWN\") return \"LEFT\";\n if (direction === \"LEFT\") return \"UP\";\n return \"RIGHT\";\n};\n\nconst rotateLayout = (direction: LayoutDirection) => {\n if (direction === \"LEFT\") return 90;\n if (direction === \"UP\") return 180;\n if (direction === \"RIGHT\") return 270;\n return 360;\n};\n\nexport const OptionsMenu = () => {\n const toggleGestures = useConfig(state => state.toggleGestures);\n const toggleRulers = useConfig(state => state.toggleRulers);\n const gesturesEnabled = useConfig(state => state.gesturesEnabled);\n const rulersEnabled = useConfig(state => state.rulersEnabled);\n const setDirection = useGraph(state => state.setDirection);\n const direction = useGraph(state => state.direction);\n const setVisible = useModal(state => state.setVisible);\n const [coreKey, setCoreKey] = React.useState(\"CTRL\");\n\n const toggleDirection = () => {\n const nextDirection = getNextDirection(direction || \"RIGHT\");\n if (setDirection) setDirection(nextDirection);\n };\n\n useHotkeys(\n [\n [\"mod+shift+d\", toggleDirection],\n [\n \"mod+f\",\n () => {\n const input = document.querySelector(\"#search-node\") as HTMLInputElement;\n input.focus();\n },\n ],\n ],\n []\n );\n\n React.useEffect(() => {\n if (typeof window !== \"undefined\") {\n setCoreKey(navigator.userAgent.indexOf(\"Mac OS X\") ? \"⌘\" : \"CTRL\");\n }\n }, []);\n\n return (\n \n \n \n \n \n \n \n \n }\n onClick={() => setVisible(\"DownloadModal\", true)}\n >\n \n Export\n \n {coreKey} + S\n \n \n \n {\n toggleDirection();\n gaEvent(\"rotate_layout\", { label: direction });\n }}\n leftSection={\n \n }\n rightSection={\n \n {coreKey} Shift D\n \n }\n closeMenuOnClick={false}\n >\n Rotate Layout\n \n \n \n \n View Options\n \n \n }\n onClick={() => {\n toggleRulers(!rulersEnabled);\n gaEvent(\"toggle_rulers\", { label: rulersEnabled ? \"on\" : \"off\" });\n }}\n closeMenuOnClick={false}\n >\n Rulers\n \n }\n onClick={() => {\n toggleGestures(!gesturesEnabled);\n gaEvent(\"toggle_gestures\", { label: gesturesEnabled ? \"on\" : \"off\" });\n }}\n >\n Zoom on Scroll\n \n \n \n \n \n \n );\n};\n" }, { "path": "apps/www/src/features/editor/views/GraphView/SecureInfo.tsx", "content": "import React from \"react\";\nimport { ThemeIcon, Tooltip } from \"@mantine/core\";\nimport { LuShieldCheck } from \"react-icons/lu\";\n\nexport const SecureInfo = () => {\n return (\n \n \n \n \n \n );\n};\n" }, { "path": "apps/www/src/features/editor/views/GraphView/ZoomControl.tsx", "content": "import React from \"react\";\nimport { ActionIcon, Flex, Tooltip, Text } from \"@mantine/core\";\nimport { useHotkeys } from \"@mantine/hooks\";\nimport { event as gaEvent } from \"nextjs-google-analytics\";\nimport { LuFocus, LuMaximize, LuMinus, LuPlus } from \"react-icons/lu\";\nimport { SearchInput } from \"../../Toolbar/SearchInput\";\nimport useGraph from \"./stores/useGraph\";\n\nexport const ZoomControl = () => {\n const zoomIn = useGraph(state => state.zoomIn);\n const zoomOut = useGraph(state => state.zoomOut);\n const centerView = useGraph(state => state.centerView);\n const focusFirstNode = useGraph(state => state.focusFirstNode);\n\n useHotkeys(\n [\n [\"mod+[plus]\", zoomIn, { usePhysicalKeys: true }],\n [\"mod+[minus]\", zoomOut, { usePhysicalKeys: true }],\n [\"shift+Digit1\", focusFirstNode, { usePhysicalKeys: true }],\n [\"shift+Digit2\", centerView, { usePhysicalKeys: true }],\n ],\n []\n );\n\n return (\n \n \n \n Center first item\n \n ⇧ 1\n \n \n }\n withArrow\n >\n {\n focusFirstNode();\n gaEvent(\"focus_first_node\");\n }}\n >\n \n \n \n \n Fit to center\n \n ⇧ 2\n \n \n }\n withArrow\n >\n {\n centerView();\n gaEvent(\"center_view\");\n }}\n >\n \n \n \n {\n zoomOut();\n gaEvent(\"zoom_out\");\n }}\n >\n \n \n {\n zoomIn();\n gaEvent(\"zoom_in\");\n }}\n >\n \n \n \n \n \n );\n};\n" }, { "path": "apps/www/src/features/editor/views/GraphView/index.tsx", "content": "import React from \"react\";\nimport { Box } from \"@mantine/core\";\nimport styled from \"styled-components\";\nimport { JSONCrack } from \"jsoncrack-react\";\nimport type { NodeData } from \"jsoncrack-react\";\nimport { useLongPress } from \"use-long-press\";\nimport { SUPPORTED_LIMIT } from \"../../../../constants/graph\";\nimport useConfig from \"../../../../store/useConfig\";\nimport useJson from \"../../../../store/useJson\";\nimport { useModal } from \"../../../../store/useModal\";\nimport { NotSupported } from \"./NotSupported\";\nimport { OptionsMenu } from \"./OptionsMenu\";\nimport { SecureInfo } from \"./SecureInfo\";\nimport { ZoomControl } from \"./ZoomControl\";\nimport useGraph from \"./stores/useGraph\";\n\nconst StyledEditorWrapper = styled.div<{ $widget: boolean }>`\n width: 100%;\n height: 100%;\n\n .jsoncrack-space,\n .jsoncrack-space:active {\n cursor: url(\"/assets/cursor.svg\"), auto;\n }\n`;\n\ninterface GraphProps {\n isWidget?: boolean;\n}\n\nexport const GraphView = ({ isWidget = false }: GraphProps) => {\n const setViewPort = useGraph(state => state.setViewPort);\n const direction = useGraph(state => state.direction);\n const setSelectedNode = useGraph(state => state.setSelectedNode);\n const gesturesEnabled = useConfig(state => state.gesturesEnabled);\n const rulersEnabled = useConfig(state => state.rulersEnabled);\n const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);\n const json = useJson(state => state.json);\n const setVisible = useModal(state => state.setVisible);\n\n const callback = React.useCallback(() => {\n const canvas = document.querySelector(\".jsoncrack-canvas\") as HTMLDivElement | null;\n canvas?.classList.add(\"dragging\");\n }, []);\n\n const bindLongPress = useLongPress(callback, {\n threshold: 150,\n onFinish: () => {\n const canvas = document.querySelector(\".jsoncrack-canvas\") as HTMLDivElement | null;\n canvas?.classList.remove(\"dragging\");\n },\n });\n\n const blurOnClick = React.useCallback(() => {\n if (\"activeElement\" in document) {\n (document.activeElement as HTMLElement | null)?.blur();\n }\n }, []);\n\n const handleNodeClick = React.useCallback(\n (node: NodeData) => {\n setSelectedNode(node);\n setVisible(\"NodeModal\", true);\n },\n [setSelectedNode, setVisible]\n );\n\n const maxVisibleNodes = Number.isFinite(SUPPORTED_LIMIT) ? SUPPORTED_LIMIT : 1500;\n\n return (\n \n {!isWidget && }\n {!isWidget && }\n \n event.preventDefault()}\n onClick={blurOnClick}\n {...bindLongPress()}\n >\n }\n />\n \n \n );\n};\n" }, { "path": "apps/www/src/features/editor/views/GraphView/lib/jsonParser.ts", "content": "/**\n * Copyright (c) JSON Crack\n * This source code is licensed under the Apache 2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { parseTree, getNodePath, type Node } from \"jsonc-parser\";\nimport type { EdgeData, NodeData, NodeRow } from \"jsoncrack-react\";\nimport { calculateNodeSize } from \"./utils/calculateNodeSize\";\n\nexport type Graph = {\n nodes: NodeData[];\n edges: EdgeData[];\n};\n\nexport const parser = (json: string): Graph => {\n const jsonTree = parseTree(json);\n if (!jsonTree) return { nodes: [], edges: [] };\n\n const nodes: NodeData[] = [];\n const edges: EdgeData[] = [];\n let nodeId = 1;\n let edgeId = 1;\n\n function traverse(node: Node, parentId?: string) {\n const id = String(nodeId++);\n const text: NodeRow[] = [];\n\n // If parentId is provided, create an edge from parentId to the current node id\n if (parentId !== undefined && node.parent?.type === \"array\") {\n edges.push({\n id: String(edgeId++),\n from: parentId,\n to: id,\n text: \"\",\n });\n }\n\n const isArray = node.type === \"array\";\n const isRootArray = !node.parent || node.parent.type === \"array\";\n if (isArray && isRootArray) {\n const { width, height } = calculateNodeSize(`[${node.children?.length ?? \"0\"} items]`);\n nodes.push({\n id,\n text: [\n {\n key: null,\n value: `[${node.children?.length ?? 0} items]`,\n type: \"array\",\n childrenCount: node.children?.length,\n },\n ],\n width,\n height,\n path: [],\n });\n\n node.children?.forEach(child => {\n traverse(child, id);\n });\n\n return id;\n }\n\n node.children?.forEach(child => {\n if (!child.children || !child.children[1]) return traverse(child, id);\n\n const key = child.children[0].value ?? null;\n const valueNode = child.children[1];\n const type = valueNode.type;\n\n if (type === \"array\") {\n const targetIds: string[] = [];\n\n valueNode.children?.forEach(arrayChild => {\n const arrayChildId = traverse(arrayChild, undefined);\n if (arrayChildId) targetIds.push(arrayChildId);\n });\n\n text.push({\n key,\n value: valueNode.value,\n type,\n to: targetIds.length > 0 ? targetIds : undefined,\n childrenCount: valueNode.children?.length,\n });\n\n targetIds.forEach(targetId => {\n edges.push({\n id: String(edgeId++),\n from: id,\n to: targetId,\n text: key ?? null,\n });\n });\n } else if (type === \"object\") {\n const objectNodeId = traverse(valueNode, id);\n text.push({\n key,\n value: valueNode.value,\n type,\n childrenCount: Object.keys(valueNode.children ?? {}).length,\n ...(objectNodeId && { to: [objectNodeId] }),\n });\n\n if (objectNodeId) {\n edges.push({\n id: String(edgeId++),\n from: id,\n to: objectNodeId,\n text: key ?? null,\n });\n }\n } else {\n text.push({\n key,\n value: valueNode.value,\n type,\n });\n }\n });\n\n // to handle case where empty object inside array [{}]\n if (node.parent?.type === \"array\" && node.type === \"object\" && node.children?.length === 0) {\n text.push({\n key: null,\n value: \"{0 keys}\",\n type: \"object\",\n childrenCount: 0,\n });\n }\n\n const appendParentKey = () => {\n const getParentKey = (targetNode: any) => {\n const path = getNodePath(targetNode);\n return path?.pop()?.toString();\n };\n\n if (!node.parent) {\n return { parentKey: getParentKey(node), parentType: node.type };\n }\n\n if (node.parent.type === \"array\") {\n return { parentKey: getParentKey(node.parent), parentType: \"array\" };\n }\n\n if (node.parent.type === \"property\") {\n return { parentKey: getParentKey(node), parentType: \"object\" };\n }\n\n return {\n parentKey: getParentKey(node),\n parentType: node.parent.type.replace(\"property\", \"object\"),\n };\n };\n\n // its for singular text like string, number, boolean, null\n if (text.length === 0) {\n if (typeof node.value === \"undefined\") return;\n const { width, height } = calculateNodeSize(node.value);\n\n nodes.push({\n id,\n text: [\n {\n key: null,\n value: node.value,\n type: node.type,\n },\n ],\n width,\n height,\n path: getNodePath(node),\n ...appendParentKey(),\n });\n } else {\n let t: string | [string, string][];\n\n if (text.some(t => t.key !== null)) {\n t = text.map(t => {\n const keyStr = t.key === null ? \"\" : t.key;\n if (t.type === \"object\") return [keyStr, `{${t.childrenCount ?? 0} keys}`];\n if (t.type === \"array\") return [keyStr, `[${t.childrenCount ?? 0} items]`];\n if (t.value === null) return [keyStr, \"null\"];\n\n return [keyStr, `${t.value}`];\n });\n } else {\n t = `${text[0].value}`;\n }\n\n const { width, height } = calculateNodeSize(t);\n nodes.push({\n id,\n text,\n width,\n height,\n path: getNodePath(node),\n ...appendParentKey(),\n });\n }\n\n return id; // Return the current id for referencing in the parent node\n }\n\n traverse(jsonTree);\n return { nodes, edges };\n};\n" }, { "path": "apps/www/src/features/editor/views/GraphView/lib/utils/calculateNodeSize.ts", "content": "import { NODE_DIMENSIONS } from \"../../../../../../constants/graph\";\n\ntype Text = number | string | [string, string][];\ntype Size = { width: number; height: number };\n\nconst calculateLines = (text: Text): string => {\n if (Array.isArray(text)) {\n return text.map(([k, v]) => `${k}: ${JSON.stringify(v).slice(0, 80)}`).join(\"\\n\");\n }\n\n return `${text}`;\n};\n\nconst calculateWidthAndHeight = (str: string, single = false) => {\n if (!str) return { width: 45, height: 45 };\n\n const dummyElement = document.createElement(\"div\");\n dummyElement.style.whiteSpace = single ? \"nowrap\" : \"pre-wrap\";\n dummyElement.innerText = str;\n dummyElement.style.fontSize = \"12px\";\n dummyElement.style.width = \"fit-content\";\n dummyElement.style.padding = \"0 10px\";\n dummyElement.style.fontWeight = \"500\";\n dummyElement.style.fontFamily = \"monospace\";\n document.body.appendChild(dummyElement);\n\n const clientRect = dummyElement.getBoundingClientRect();\n const lines = str.split(\"\\n\").length;\n\n const width = clientRect.width + 4;\n // Use parent height for single line nodes that are parents\n const height = single ? NODE_DIMENSIONS.PARENT_HEIGHT : lines * NODE_DIMENSIONS.ROW_HEIGHT;\n\n document.body.removeChild(dummyElement);\n return { width, height };\n};\n\nconst sizeCache = new Map();\n\n// clear cache every 2 mins\nsetInterval(() => sizeCache.clear(), 120_000);\n\nexport const calculateNodeSize = (text: Text, isParent = false) => {\n const cacheKey = [text, isParent].toString();\n\n // check cache if data already exists\n if (sizeCache.has(cacheKey)) {\n const size = sizeCache.get(cacheKey);\n if (size) return size;\n }\n\n const lines = calculateLines(text);\n const sizes = calculateWidthAndHeight(lines, typeof text === \"string\");\n\n if (isParent) sizes.width += 80;\n if (sizes.width > 700) sizes.width = 700;\n\n sizeCache.set(cacheKey, sizes);\n return sizes;\n};\n" }, { "path": "apps/www/src/features/editor/views/GraphView/lib/utils/getChildrenEdges.ts", "content": "import type { EdgeData, NodeData } from \"jsoncrack-react\";\n\nexport const getChildrenEdges = (nodes: NodeData[], edges: EdgeData[]): EdgeData[] => {\n const nodeIds = nodes.map(node => node.id);\n\n return edges.filter(\n edge => nodeIds.includes(edge.from as string) || nodeIds.includes(edge.to as string)\n );\n};\n" }, { "path": "apps/www/src/features/editor/views/GraphView/lib/utils/getOutgoers.ts", "content": "import type { EdgeData, NodeData } from \"jsoncrack-react\";\n\ntype Outgoers = [NodeData[], string[]];\n\nexport const getOutgoers = (\n nodeId: string,\n nodes: NodeData[],\n edges: EdgeData[],\n parent: string[] = []\n): Outgoers => {\n const outgoerNodes: NodeData[] = [];\n const matchingNodes: string[] = [];\n\n if (parent.includes(nodeId)) {\n const initialParentNode = nodes.find(n => n.id === nodeId);\n\n if (initialParentNode) outgoerNodes.push(initialParentNode);\n }\n\n const findOutgoers = (currentNodeId: string) => {\n const outgoerIds = edges.filter(e => e.from === currentNodeId).map(e => e.to);\n const nodeList = nodes.filter(n => {\n if (parent.includes(n.id) && !matchingNodes.includes(n.id)) matchingNodes.push(n.id);\n return outgoerIds.includes(n.id) && !parent.includes(n.id);\n });\n\n outgoerNodes.push(...nodeList);\n nodeList.forEach(node => findOutgoers(node.id));\n };\n\n findOutgoers(nodeId);\n return [outgoerNodes, matchingNodes];\n};\n" }, { "path": "apps/www/src/features/editor/views/GraphView/stores/useGraph.ts", "content": "import type { LayoutDirection, NodeData } from \"jsoncrack-react\";\nimport type { ViewPort } from \"react-zoomable-ui\";\nimport { create } from \"zustand\";\n\nexport interface Graph {\n viewPort: ViewPort | null;\n direction: LayoutDirection;\n fullscreen: boolean;\n selectedNode: NodeData | null;\n}\n\nconst initialStates: Graph = {\n viewPort: null,\n direction: \"RIGHT\",\n fullscreen: false,\n selectedNode: null,\n};\n\ninterface GraphActions {\n setDirection: (direction: LayoutDirection) => void;\n setViewPort: (ref: ViewPort) => void;\n setSelectedNode: (nodeData: NodeData | null) => void;\n focusFirstNode: () => void;\n toggleFullscreen: (value: boolean) => void;\n zoomIn: () => void;\n zoomOut: () => void;\n centerView: () => void;\n}\n\nconst useGraph = create((set, get) => ({\n ...initialStates,\n setSelectedNode: nodeData => set({ selectedNode: nodeData }),\n setDirection: (direction = \"RIGHT\") => {\n set({ direction });\n setTimeout(() => get().centerView(), 200);\n },\n focusFirstNode: () => {\n const rootNode = document.querySelector(\"g[id$='node-1']\");\n get().viewPort?.camera?.centerFitElementIntoView(rootNode as HTMLElement, {\n elementExtraMarginForZoom: 100,\n });\n },\n zoomIn: () => {\n const viewPort = get().viewPort;\n viewPort?.camera?.recenter(viewPort.centerX, viewPort.centerY, viewPort.zoomFactor + 0.1);\n },\n zoomOut: () => {\n const viewPort = get().viewPort;\n viewPort?.camera?.recenter(viewPort.centerX, viewPort.centerY, viewPort.zoomFactor - 0.1);\n },\n centerView: () => {\n const viewPort = get().viewPort;\n viewPort?.updateContainerSize();\n\n const canvas = document.querySelector(\".jsoncrack-canvas\") as HTMLElement | null;\n if (canvas) {\n viewPort?.camera?.centerFitElementIntoView(canvas);\n }\n },\n toggleFullscreen: fullscreen => set({ fullscreen }),\n setViewPort: viewPort => set({ viewPort }),\n}));\n\nexport default useGraph;\n" }, { "path": "apps/www/src/features/editor/views/TreeView/Label.tsx", "content": "import React from \"react\";\nimport type { DefaultTheme } from \"styled-components\";\nimport { styled } from \"styled-components\";\nimport type { KeyPath } from \"react-json-tree\";\n\ninterface LabelProps {\n keyPath: KeyPath;\n nodeType: string;\n}\n\nfunction getLabelColor({ $type, theme }: { $type?: string; theme: DefaultTheme }) {\n if ($type === \"Object\") return theme.NODE_COLORS.PARENT_OBJ;\n if ($type === \"Array\") return theme.NODE_COLORS.PARENT_ARR;\n return theme.NODE_COLORS.PARENT_OBJ;\n}\n\nconst StyledLabel = styled.span<{ $nodeType?: string }>`\n color: ${({ theme, $nodeType }) => getLabelColor({ theme, $type: $nodeType })};\n\n &:hover {\n filter: brightness(1.5);\n transition: filter 0.2s ease-in-out;\n }\n`;\n\nexport const Label = ({ keyPath, nodeType }: LabelProps) => {\n return {keyPath[0]}:;\n};\n" }, { "path": "apps/www/src/features/editor/views/TreeView/Value.tsx", "content": "import React from \"react\";\nimport type { DefaultTheme } from \"styled-components\";\nimport { useTheme } from \"styled-components\";\nimport { TextRenderer } from \"../GraphView/CustomNode/TextRenderer\";\n\ntype TextColorFn = {\n theme: DefaultTheme;\n $value?: string | unknown;\n};\n\nfunction getValueColor({ $value, theme }: TextColorFn) {\n if ($value && !Number.isNaN(+$value)) return theme.NODE_COLORS.INTEGER;\n if ($value === \"true\") return theme.NODE_COLORS.BOOL.TRUE;\n if ($value === \"false\") return theme.NODE_COLORS.BOOL.FALSE;\n if ($value === \"null\") return theme.NODE_COLORS.NULL;\n\n // default\n return theme.NODE_COLORS.NODE_VALUE;\n}\n\ninterface ValueProps {\n valueAsString: unknown;\n value: unknown;\n}\n\nexport const Value = (props: ValueProps) => {\n const theme = useTheme();\n const { valueAsString, value } = props;\n\n return (\n \n {JSON.stringify(value)}\n \n );\n};\n" }, { "path": "apps/www/src/features/editor/views/TreeView/index.tsx", "content": "import React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { JSONTree } from \"react-json-tree\";\nimport useJson from \"../../../../store/useJson\";\nimport { Label } from \"./Label\";\nimport { Value } from \"./Value\";\n\nexport const TreeView = () => {\n const theme = useTheme();\n const json = useJson(state => state.json);\n\n return (\n }\n labelRenderer={(keyPath, nodeType) =>