# Component JsonApiViewer
[](https://www.npmjs.com/package/quasar-ui-json-api-viewer)
[](https://www.npmjs.com/package/quasar-ui-json-api-viewer)
Use the **JsonApiViewer** component to display json as validated and built via the [Quasar Json Api](https://github.com/hawkeye64/quasar-json-api) library for UI kit (`quasar create myApp --kit ui`). (Note: supports Quasar `dark mode`)
As simple as:
```html
```
Properties:
- `title` [String]: Title to use. Ex: `title="QCalendar API"`
- `json` [String]: The json API. Ex: `:json="api"`
- `type` [String]: Defaults to `Vue Component`.
- `starting-tab` [String]: The default starting tab is `props`, but if you have no props, you may want to start with a different tab.
- `starting-inner-tab` [String]: The default starting inner tab is `model`, but if you have no model in your prop categories, you may want to start with a different inner tab.
- `no-footer` [Boolean]: TTurns off the default footer
Slots:
- `footer`: Replaces the default footer
Please note: As of v1.1.0, `@quasar/qmarkdown` and `@quasar/qribbon` have been tagged as externals and need to be installed separately instead of being bundled in the npm package.
# Usage
## Quasar CLI project
Install the [App Extension](../app-extension).
**OR**:
Create and register a boot file:
```js
import Vue from 'vue'
import Plugin from 'quasar-ui-json-api-viewer'
import 'quasar-ui-json-api-viewer/dist/index.css'
Vue.use(Plugin)
```
**OR**:
```html
```
## Vue CLI project
```js
import Vue from 'vue'
import Plugin from 'quasar-ui-json-api-viewer'
import 'quasar-ui-json-api-viewer/dist/index.css'
Vue.use(Plugin)
```
**OR**:
```html
```
## UMD variant
Exports `window.jsonApiViewer`.
Add the following tag(s) after the Quasar ones:
```html
```
If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
```html
```
# Setup
```bash
$ yarn
```
# Developing
```bash
# start dev in SPA mode
$ yarn dev
# start dev in UMD mode
$ yarn dev:umd
# start dev in SSR mode
$ yarn dev:ssr
# start dev in Cordova iOS mode
$ yarn dev:ios
# start dev in Cordova Android mode
$ yarn dev:android
# start dev in Electron mode
$ yarn dev:electron
```
# Building package
```bash
$ cd ui
$ yarn build
```
# Donate
If you appreciate the work that went into this, please consider donating to [Quasar](https://donate.quasar.dev) or [Jeff](https://github.com/sponsors/hawkeye64).
# License
MIT (c) Jeff Galbraith