{"id":29293566,"url":"https://github.com/devbm7/json-viewer","last_synced_at":"2025-08-22T07:05:20.071Z","repository":{"id":302144410,"uuid":"1011414988","full_name":"devbm7/json-viewer","owner":"devbm7","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-08T11:58:42.000Z","size":311,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-08T12:40:42.316Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://json-viewer-ashy.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devbm7.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-30T19:27:53.000Z","updated_at":"2025-07-08T11:58:45.000Z","dependencies_parsed_at":"2025-06-30T20:36:59.650Z","dependency_job_id":"54773e13-7775-43ea-bf73-732e503dc53d","html_url":"https://github.com/devbm7/json-viewer","commit_stats":null,"previous_names":["devbm7/json-viewer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/devbm7/json-viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devbm7%2Fjson-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devbm7%2Fjson-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devbm7%2Fjson-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devbm7%2Fjson-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devbm7","download_url":"https://codeload.github.com/devbm7/json-viewer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devbm7%2Fjson-viewer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271600415,"owners_count":24787812,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-22T02:00:08.480Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-06T11:06:13.639Z","updated_at":"2025-08-22T07:05:20.056Z","avatar_url":"https://github.com/devbm7.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JSON Viewer\n\nA beautiful, modern JSON viewer with markdown support, dark mode, and advanced features built with Next.js 14, React, and TypeScript.\n\n## ✨ Features\n\n### Core Features\n- **JSON File Upload**: Drag \u0026 drop or click to upload JSON files\n- **Interactive JSON Viewer**: Expandable/collapsible tree view with syntax highlighting\n- **JSON Editor**: In-place editing with real-time validation\n- **Markdown Support**: Renders markdown content within JSON strings\n- **Download JSON**: Export edited JSON files\n\n### Advanced Features\n- **🌙 Dark Mode**: Toggle between light and dark themes\n- **📊 JSON Statistics**: View detailed statistics about your JSON structure\n- **🔍 Search \u0026 Filter**: Search through JSON content (coming soon)\n- **⌨️ Keyboard Shortcuts**: Quick access to common actions\n- **📋 Copy to Clipboard**: Copy individual JSON nodes\n- **🎨 Syntax Highlighting**: Beautiful color-coded JSON display\n- **📱 Responsive Design**: Works perfectly on desktop and mobile\n\n## 🚀 Getting Started\n\n### Prerequisites\n- Node.js 18+ \n- npm or yarn\n\n### Installation\n\n1. Clone the repository:\n```bash\ngit clone https://github.com/devbm7/json-viewer.git\ncd json-viewer\n```\n\n2. Install dependencies:\n```bash\nnpm install\n```\n\n3. Run the development server:\n```bash\nnpm run dev\n```\n\n4. Open [http://localhost:3000](http://localhost:3000) in your browser.\n\n## 🛠️ Available Scripts\n\n- `npm run dev` - Start development server\n- `npm run build` - Build for production\n- `npm run start` - Start production server\n- `npm run lint` - Run ESLint\n\n## 🎯 Usage\n\n### Uploading JSON Files\n1. Drag and drop a `.json` file onto the upload area, or click to browse\n2. The file will be automatically parsed and displayed in the viewer\n\n### Viewing JSON\n- Click the chevron icons to expand/collapse objects and arrays\n- Use the copy button to copy individual nodes\n- Markdown content in strings will be rendered automatically\n\n### Editing JSON\n1. Click the \"Edit\" button to switch to edit mode\n2. Make your changes in the text editor\n3. Use the \"Format\" button to automatically format your JSON\n4. Click \"Save\" to apply changes (only available when JSON is valid)\n\n### Dark Mode\n- Click the moon/sun icon in the top-right corner to toggle dark mode\n- Your preference is automatically saved\n\n### Keyboard Shortcuts\n- `Ctrl + E` - Edit JSON\n- `Ctrl + V` - View JSON\n- `Ctrl + S` - Download JSON\n- `Ctrl + K` - Clear JSON\n- `Ctrl + /` - Toggle shortcuts panel\n\n## 🎨 Customization\n\n### Styling\nThe app uses Tailwind CSS for styling. You can customize the appearance by modifying:\n- `app/globals.css` - Global styles and JSON syntax highlighting\n- `tailwind.config.js` - Tailwind configuration\n\n### Components\nAll components are located in `app/components/`:\n- `FileUpload.tsx` - File upload interface\n- `JSONViewer.tsx` - JSON tree viewer\n- `JSONEditor.tsx` - JSON text editor\n- `DarkModeToggle.tsx` - Dark mode toggle\n- `JSONSearch.tsx` - Search functionality\n- `JSONStats.tsx` - JSON statistics\n- `KeyboardShortcuts.tsx` - Keyboard shortcuts panel\n\n## 🔧 Technical Details\n\n### Tech Stack\n- **Framework**: Next.js 14 with App Router\n- **Language**: TypeScript\n- **Styling**: Tailwind CSS\n- **Icons**: Lucide React\n- **Markdown**: React Markdown with remark-gfm\n- **Syntax Highlighting**: Custom CSS classes\n\n### Architecture\n- **Client-side rendering** for interactive features\n- **Component-based architecture** for maintainability\n- **TypeScript** for type safety\n- **Responsive design** with Tailwind CSS\n- **Accessibility** considerations built-in\n\n## 🚀 Deployment\n\n### Vercel (Recommended)\n1. Push your code to GitHub\n2. Connect your repository to Vercel\n3. Deploy automatically\n\n### Other Platforms\nThe app can be deployed to any platform that supports Next.js:\n- Netlify\n- Railway\n- DigitalOcean App Platform\n- AWS Amplify\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📝 License\n\nThis project is licensed under the ISC License.\n\n## 🙏 Acknowledgments\n\n- [Next.js](https://nextjs.org/) for the amazing React framework\n- [Tailwind CSS](https://tailwindcss.com/) for the utility-first CSS framework\n- [Lucide React](https://lucide.dev/) for the beautiful icons\n- [React Markdown](https://github.com/remarkjs/react-markdown) for markdown rendering\n\n## 📞 Support\n\nIf you encounter any issues or have questions, please open an issue on GitHub. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevbm7%2Fjson-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevbm7%2Fjson-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevbm7%2Fjson-viewer/lists"}