{"id":31745412,"url":"https://github.com/jeevan-lal/vue3-json-viewer","last_synced_at":"2025-10-09T12:56:18.399Z","repository":{"id":309860910,"uuid":"1037750748","full_name":"jeevan-lal/vue3-json-viewer","owner":"jeevan-lal","description":"A modern, sleek Vue 3 JSON viewer component with tree and text modes","archived":false,"fork":false,"pushed_at":"2025-08-16T07:13:37.000Z","size":111,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-05T11:24:06.695Z","etag":null,"topics":["json-viewer","vue3-component"],"latest_commit_sha":null,"homepage":"https://vue3-json-viewer-seven.vercel.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jeevan-lal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-08-14T04:18:36.000Z","updated_at":"2025-09-26T06:52:07.000Z","dependencies_parsed_at":"2025-08-14T08:33:48.881Z","dependency_job_id":"bdd47ad0-be1c-461a-a4e5-90111375fc2c","html_url":"https://github.com/jeevan-lal/vue3-json-viewer","commit_stats":null,"previous_names":["jeevan-lal/vue3-json-viewer"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/jeevan-lal/vue3-json-viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeevan-lal%2Fvue3-json-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeevan-lal%2Fvue3-json-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeevan-lal%2Fvue3-json-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeevan-lal%2Fvue3-json-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeevan-lal","download_url":"https://codeload.github.com/jeevan-lal/vue3-json-viewer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeevan-lal%2Fvue3-json-viewer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279001416,"owners_count":26083078,"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-10-09T02:00:07.460Z","response_time":59,"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":["json-viewer","vue3-component"],"created_at":"2025-10-09T12:56:13.358Z","updated_at":"2025-10-09T12:56:18.394Z","avatar_url":"https://github.com/jeevan-lal.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue 3 JSON Viewer\n\nA modern, sleek Vue 3 component for viewing, editing, and manipulating JSON data with two view modes: Tree Mode and Text Mode.]\n\n[Demo Page](https://vue3-json-viewer-seven.vercel.app/)\n\n## ✨ Features\n\n- 🌳 **Tree Mode**: Hierarchical display with expandable/collapsible nodes\n- 📝 **Text Mode**: Raw JSON text display with syntax highlighting\n- ✏️ **Inline Editing**: Edit values directly in the tree view\n- 🔑 **Key Editing**: Rename object keys by double-clicking on them\n- ➕ **Add/Remove Nodes**: Add new key-value pairs or remove existing ones\n- 🔍 **Search \u0026 Filter**: Search across all JSON keys and values\n- 📋 **Copy to Clipboard**: Easy copying of JSON content with visual feedback\n- 💾 **Download JSON**: Save current JSON to file\n- 🎨 **Dark/Light Theme**: Support for both themes with dynamic icons\n- 📱 **Responsive Design**: Works on desktop and mobile devices\n- ⌨️ **Keyboard Navigation**: Full keyboard support\n- ♿ **Accessibility**: Screen reader support with proper ARIA labels\n- 🎯 **Icon-Only Mode**: Option to hide button text labels for compact interface\n- 🎛️ **Customizable UI**: Hide specific buttons, sections, or entire header/footer\n- 🚀 **Dual Build System**: Library build for npm + Demo build for preview\n\n## 🚀 Installation\n\nThis component is now available on npm as `@ctechhindi/vue3-json-viewer`\n\n[@ctechhindi/vue3-json-viewer](https://www.npmjs.com/package/@ctechhindi/vue3-json-viewer)\n\n```bash\nnpm install @ctechhindi/vue3-json-viewer\n```\n\nOr with yarn:\n\n```bash\nyarn add @ctechhindi/vue3-json-viewer\n```\n\n## 📖 Usage\n\n### CSS Import (Required)\n\n**Important:** You need to import the CSS file to see the styles. Choose one of these options:\n\n```typescript\n// Option 1: Direct CSS import (recommended)\nimport \"@ctechhindi/vue3-json-viewer/dist/index.css\";\n\n// Option 2: Using the styles export\nimport \"@ctechhindi/vue3-json-viewer/styles\";\n\n// Option 3: Using the css export\nimport \"@ctechhindi/vue3-json-viewer/css\";\n\n// Option 4: In your main.ts or main.js\nimport \"@ctechhindi/vue3-json-viewer/dist/index.css\";\n```\n\n### Basic Usage\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cJsonViewer\n      v-model:data=\"jsonData\"\n      :editable=\"true\"\n      theme=\"light\"\n      default-mode=\"tree\"\n      @update:data=\"handleDataUpdate\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from \"vue\";\nimport JsonViewer from \"@ctechhindi/vue3-json-viewer\";\n\nconst jsonData = ref({\n  name: \"John Doe\",\n  age: 30,\n  active: true,\n  hobbies: [\"reading\", \"coding\"],\n  address: {\n    street: \"123 Main St\",\n    city: \"Anytown\",\n  },\n});\n\nconst handleDataUpdate = (newData: any) =\u003e {\n  console.log(\"Data updated:\", newData);\n};\n\u003c/script\u003e\n```\n\n### Advanced Usage\n\n```vue\n\u003ctemplate\u003e\n  \u003cJsonViewer\n    v-model:data=\"complexData\"\n    :editable=\"true\"\n    :theme=\"currentTheme\"\n    default-mode=\"tree\"\n    :show-line-numbers=\"true\"\n    :max-depth=\"3\"\n    :hide-action-text=\"false\"\n    @update:data=\"handleDataUpdate\"\n    @node-click=\"handleNodeClick\"\n    @node-expand=\"handleNodeExpand\"\n    @node-collapse=\"handleNodeCollapse\"\n    @edit-start=\"handleEditStart\"\n    @edit-save=\"handleEditSave\"\n    @edit-cancel=\"handleEditCancel\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from \"vue\";\nimport JsonViewer from \"@ctechhindi/vue3-json-viewer\";\n\nconst complexData = ref({\n  // Your complex JSON data\n});\n\nconst currentTheme = ref\u003c\"light\" | \"dark\"\u003e(\"light\");\n\n// Event handlers\nconst handleDataUpdate = (newData: any) =\u003e {\n  console.log(\"Data updated:\", newData);\n};\n\nconst handleNodeClick = (node: any) =\u003e {\n  console.log(\"Node clicked:\", node);\n};\n\nconst handleNodeExpand = (node: any) =\u003e {\n  console.log(\"Node expanded:\", node);\n};\n\nconst handleNodeCollapse = (node: any) =\u003e {\n  console.log(\"Node collapsed:\", node);\n};\n\nconst handleEditStart = () =\u003e {\n  console.log(\"Edit mode started\");\n};\n\nconst handleEditSave = (data: any) =\u003e {\n  console.log(\"Changes saved:\", data);\n};\n\nconst handleEditCancel = () =\u003e {\n  console.log(\"Edit cancelled\");\n};\n\u003c/script\u003e\n```\n\n### Customizing UI Elements\n\nYou can hide specific UI elements using the visibility props:\n\n```vue\n\u003ctemplate\u003e\n  \u003cJsonViewer\n    v-model:data=\"jsonData\"\n    :hide-header=\"false\"\n    :hide-footer=\"true\"\n    :hide-mode-switcher=\"false\"\n    :hide-tree-controls=\"false\"\n    :hide-edit-controls=\"false\"\n    :hide-search-button=\"true\"\n    :hide-copy-button=\"false\"\n    :hide-download-button=\"true\"\n    :hide-theme-button=\"false\"\n  /\u003e\n\u003c/template\u003e\n```\n\n### Minimal Configuration\n\nFor a minimal, read-only viewer:\n\n```vue\n\u003ctemplate\u003e\n  \u003cJsonViewer\n    v-model:data=\"jsonData\"\n    :editable=\"false\"\n    :hide-header=\"false\"\n    :hide-footer=\"true\"\n    :hide-edit-controls=\"true\"\n    :hide-search-button=\"true\"\n    :hide-copy-button=\"false\"\n    :hide-download-button=\"true\"\n    :hide-theme-button=\"false\"\n  /\u003e\n\u003c/template\u003e\n```\n\n## 📋 Props\n\n| Prop              | Type                | Default   | Description                          |\n| ----------------- | ------------------- | --------- | ------------------------------------ |\n| `data`            | `any`               | `{}`      | JSON data to display                 |\n| `editable`        | `boolean`           | `true`    | Enable editing capabilities          |\n| `theme`           | `'light' \\| 'dark'` | `'light'` | Theme preference                     |\n| `defaultMode`     | `'tree' \\| 'text'`  | `'tree'`  | Default view mode                    |\n| `showLineNumbers` | `boolean`           | `false`   | Show line numbers in text mode       |\n| `maxDepth`        | `number`            | `3`       | Maximum depth to expand by default   |\n| `hideActionText`  | `boolean`           | `false`   | Hide button text labels (icons only) |\n\n### UI Visibility Props\n\n| Prop                 | Type      | Default | Description                              |\n| -------------------- | --------- | ------- | ---------------------------------------- |\n| `hideHeader`         | `boolean` | `false` | Hide the entire menu bar (header)        |\n| `hideFooter`         | `boolean` | `false` | Hide the entire footer                   |\n| `hideModeSwitcher`   | `boolean` | `false` | Hide the Tree/Text mode switcher         |\n| `hideTreeControls`   | `boolean` | `false` | Hide the Expand All/Collapse All buttons |\n| `hideEditControls`   | `boolean` | `false` | Hide the Edit/Save/Cancel buttons        |\n| `hideSearchButton`   | `boolean` | `false` | Hide the Search button                   |\n| `hideCopyButton`     | `boolean` | `false` | Hide the Copy button                     |\n| `hideDownloadButton` | `boolean` | `false` | Hide the Download button                 |\n| `hideThemeButton`    | `boolean` | `false` | Hide the Theme toggle button             |\n\n## 🎭 Events\n\n| Event           | Payload                                                     | Description          |\n| --------------- | ----------------------------------------------------------- | -------------------- |\n| `update:data`   | `newData: any`                                              | Data changed event   |\n| `node-click`    | `node: JsonNode`                                            | Node clicked event   |\n| `node-expand`   | `node: JsonNode`                                            | Node expanded event  |\n| `node-collapse` | `node: JsonNode`                                            | Node collapsed event |\n| `edit-start`    | -                                                           | Edit mode started    |\n| `edit-save`     | `data: any`                                                 | Changes saved        |\n| `edit-cancel`   | -                                                           | Edit mode cancelled  |\n| `key-change`    | `event: { node: JsonNode, oldKey: string, newKey: string }` | Key name changed     |\n| `theme-change`  | `theme: 'light' \\| 'dark'`                                  | Theme changed        |\n\n## 🏗️ Data Structure\n\n```typescript\ninterface JsonNode {\n  key: string;\n  value: any;\n  type: \"string\" | \"number\" | \"boolean\" | \"object\" | \"array\" | \"null\";\n  path: string[];\n  level: number;\n  expanded?: boolean;\n  children?: JsonNode[];\n}\n```\n\n## 🎨 Styling \u0026 Theming\n\nThe component uses **component-scoped CSS custom properties** for theming, ensuring that theme changes only affect the JsonViewer component and do not interfere with your parent application's styling.\n\n### Component-Only Theming\n\nThe theme is completely self-contained within the component:\n\n**Dynamic Theme Icons**: The theme button automatically shows:\n- 🌙 **Moon icon** when in light theme (click to switch to dark)\n- ☀️ **Sun icon** when in dark theme (click to switch to light)\n\n```vue\n\u003ctemplate\u003e\n  \u003cJsonViewer \n    :theme=\"'dark'\"  \u003c!-- Theme only affects this component --\u003e\n    v-model:data=\"jsonData\" \n  /\u003e\n\u003c/template\u003e\n```\n\n### CSS Custom Properties\n\nYou can customize the appearance by overriding these CSS variables within the component scope:\n\n```css\n.json-viewer {\n  --bg-primary: #ffffff;\n  --bg-secondary: #f8fafc;\n  --bg-tertiary: #f1f5f9;\n  --text-primary: #1e293b;\n  --text-secondary: #64748b;\n  --border-color: #e2e8f0;\n  --accent-color: #3b82f6;\n  --hover-color: #f1f5f9;\n  --success-color: #10b981;\n  --error-color: #ef4444;\n  --warning-color: #f59e0b;\n}\n```\n\n### Using in Other Projects\n\nWhen you use this component in other projects, the theme will **only affect the component itself**:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003c!-- This header won't be affected by theme changes --\u003e\n    \u003cheader class=\"my-app-header\"\u003e\n      \u003ch1\u003eMy Application\u003c/h1\u003e\n    \u003c/header\u003e\n    \n    \u003c!-- Only this component will change theme --\u003e\n    \u003cJsonViewer \n      :theme=\"componentTheme\"\n      v-model:data=\"jsonData\"\n      @theme-change=\"handleThemeChange\"\n    /\u003e\n    \n    \u003c!-- This footer also won't be affected --\u003e\n    \u003cfooter class=\"my-app-footer\"\u003e\n      \u003cp\u003eMy Application Footer\u003c/p\u003e\n    \u003c/footer\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst componentTheme = ref('light');\n\nconst handleThemeChange = (newTheme) =\u003e {\n  componentTheme.value = newTheme;\n  // Theme only affects the JsonViewer component\n  // Your app's global styling remains unchanged\n};\n\u003c/script\u003e\n```\n\n**Benefits:**\n- ✅ **No Global Side Effects** - Theme changes only affect the component\n- ✅ **Better Encapsulation** - Component manages its own appearance\n- ✅ **Easier Integration** - No conflicts with parent project's theme system\n- ✅ **Reusable** - Can be used in any project without affecting global styles\n\n## 🛠️ Development\n\n### Setup\n\n```bash\n# Clone the repository\ngit clone https://github.com/jeevan-lal/vue3-json-viewer.git\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n```\n\n### Build Options\n\n```bash\n# Build the library component (for npm publishing)\nnpm run build\n\n# Build the demo app to ./preview folder\nnpm run build:demo\n\n# Preview the built demo app\nnpm run preview\n```\n\n### Build Outputs\n\n- **`npm run build`** → Creates `dist/` folder with library files:\n\n  - `json-viewer.umd.js` - UMD bundle\n  - `json-viewer.mjs` - ES module bundle\n  - `style.css` - Component styles\n\n- **`npm run build:demo`** → Creates `preview/` folder with demo app:\n  - `index.html` - Demo page\n  - `assets/` - Bundled CSS and JavaScript\n\n### Build\n\n```bash\n# Build for production\nnpm run build\n\n# Preview production build\nnpm run preview\n```\n\n### Lint\n\n```bash\n# Run ESLint\nnpm run lint\n\n# Type check\nnpm run type-check\n```\n\n## 🧪 Testing\n\nRun the test suite:\n\n```bash\nnpm run test\n```\n\n## 📱 Browser Support\n\n- Chrome ≥ 87\n- Firefox ≥ 78\n- Safari ≥ 14\n- Edge ≥ 88\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- Icons provided by [Heroicons](https://heroicons.com/)\n- Font families: [Inter](https://rsms.me/inter/) and [Fira Code](https://github.com/tonsky/FiraCode)\n- Built with [Vue 3](https://vuejs.org/) and [Vite](https://vitejs.dev/)\n\n## 🔧 Troubleshooting\n\n### Theme Not Working?\n\n**Problem**: Theme changes not visible in your project\n\n**Solution**: The component now uses component-only theming. Make sure you're passing the theme prop correctly:\n\n```vue\n\u003c!-- ✅ Correct - Theme will work --\u003e\n\u003cJsonViewer :theme=\"'dark'\" v-model:data=\"jsonData\" /\u003e\n\n\u003c!-- ❌ Incorrect - No theme prop --\u003e\n\u003cJsonViewer v-model:data=\"jsonData\" /\u003e\n```\n\n### Theme Affecting Other Elements?\n\n**Problem**: Theme changes affecting your entire application\n\n**Solution**: This shouldn't happen anymore! The component is now completely self-contained. If you're still experiencing issues, make sure you're using the latest version.\n\n## 📞 Support\n\nIf you have any questions or need help, please:\n\n1. Check the [documentation](#-usage)\n2. Search [existing issues](https://github.com/jeevan-lal/vue3-json-viewer/issues)\n3. Create a [new issue](https://github.com/jeevan-lal/vue3-json-viewer/issues/new)\n\n---\n\nMade with ❤️ and Vue 3\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeevan-lal%2Fvue3-json-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeevan-lal%2Fvue3-json-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeevan-lal%2Fvue3-json-viewer/lists"}