Grapher-JSON-UI

Simple Vue component with basic GUI to print and/or edit JSON data.

Demo

Install

npm install grapher-json-ui --save

yarn add grapher-json-ui

Usage (default)

<template>
    <grapher v-model="myData" />
</template>

<script>
import 'grapher-json-ui/dist/index.css'

import Grapher from 'grapher-json-ui'

export default {
    components: { Grapher },
    data: () => ({
        myData: {
            test: 'Hello world'
        }
    })
}
</script>

Usage (edit mode)

<template>
    <grapher v-model="myData" :editable="true" />
</template>

<script>
import 'grapher-json-ui/dist/index.css'

import Grapher from 'grapher-json-ui'

export default {
    components: { Grapher },
    data: () => ({
        myData: {
            test: 'Hello world'
        }
    })
}
</script>

Props

{
    editable: {
        type: Boolean,
        default: false
    },
    brackets: {
        type: Boolean,
        default: true
    },
    comma: {
        type: Boolean,
        default: true
    }
}