lite-json-editor

lite-json-editor (Vue 3)

A lightweight json formatter/editor for Vue 3

Demo

Install

Vue 3

npm i lite-json-editor

Usage

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

    const value = ref()
</script>

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

Props

Slots

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

<template>
    <LiteJsonEditor v-model="value">
        <img src="https://raw.githubusercontent.com/Megarsh/lite-json-editor/HEAD/example-error-icon.svg" />
    </LiteJsonEditor>
</template>

Formatting

Default colors are

• #a9dc76 - number
• #84aecc - braces
• #d26a6a - brackets
• #4f4f4f - colon
• #f8c33b - comma
• #5f9fca - string
• #e393ff - string_quotes
• #ff6188 - key
• #fc9867 - key_quotes
• #cccccc - null
• #8ccf79 - true
• #e69fc2 - false

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

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