# lite-json-editor

> A lightweight json formatter/editor for Vue 3

Latest version **0.1.3** (published 2022-11-21) · ISC license · 231 weekly downloads

## Install

```sh
npm install lite-json-editor
pnpm add lite-json-editor
yarn add lite-json-editor
bun add lite-json-editor
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2022-11-21 |
| First published | 2022-10-23 |
| Weekly downloads | 231 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 14.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Maintainers | megarsh |
| Keywords | vue, vue3, json, json-editor, vue-json, jsoneditor, vuejson |

## Links

- npm: https://www.npmjs.com/package/lite-json-editor
- Repository: https://github.com/Megarsh/lite-json-editor
- Homepage: https://github.com/Megarsh/lite-json-editor#readme
- Issues: https://github.com/Megarsh/lite-json-editor/issues
- npm.io page: https://npm.io/package/lite-json-editor

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.2.37

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.1.3 (latest) — 2022-11-21
- 0.1.2 — 2022-10-24
- 0.1.0 — 2022-10-24
- 0.0.1 — 2022-10-23
- 0.0.0 — 2022-10-23

## README

# lite-json-editor (Vue 3)

A lightweight json formatter/editor for Vue 3

[Demo](https://megarsh.github.io/lite-json-editor/)

![The San Juan Mountains are beautiful!](https://megarsh.github.io/lite-json-editor/public/demo.png)
## Install

### Vue 3
```sh
npm i lite-json-editor
```

#### Usage
```vue
<script setup>
    import { ref } from 'vue'
    import LiteJsonEditor from 'lite-json-editor'

    const value = ref()
</script>

<template>
    <LiteJsonEditor v-model="value" />
</template>
```

#### Props

| Name         | Description             | Type                       | Default |
| ------------ | ----------------------- | -------------------------- | ------- |
| v-model      | binding value           | `Object`, `String`, `null` |         |
| indent       | json indent             | `Number`                   | 3       |
| dark         | dark mode               | `Boolean`                  | false   |
| withoutEdit  | disable editing         | `Boolean`                  | false   |
| withoutError | disable error trigger   | `Boolean`                  | false   |
| formatting   | color formatting        | `Object`                   |         |

#### Slots

This component provides a slot if you need to modify the error display behavior

```vue
<template>
    <LiteJsonEditor v-model="value">
        <img src="/example-error-icon.svg" />
    </LiteJsonEditor>
</template>
```

#### Formatting

Default colors are

- ![#a9dc76](https://via.placeholder.com/15/a9dc76/a9dc76.png) `#a9dc76` - number
- ![#84aecc](https://via.placeholder.com/15/84aecc/84aecc.png) `#84aecc` - braces
- ![#d26a6a](https://via.placeholder.com/15/d26a6a/d26a6a.png) `#d26a6a` - brackets
- ![#4f4f4f](https://via.placeholder.com/15/4f4f4f/4f4f4f.png) `#4f4f4f` - colon
- ![#f8c33b](https://via.placeholder.com/15/f8c33b/f8c33b.png) `#f8c33b` - comma
- ![#5f9fca](https://via.placeholder.com/15/5f9fca/5f9fca.png) `#5f9fca` - string
- ![#e393ff](https://via.placeholder.com/15/e393ff/e393ff.png) `#e393ff` - string_quotes
- ![#ff6188](https://via.placeholder.com/15/ff6188/ff6188.png) `#ff6188` - key
- ![#fc9867](https://via.placeholder.com/15/fc9867/fc9867.png) `#fc9867` - key_quotes
- ![#cccccc](https://via.placeholder.com/15/cccccc/cccccc.png) `#cccccc` - null
- ![#8ccf79](https://via.placeholder.com/15/8ccf79/8ccf79.png) `#8ccf79` - true
- ![#e69fc2](https://via.placeholder.com/15/e69fc2/e69fc2.png) `#e69fc2` - false

If you want to modify any of those values pass a formatting object containing `key: color` pairs of your desired changes

```vue
<template>
    <LiteJsonEditor v-model="value" :formatting="{ 'number': '#e3e3e3' }" />
</template>
```

---
_Source: https://npm.io/package/lite-json-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._