Registry / devops / lite-json-editor

lite-json-editor

JSON →
library0.1.3jsnpmunverified

A lightweight JSON formatter and editor component for Vue 3. Version 0.1.3 provides a simple v-model-based editor with dark mode, color formatting, and optional editing/error display. It is a single-file Vue component with zero dependencies, offering an alternative to heavier editors like vue-json-pretty. The package is released on npm with no established release cadence; it supports Vue 3 only and does not ship TypeScript types.

devops
npm install lite-json-editor
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · LITE-JSON-EDITOR
L
lite-json-editor
devopsjavascriptv0.1.3
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

LiteJsonEditor
✓ import LiteJsonEditor from 'lite-json-editor'
✗ import { LiteJsonEditor } from 'lite-json-editor'
The component is exported as default; named import will fail.
LiteJsonEditor (CommonJS)
✓ const LiteJsonEditor = require('lite-json-editor')
✗ import LiteJsonEditor from 'lite-json-editor'
CommonJS require works in Node environments; but in Vue 3 with Vite, use ESM import.
Component Usage
✓ <LiteJsonEditor v-model="value" />
✗ <lite-json-editor v-model="value" />
Component must be PascalCase in the template because Vue 3 does not auto-resolve hyphenated tags from default exports.

Shows basic setup: import default component, bind reactive JSON data with v-model, enable dark mode and custom indent.

<script setup> import { ref } from 'vue' import LiteJsonEditor from 'lite-json-editor' const jsonData = ref({ name: 'test', version: 1 }) </script> <template> <LiteJsonEditor v-model="jsonData" indent="2" dark /> </template>
Debug
Known issues
breakingThe package has no TypeScript type definitions. TypeScript users must define types manually or suppress errors.
fix
Create a declaration file in your project: declare module 'lite-json-editor' { ... }
affects: >=0.0.0
breakingOnly compatible with Vue 3. Trying to use with Vue 2 will cause runtime errors.
fix
Ensure your project uses Vue 3 (vue@^3).
affects: >=0.0.0
gotchaThe v-model value must be reactive (e.g., ref or reactive). Passing a plain object will not update the component.
fix
Use ref() or reactive() for the bound value.
affects: >=0.0.0
gotchaNo global style files are provided; theme is applied inline. Overriding styles must be done with deep selectors or ::v-deep.
fix
In scoped styles, use :deep(.lite-json-editor) to target internal elements.
affects: >=0.0.0
deprecatedVersion 0.1.3 is early; API may change without major version bumps. No changelog available.
fix
Pin exact version in package.json and test upgrades carefully.
affects: >=0.0.0 <1.0.0
Errors
Common errors & fixes
Uncaught TypeError: Cannot read properties of undefined (reading 'value')
v-model bound to a non-reactive plain variable (e.g., let value = ...) instead of ref or reactive.
fix
Use `const value = ref()` and pass `value` in template.
Component is missing template or render function
Importing the component incorrectly (e.g., as a named export) or trying to use it in Vue 2.
fix
Use default import: `import LiteJsonEditor from 'lite-json-editor'` and ensure Vue 3 is used.
Unknown custom element: <lite-json-editor> - did you register the component correctly?
Using kebab-case in template without Vue's PascalCase resolution, or forgetting to register the component.
fix
Register the component globally or use PascalCase in the template: `<LiteJsonEditor />`
Upgrade
Version history
0.1.3latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
4 hits · last 30 days
node
4
Resources
githubhttps://github.com/Megarsh/lite-json-editor ↗
packagelite-json-editor ↗
homepagehttps://github.com/Megarsh/lite-json-editor#readme ↗
lite-json-editor — npm install lite-json-editor · libregistry