{"_id":"@ctechhindi/vue3-json-viewer","_rev":"6-4bfe8eacceb3f045883135683072a3de","name":"@ctechhindi/vue3-json-viewer","dist-tags":{"latest":"1.0.5"},"versions":{"1.0.0":{"name":"@ctechhindi/vue3-json-viewer","version":"1.0.0","keywords":["vue","vue3","json","viewer","editor","tree","typescript","composition-api"],"author":{"name":"Jeevan Lal"},"license":"MIT","_id":"@ctechhindi/vue3-json-viewer@1.0.0","maintainers":[{"name":"ctechhindi","email":"ctechhindi@gmail.com"}],"homepage":"https://github.com/jeevan-lal/vue3-json-viewer#readme","bugs":{"url":"https://github.com/jeevan-lal/vue3-json-viewer/issues"},"dist":{"shasum":"4c3f39ef791e42503e5b967f02afb20a5f74fe58","tarball":"https://registry.npmjs.org/@ctechhindi/vue3-json-viewer/-/vue3-json-viewer-1.0.0.tgz","fileCount":31,"integrity":"sha512-PeuICbszBnIRGvFAogMTgPGtgBSJpr27lluGZzHfJJuL2ZxgwWRpyVYBKjy+Ir4S+QQjGBs0byw5lSrcIokwgg==","signatures":[{"sig":"MEQCIGv48KhIQ5v8qpmSBdJOyglX+OeymfEMR9vGhTdtM+QaAiAcItEWzZ/cwyT/RraFik3QTERzGVBn+BJCrCPUsCJoxA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":68008},"main":"src/components/JsonViewer.vue","gitHead":"9bb8aff1844709e712085c6dc77a6d0c0fb592c6","scripts":{"dev":"vite","lint":"eslint src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","build":"vue-tsc && vite build","preview":"vite preview","type-check":"vue-tsc --noEmit"},"_npmUser":{"name":"ctechhindi","email":"ctechhindi@gmail.com"},"repository":{"url":"git+https://github.com/jeevan-lal/vue3-json-viewer.git","type":"git"},"_npmVersion":"10.9.2","description":"A modern, sleek Vue 3 JSON viewer component with tree and text modes","directories":{},"_nodeVersion":"23.11.0","dependencies":{"vue":"^3.3.4"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.4.5","eslint":"^8.45.0","vue-tsc":"^1.8.5","typescript":"~5.1.6","@types/node":"^20.0.0","@vue/tsconfig":"^0.4.0","eslint-plugin-vue":"^9.15.0","@vitejs/plugin-vue":"^4.2.3","@typescript-eslint/parser":"^6.0.0","@vue/eslint-config-typescript":"^11.0.0","@typescript-eslint/eslint-plugin":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue3-json-viewer_1.0.0_1755150272433_0.9462666461812879","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@ctechhindi/vue3-json-viewer","version":"1.0.1","keywords":["vue","vue3","json","viewer","editor","tree","typescript","composition-api"],"author":{"name":"Jeevan Lal"},"license":"MIT","_id":"@ctechhindi/vue3-json-viewer@1.0.1","maintainers":[{"name":"ctechhindi","email":"ctechhindi@gmail.com"}],"homepage":"https://github.com/jeevan-lal/vue3-json-viewer#readme","bugs":{"url":"https://github.com/jeevan-lal/vue3-json-viewer/issues"},"dist":{"shasum":"93326a5da76f7d9e4c4e858016c9fe961c567f80","tarball":"https://registry.npmjs.org/@ctechhindi/vue3-json-viewer/-/vue3-json-viewer-1.0.1.tgz","fileCount":32,"integrity":"sha512-0wWpEDzQBfgcV/nU8bKNZeLWdEksQTG9xB5TF/Pm3l6JFWC8qYIm3CNWFOvOi+pex/15YWl8IIsieCQzsA28kg==","signatures":[{"sig":"MEUCIQDe0FASmNKA5aArOSrsIpiYE+CI2FNaXwdS1v+f+UynqQIgcSpHAzDZk1E1JbhLoumdx/aVqFYt6D03DfpSIjROyhA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":74598},"main":"src/components/JsonViewer.vue","gitHead":"4812437b62bc09c4cf712d0f723740ca9955ffad","scripts":{"dev":"vite","lint":"eslint src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","build":"vue-tsc && vite build","preview":"vite preview","build:demo":"vue-tsc && vite build --config vite.demo.config.ts","type-check":"vue-tsc --noEmit"},"_npmUser":{"name":"ctechhindi","email":"ctechhindi@gmail.com"},"repository":{"url":"git+https://github.com/jeevan-lal/vue3-json-viewer.git","type":"git"},"_npmVersion":"10.9.2","description":"A modern, sleek Vue 3 JSON viewer component with tree and text modes","directories":{},"_nodeVersion":"23.11.0","dependencies":{"vue":"^3.3.4"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.4.5","eslint":"^8.45.0","vue-tsc":"^1.8.5","typescript":"~5.1.6","@types/node":"^20.0.0","@vue/tsconfig":"^0.4.0","eslint-plugin-vue":"^9.15.0","@vitejs/plugin-vue":"^4.2.3","@typescript-eslint/parser":"^6.0.0","@vue/eslint-config-typescript":"^11.0.0","@typescript-eslint/eslint-plugin":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue3-json-viewer_1.0.1_1755159328832_0.9748714143148296","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@ctechhindi/vue3-json-viewer","version":"1.0.2","keywords":["vue","vue3","json","viewer","editor","tree","typescript","composition-api"],"author":{"name":"Jeevan Lal"},"license":"MIT","_id":"@ctechhindi/vue3-json-viewer@1.0.2","maintainers":[{"name":"ctechhindi","email":"ctechhindi@gmail.com"}],"homepage":"https://github.com/jeevan-lal/vue3-json-viewer#readme","bugs":{"url":"https://github.com/jeevan-lal/vue3-json-viewer/issues"},"dist":{"shasum":"a2c7b54f7d7bbce7faaf41a29ff58f7c0d2eb80f","tarball":"https://registry.npmjs.org/@ctechhindi/vue3-json-viewer/-/vue3-json-viewer-1.0.2.tgz","fileCount":32,"integrity":"sha512-6IPR0hnOSUpiHRVICMG3+MfSnUW4g0K94K8ur5aX04RKhpYHPAYXoTtttbiPL36MsiP9pk9hCdOHWi4SmPQqWg==","signatures":[{"sig":"MEUCIByckv9YnbB42lS5xy/5bvB7cI4f05f4AnARRy83oIGzAiEAsK7z2fvH4QwUY/brFVHunkAb8FX/2kiLhzhwaYZ7w4Y=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":133732},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./JsonViewer":{"types":"./src/components/JsonViewer.vue","import":"./src/components/JsonViewer.vue"}},"gitHead":"d3d37ad318955b635a658ca29f06efbe22de690f","scripts":{"dev":"vite","lint":"eslint src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","build":"vue-tsc && vite build","preview":"vite preview","publish":"npm publish --access public","build:lib":"rimraf dist && vue-tsc --project tsconfig.lib.json --declaration --emitDeclarationOnly --outDir dist && vite build && npm run copy-types","build:demo":"vue-tsc && vite build --config vite.demo.config.ts","copy-types":"vue-tsc --project tsconfig.lib.json --declaration --emitDeclarationOnly --outDir dist","type-check":"vue-tsc --noEmit"},"_npmUser":{"name":"ctechhindi","email":"ctechhindi@gmail.com"},"repository":{"url":"git+https://github.com/jeevan-lal/vue3-json-viewer.git","type":"git"},"_npmVersion":"10.9.2","description":"A modern, sleek Vue 3 JSON viewer component with tree and text modes","directories":{},"_nodeVersion":"23.11.0","dependencies":{"vue":"^3.3.4"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.4.5","eslint":"^8.45.0","rimraf":"^6.0.1","vue-tsc":"^1.8.5","typescript":"~5.1.6","@types/node":"^20.0.0","@vue/tsconfig":"^0.4.0","eslint-plugin-vue":"^9.15.0","@vitejs/plugin-vue":"^4.2.3","@typescript-eslint/parser":"^6.0.0","@vue/eslint-config-typescript":"^11.0.0","@typescript-eslint/eslint-plugin":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue3-json-viewer_1.0.2_1755165108660_0.9793364546246721","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@ctechhindi/vue3-json-viewer","version":"1.0.3","keywords":["vue","vue3","json","viewer","editor","tree","typescript","composition-api"],"author":{"name":"Jeevan Lal"},"license":"MIT","_id":"@ctechhindi/vue3-json-viewer@1.0.3","maintainers":[{"name":"ctechhindi","email":"ctechhindi@gmail.com"}],"homepage":"https://github.com/jeevan-lal/vue3-json-viewer#readme","bugs":{"url":"https://github.com/jeevan-lal/vue3-json-viewer/issues"},"dist":{"shasum":"99e843a66a3472fa91ee3f8c51fb26796cbad9df","tarball":"https://registry.npmjs.org/@ctechhindi/vue3-json-viewer/-/vue3-json-viewer-1.0.3.tgz","fileCount":32,"integrity":"sha512-TAx74NW8gJws8Pd/Dfi9lMyw9xXBqFIpoHQ95ntE/kfu6Q4nGP5xMpBrHhMRVwfy5AFzxPco5RQUHxHgIPowBw==","signatures":[{"sig":"MEUCIQCIWUVjDsqlZsihA0KUiMDig3i1UCU8uGTVG4ut06vLFgIgSKEWDxiEj79FQAIlLUdC0UpumoswswYsim9RPJQY2ZE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":134360},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./css":"./dist/index.css","./styles":"./dist/index.css","./JsonViewer":{"types":"./src/components/JsonViewer.vue","import":"./src/components/JsonViewer.vue"},"./dist/index.css":"./dist/index.css"},"gitHead":"20d7e666e2a5429778cc1e9125394887fccb89b1","scripts":{"dev":"vite","lint":"eslint src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","build":"vue-tsc && vite build","preview":"vite preview","publish":"npm publish --access public","build:lib":"rimraf dist && vue-tsc --project tsconfig.lib.json --declaration --emitDeclarationOnly --outDir dist && vite build && npm run copy-types","build:demo":"vue-tsc && vite build --config vite.demo.config.ts","copy-types":"vue-tsc --project tsconfig.lib.json --declaration --emitDeclarationOnly --outDir dist","type-check":"vue-tsc --noEmit"},"_npmUser":{"name":"ctechhindi","email":"ctechhindi@gmail.com"},"repository":{"url":"git+https://github.com/jeevan-lal/vue3-json-viewer.git","type":"git"},"_npmVersion":"10.9.2","description":"A modern, sleek Vue 3 JSON viewer component with tree and text modes","directories":{},"_nodeVersion":"23.11.0","dependencies":{"vue":"^3.3.4"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.4.5","eslint":"^8.45.0","rimraf":"^6.0.1","vue-tsc":"^1.8.5","typescript":"~5.1.6","@types/node":"^20.0.0","@vue/tsconfig":"^0.4.0","eslint-plugin-vue":"^9.15.0","@vitejs/plugin-vue":"^4.2.3","@typescript-eslint/parser":"^6.0.0","@vue/eslint-config-typescript":"^11.0.0","@typescript-eslint/eslint-plugin":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue3-json-viewer_1.0.3_1755166849011_0.7439767398920609","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@ctechhindi/vue3-json-viewer","version":"1.0.4","keywords":["vue","vue3","json","viewer","editor","tree","typescript","composition-api"],"author":{"name":"Jeevan Lal"},"license":"MIT","_id":"@ctechhindi/vue3-json-viewer@1.0.4","maintainers":[{"name":"ctechhindi","email":"ctechhindi@gmail.com"}],"homepage":"https://github.com/jeevan-lal/vue3-json-viewer#readme","bugs":{"url":"https://github.com/jeevan-lal/vue3-json-viewer/issues"},"dist":{"shasum":"d3cab70e4bdeb55e8d386e16dd0bbe071482a0a8","tarball":"https://registry.npmjs.org/@ctechhindi/vue3-json-viewer/-/vue3-json-viewer-1.0.4.tgz","fileCount":34,"integrity":"sha512-sADLtfi1HkvB87Oh/u6c1tyPSf2ZVvlHtF6rAhArF+MU5GBlvIO031ViVBwvhJr3RUfchioc3vjpv3yyXsQjuA==","signatures":[{"sig":"MEUCIQDrzUVQrolv7r8s+9/SJZHm+kuhI4eQOYiZDLZEdyKbHgIgfz5iUqBLME1lAVmlI5Lo4T9qBGb9z5GuVx6hyvvb8rk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":150655},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./css":"./dist/index.css","./styles":"./dist/index.css","./JsonViewer":{"types":"./src/components/JsonViewer.vue","import":"./src/components/JsonViewer.vue"},"./dist/index.css":"./dist/index.css"},"gitHead":"10440d2abc57f0eeb16e13f66a949d68f432196a","scripts":{"dev":"vite","lint":"eslint src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","build":"vue-tsc && vite build","preview":"vite preview","publish":"npm publish --access public","build:lib":"rimraf dist && vue-tsc --project tsconfig.lib.json --declaration --emitDeclarationOnly --outDir dist && vite build && npm run copy-types","build:demo":"vue-tsc && vite build --config vite.demo.config.ts","copy-types":"vue-tsc --project tsconfig.lib.json --declaration --emitDeclarationOnly --outDir dist","type-check":"vue-tsc --noEmit"},"_npmUser":{"name":"ctechhindi","email":"ctechhindi@gmail.com"},"repository":{"url":"git+https://github.com/jeevan-lal/vue3-json-viewer.git","type":"git"},"_npmVersion":"10.9.2","description":"A modern, sleek Vue 3 JSON viewer component with tree and text modes","directories":{},"_nodeVersion":"23.11.0","dependencies":{"vue":"^3.3.4"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.4.5","eslint":"^8.45.0","rimraf":"^6.0.1","vue-tsc":"^1.8.5","typescript":"~5.1.6","@types/node":"^20.0.0","@vue/tsconfig":"^0.4.0","eslint-plugin-vue":"^9.15.0","@vitejs/plugin-vue":"^4.2.3","@typescript-eslint/parser":"^6.0.0","@vue/eslint-config-typescript":"^11.0.0","@typescript-eslint/eslint-plugin":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue3-json-viewer_1.0.4_1755184313999_0.22681688737146422","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@ctechhindi/vue3-json-viewer","version":"1.0.5","description":"A modern, sleek Vue 3 JSON viewer component with tree and text modes","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","scripts":{"dev":"vite","build":"vue-tsc && vite build","build:lib":"rimraf dist && vue-tsc --project tsconfig.lib.json --declaration --emitDeclarationOnly --outDir dist && vite build && npm run copy-types","copy-types":"vue-tsc --project tsconfig.lib.json --declaration --emitDeclarationOnly --outDir dist","build:demo":"vue-tsc && vite build --config vite.demo.config.ts","preview":"vite preview","lint":"eslint src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","type-check":"vue-tsc --noEmit","publish":"npm publish --access public"},"dependencies":{"vue":"^3.3.4"},"devDependencies":{"@types/node":"^20.0.0","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","@vitejs/plugin-vue":"^4.2.3","@vue/eslint-config-typescript":"^11.0.0","@vue/tsconfig":"^0.4.0","eslint":"^8.45.0","eslint-plugin-vue":"^9.15.0","rimraf":"^6.0.1","typescript":"~5.1.6","vite":"^4.4.5","vue-tsc":"^1.8.5"},"keywords":["vue","vue3","json","viewer","editor","tree","typescript","composition-api"],"author":{"name":"Jeevan Lal"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/jeevan-lal/vue3-json-viewer.git"},"bugs":{"url":"https://github.com/jeevan-lal/vue3-json-viewer/issues"},"homepage":"https://github.com/jeevan-lal/vue3-json-viewer#readme","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js","types":"./dist/index.d.ts"},"./JsonViewer":{"import":"./src/components/JsonViewer.vue","types":"./src/components/JsonViewer.vue"},"./styles":"./dist/index.css","./dist/index.css":"./dist/index.css","./css":"./dist/index.css"},"_id":"@ctechhindi/vue3-json-viewer@1.0.5","gitHead":"acd7695d56d0d1ccdcd648082da7d1f6e7e993bc","_nodeVersion":"23.11.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-gBmeFxsfFTanbYcmF2wflYWmmZ+5qlkbX4Gs+Wk72wcDuxBoFneKG0fmgqqi1Nw5dR3ZRzF/C3ABPlFbrHddDQ==","shasum":"97a3c2f94ce270c22a312577ea0df42c05821cfa","tarball":"https://registry.npmjs.org/@ctechhindi/vue3-json-viewer/-/vue3-json-viewer-1.0.5.tgz","fileCount":34,"unpackedSize":153951,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIE2wL+uMHshdaaY5JzD236YVsmHOb0IMbSjTJPnl6Qx6AiEAhhgCNSFRnz4u6FL6VNqNaoTMc46ZBwFbzOGWqztR6HQ="}]},"_npmUser":{"name":"ctechhindi","email":"ctechhindi@gmail.com"},"directories":{},"maintainers":[{"name":"ctechhindi","email":"ctechhindi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue3-json-viewer_1.0.5_1755328357368_0.6742827374197429"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-14T05:44:32.319Z","modified":"2025-08-16T07:12:37.749Z","1.0.0":"2025-08-14T05:44:32.752Z","1.0.1":"2025-08-14T08:15:29.040Z","1.0.2":"2025-08-14T09:51:48.866Z","1.0.3":"2025-08-14T10:20:49.240Z","1.0.4":"2025-08-14T15:11:54.181Z","1.0.5":"2025-08-16T07:12:37.577Z"},"bugs":{"url":"https://github.com/jeevan-lal/vue3-json-viewer/issues"},"author":{"name":"Jeevan Lal"},"license":"MIT","homepage":"https://github.com/jeevan-lal/vue3-json-viewer#readme","keywords":["vue","vue3","json","viewer","editor","tree","typescript","composition-api"],"repository":{"type":"git","url":"git+https://github.com/jeevan-lal/vue3-json-viewer.git"},"description":"A modern, sleek Vue 3 JSON viewer component with tree and text modes","maintainers":[{"name":"ctechhindi","email":"ctechhindi@gmail.com"}],"readme":"# Vue 3 JSON Viewer\r\n\r\nA modern, sleek Vue 3 component for viewing, editing, and manipulating JSON data with two view modes: Tree Mode and Text Mode.]\r\n\r\n[Demo Page](https://vue3-json-viewer-seven.vercel.app/)\r\n\r\n## ✨ Features\r\n\r\n- 🌳 **Tree Mode**: Hierarchical display with expandable/collapsible nodes\r\n- 📝 **Text Mode**: Raw JSON text display with syntax highlighting\r\n- ✏️ **Inline Editing**: Edit values directly in the tree view\r\n- 🔑 **Key Editing**: Rename object keys by double-clicking on them\r\n- ➕ **Add/Remove Nodes**: Add new key-value pairs or remove existing ones\r\n- 🔍 **Search & Filter**: Search across all JSON keys and values\r\n- 📋 **Copy to Clipboard**: Easy copying of JSON content with visual feedback\r\n- 💾 **Download JSON**: Save current JSON to file\r\n- 🎨 **Dark/Light Theme**: Support for both themes with dynamic icons\r\n- 📱 **Responsive Design**: Works on desktop and mobile devices\r\n- ⌨️ **Keyboard Navigation**: Full keyboard support\r\n- ♿ **Accessibility**: Screen reader support with proper ARIA labels\r\n- 🎯 **Icon-Only Mode**: Option to hide button text labels for compact interface\r\n- 🎛️ **Customizable UI**: Hide specific buttons, sections, or entire header/footer\r\n- 🚀 **Dual Build System**: Library build for npm + Demo build for preview\r\n\r\n## 🚀 Installation\r\n\r\nThis component is now available on npm as `@ctechhindi/vue3-json-viewer`\r\n\r\n[@ctechhindi/vue3-json-viewer](https://www.npmjs.com/package/@ctechhindi/vue3-json-viewer)\r\n\r\n```bash\r\nnpm install @ctechhindi/vue3-json-viewer\r\n```\r\n\r\nOr with yarn:\r\n\r\n```bash\r\nyarn add @ctechhindi/vue3-json-viewer\r\n```\r\n\r\n## 📖 Usage\r\n\r\n### CSS Import (Required)\r\n\r\n**Important:** You need to import the CSS file to see the styles. Choose one of these options:\r\n\r\n```typescript\r\n// Option 1: Direct CSS import (recommended)\r\nimport \"@ctechhindi/vue3-json-viewer/dist/index.css\";\r\n\r\n// Option 2: Using the styles export\r\nimport \"@ctechhindi/vue3-json-viewer/styles\";\r\n\r\n// Option 3: Using the css export\r\nimport \"@ctechhindi/vue3-json-viewer/css\";\r\n\r\n// Option 4: In your main.ts or main.js\r\nimport \"@ctechhindi/vue3-json-viewer/dist/index.css\";\r\n```\r\n\r\n### Basic Usage\r\n\r\n```vue\r\n<template>\r\n  <div>\r\n    <JsonViewer\r\n      v-model:data=\"jsonData\"\r\n      :editable=\"true\"\r\n      theme=\"light\"\r\n      default-mode=\"tree\"\r\n      @update:data=\"handleDataUpdate\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref } from \"vue\";\r\nimport JsonViewer from \"@ctechhindi/vue3-json-viewer\";\r\n\r\nconst jsonData = ref({\r\n  name: \"John Doe\",\r\n  age: 30,\r\n  active: true,\r\n  hobbies: [\"reading\", \"coding\"],\r\n  address: {\r\n    street: \"123 Main St\",\r\n    city: \"Anytown\",\r\n  },\r\n});\r\n\r\nconst handleDataUpdate = (newData: any) => {\r\n  console.log(\"Data updated:\", newData);\r\n};\r\n</script>\r\n```\r\n\r\n### Advanced Usage\r\n\r\n```vue\r\n<template>\r\n  <JsonViewer\r\n    v-model:data=\"complexData\"\r\n    :editable=\"true\"\r\n    :theme=\"currentTheme\"\r\n    default-mode=\"tree\"\r\n    :show-line-numbers=\"true\"\r\n    :max-depth=\"3\"\r\n    :hide-action-text=\"false\"\r\n    @update:data=\"handleDataUpdate\"\r\n    @node-click=\"handleNodeClick\"\r\n    @node-expand=\"handleNodeExpand\"\r\n    @node-collapse=\"handleNodeCollapse\"\r\n    @edit-start=\"handleEditStart\"\r\n    @edit-save=\"handleEditSave\"\r\n    @edit-cancel=\"handleEditCancel\"\r\n  />\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref } from \"vue\";\r\nimport JsonViewer from \"@ctechhindi/vue3-json-viewer\";\r\n\r\nconst complexData = ref({\r\n  // Your complex JSON data\r\n});\r\n\r\nconst currentTheme = ref<\"light\" | \"dark\">(\"light\");\r\n\r\n// Event handlers\r\nconst handleDataUpdate = (newData: any) => {\r\n  console.log(\"Data updated:\", newData);\r\n};\r\n\r\nconst handleNodeClick = (node: any) => {\r\n  console.log(\"Node clicked:\", node);\r\n};\r\n\r\nconst handleNodeExpand = (node: any) => {\r\n  console.log(\"Node expanded:\", node);\r\n};\r\n\r\nconst handleNodeCollapse = (node: any) => {\r\n  console.log(\"Node collapsed:\", node);\r\n};\r\n\r\nconst handleEditStart = () => {\r\n  console.log(\"Edit mode started\");\r\n};\r\n\r\nconst handleEditSave = (data: any) => {\r\n  console.log(\"Changes saved:\", data);\r\n};\r\n\r\nconst handleEditCancel = () => {\r\n  console.log(\"Edit cancelled\");\r\n};\r\n</script>\r\n```\r\n\r\n### Customizing UI Elements\r\n\r\nYou can hide specific UI elements using the visibility props:\r\n\r\n```vue\r\n<template>\r\n  <JsonViewer\r\n    v-model:data=\"jsonData\"\r\n    :hide-header=\"false\"\r\n    :hide-footer=\"true\"\r\n    :hide-mode-switcher=\"false\"\r\n    :hide-tree-controls=\"false\"\r\n    :hide-edit-controls=\"false\"\r\n    :hide-search-button=\"true\"\r\n    :hide-copy-button=\"false\"\r\n    :hide-download-button=\"true\"\r\n    :hide-theme-button=\"false\"\r\n  />\r\n</template>\r\n```\r\n\r\n### Minimal Configuration\r\n\r\nFor a minimal, read-only viewer:\r\n\r\n```vue\r\n<template>\r\n  <JsonViewer\r\n    v-model:data=\"jsonData\"\r\n    :editable=\"false\"\r\n    :hide-header=\"false\"\r\n    :hide-footer=\"true\"\r\n    :hide-edit-controls=\"true\"\r\n    :hide-search-button=\"true\"\r\n    :hide-copy-button=\"false\"\r\n    :hide-download-button=\"true\"\r\n    :hide-theme-button=\"false\"\r\n  />\r\n</template>\r\n```\r\n\r\n## 📋 Props\r\n\r\n| Prop              | Type                | Default   | Description                          |\r\n| ----------------- | ------------------- | --------- | ------------------------------------ |\r\n| `data`            | `any`               | `{}`      | JSON data to display                 |\r\n| `editable`        | `boolean`           | `true`    | Enable editing capabilities          |\r\n| `theme`           | `'light' \\| 'dark'` | `'light'` | Theme preference                     |\r\n| `defaultMode`     | `'tree' \\| 'text'`  | `'tree'`  | Default view mode                    |\r\n| `showLineNumbers` | `boolean`           | `false`   | Show line numbers in text mode       |\r\n| `maxDepth`        | `number`            | `3`       | Maximum depth to expand by default   |\r\n| `hideActionText`  | `boolean`           | `false`   | Hide button text labels (icons only) |\r\n\r\n### UI Visibility Props\r\n\r\n| Prop                 | Type      | Default | Description                              |\r\n| -------------------- | --------- | ------- | ---------------------------------------- |\r\n| `hideHeader`         | `boolean` | `false` | Hide the entire menu bar (header)        |\r\n| `hideFooter`         | `boolean` | `false` | Hide the entire footer                   |\r\n| `hideModeSwitcher`   | `boolean` | `false` | Hide the Tree/Text mode switcher         |\r\n| `hideTreeControls`   | `boolean` | `false` | Hide the Expand All/Collapse All buttons |\r\n| `hideEditControls`   | `boolean` | `false` | Hide the Edit/Save/Cancel buttons        |\r\n| `hideSearchButton`   | `boolean` | `false` | Hide the Search button                   |\r\n| `hideCopyButton`     | `boolean` | `false` | Hide the Copy button                     |\r\n| `hideDownloadButton` | `boolean` | `false` | Hide the Download button                 |\r\n| `hideThemeButton`    | `boolean` | `false` | Hide the Theme toggle button             |\r\n\r\n## 🎭 Events\r\n\r\n| Event           | Payload                                                     | Description          |\r\n| --------------- | ----------------------------------------------------------- | -------------------- |\r\n| `update:data`   | `newData: any`                                              | Data changed event   |\r\n| `node-click`    | `node: JsonNode`                                            | Node clicked event   |\r\n| `node-expand`   | `node: JsonNode`                                            | Node expanded event  |\r\n| `node-collapse` | `node: JsonNode`                                            | Node collapsed event |\r\n| `edit-start`    | -                                                           | Edit mode started    |\r\n| `edit-save`     | `data: any`                                                 | Changes saved        |\r\n| `edit-cancel`   | -                                                           | Edit mode cancelled  |\r\n| `key-change`    | `event: { node: JsonNode, oldKey: string, newKey: string }` | Key name changed     |\r\n| `theme-change`  | `theme: 'light' \\| 'dark'`                                  | Theme changed        |\r\n\r\n## 🏗️ Data Structure\r\n\r\n```typescript\r\ninterface JsonNode {\r\n  key: string;\r\n  value: any;\r\n  type: \"string\" | \"number\" | \"boolean\" | \"object\" | \"array\" | \"null\";\r\n  path: string[];\r\n  level: number;\r\n  expanded?: boolean;\r\n  children?: JsonNode[];\r\n}\r\n```\r\n\r\n## 🎨 Styling & Theming\r\n\r\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.\r\n\r\n### Component-Only Theming\r\n\r\nThe theme is completely self-contained within the component:\r\n\r\n**Dynamic Theme Icons**: The theme button automatically shows:\r\n- 🌙 **Moon icon** when in light theme (click to switch to dark)\r\n- ☀️ **Sun icon** when in dark theme (click to switch to light)\r\n\r\n```vue\r\n<template>\r\n  <JsonViewer \r\n    :theme=\"'dark'\"  <!-- Theme only affects this component -->\r\n    v-model:data=\"jsonData\" \r\n  />\r\n</template>\r\n```\r\n\r\n### CSS Custom Properties\r\n\r\nYou can customize the appearance by overriding these CSS variables within the component scope:\r\n\r\n```css\r\n.json-viewer {\r\n  --bg-primary: #ffffff;\r\n  --bg-secondary: #f8fafc;\r\n  --bg-tertiary: #f1f5f9;\r\n  --text-primary: #1e293b;\r\n  --text-secondary: #64748b;\r\n  --border-color: #e2e8f0;\r\n  --accent-color: #3b82f6;\r\n  --hover-color: #f1f5f9;\r\n  --success-color: #10b981;\r\n  --error-color: #ef4444;\r\n  --warning-color: #f59e0b;\r\n}\r\n```\r\n\r\n### Using in Other Projects\r\n\r\nWhen you use this component in other projects, the theme will **only affect the component itself**:\r\n\r\n```vue\r\n<template>\r\n  <div>\r\n    <!-- This header won't be affected by theme changes -->\r\n    <header class=\"my-app-header\">\r\n      <h1>My Application</h1>\r\n    </header>\r\n    \r\n    <!-- Only this component will change theme -->\r\n    <JsonViewer \r\n      :theme=\"componentTheme\"\r\n      v-model:data=\"jsonData\"\r\n      @theme-change=\"handleThemeChange\"\r\n    />\r\n    \r\n    <!-- This footer also won't be affected -->\r\n    <footer class=\"my-app-footer\">\r\n      <p>My Application Footer</p>\r\n    </footer>\r\n  </div>\r\n</template>\r\n\r\n<script setup>\r\nconst componentTheme = ref('light');\r\n\r\nconst handleThemeChange = (newTheme) => {\r\n  componentTheme.value = newTheme;\r\n  // Theme only affects the JsonViewer component\r\n  // Your app's global styling remains unchanged\r\n};\r\n</script>\r\n```\r\n\r\n**Benefits:**\r\n- ✅ **No Global Side Effects** - Theme changes only affect the component\r\n- ✅ **Better Encapsulation** - Component manages its own appearance\r\n- ✅ **Easier Integration** - No conflicts with parent project's theme system\r\n- ✅ **Reusable** - Can be used in any project without affecting global styles\r\n\r\n## 🛠️ Development\r\n\r\n### Setup\r\n\r\n```bash\r\n# Clone the repository\r\ngit clone https://github.com/jeevan-lal/vue3-json-viewer.git\r\n\r\n# Install dependencies\r\nnpm install\r\n\r\n# Start development server\r\nnpm run dev\r\n```\r\n\r\n### Build Options\r\n\r\n```bash\r\n# Build the library component (for npm publishing)\r\nnpm run build\r\n\r\n# Build the demo app to ./preview folder\r\nnpm run build:demo\r\n\r\n# Preview the built demo app\r\nnpm run preview\r\n```\r\n\r\n### Build Outputs\r\n\r\n- **`npm run build`** → Creates `dist/` folder with library files:\r\n\r\n  - `json-viewer.umd.js` - UMD bundle\r\n  - `json-viewer.mjs` - ES module bundle\r\n  - `style.css` - Component styles\r\n\r\n- **`npm run build:demo`** → Creates `preview/` folder with demo app:\r\n  - `index.html` - Demo page\r\n  - `assets/` - Bundled CSS and JavaScript\r\n\r\n### Build\r\n\r\n```bash\r\n# Build for production\r\nnpm run build\r\n\r\n# Preview production build\r\nnpm run preview\r\n```\r\n\r\n### Lint\r\n\r\n```bash\r\n# Run ESLint\r\nnpm run lint\r\n\r\n# Type check\r\nnpm run type-check\r\n```\r\n\r\n## 🧪 Testing\r\n\r\nRun the test suite:\r\n\r\n```bash\r\nnpm run test\r\n```\r\n\r\n## 📱 Browser Support\r\n\r\n- Chrome ≥ 87\r\n- Firefox ≥ 78\r\n- Safari ≥ 14\r\n- Edge ≥ 88\r\n\r\n## 🤝 Contributing\r\n\r\nContributions are welcome! Please feel free to submit a Pull Request.\r\n\r\n1. Fork the repository\r\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\r\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\r\n4. Push to the branch (`git push origin feature/AmazingFeature`)\r\n5. Open a Pull Request\r\n\r\n## 📄 License\r\n\r\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\r\n\r\n## 🙏 Acknowledgments\r\n\r\n- Icons provided by [Heroicons](https://heroicons.com/)\r\n- Font families: [Inter](https://rsms.me/inter/) and [Fira Code](https://github.com/tonsky/FiraCode)\r\n- Built with [Vue 3](https://vuejs.org/) and [Vite](https://vitejs.dev/)\r\n\r\n## 🔧 Troubleshooting\r\n\r\n### Theme Not Working?\r\n\r\n**Problem**: Theme changes not visible in your project\r\n\r\n**Solution**: The component now uses component-only theming. Make sure you're passing the theme prop correctly:\r\n\r\n```vue\r\n<!-- ✅ Correct - Theme will work -->\r\n<JsonViewer :theme=\"'dark'\" v-model:data=\"jsonData\" />\r\n\r\n<!-- ❌ Incorrect - No theme prop -->\r\n<JsonViewer v-model:data=\"jsonData\" />\r\n```\r\n\r\n### Theme Affecting Other Elements?\r\n\r\n**Problem**: Theme changes affecting your entire application\r\n\r\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.\r\n\r\n## 📞 Support\r\n\r\nIf you have any questions or need help, please:\r\n\r\n1. Check the [documentation](#-usage)\r\n2. Search [existing issues](https://github.com/jeevan-lal/vue3-json-viewer/issues)\r\n3. Create a [new issue](https://github.com/jeevan-lal/vue3-json-viewer/issues/new)\r\n\r\n---\r\n\r\nMade with ❤️ and Vue 3\r\n","readmeFilename":"README.md"}