vue3-ts-jsoneditor

v2.11.3

[![npm version](https://badge.fury.io/js/vue3-ts-jsoneditor.svg)](https://badge.fury.io/js/vue3-ts-jsoneditor) ![NPM](https://img.shields.io/npm/l/vue3-ts-jsoneditor) ![npm](https://img.shields.io/npm/dm/vue3-ts-jsoneditor) <br> [![npm](https://img.shield For more information about how to use this package see README

Latest version published 29 days ago

License: MIT

NPM

GitHub

Package Health Score

68 / 100

security
No known security issues
popularity
Small
maintenance
Sustainable
community
Sustainable

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
2.11.3	\|	10/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.11.2	\|	03/2024	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.10.5	\|	03/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.0.6	\|	07/2022		0 C 0 H 0 M 0 L	0 H 0 M 0 L
0.4.0	\|	07/2022		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Small

Weekly Downloads (1,680)

GitHub Stars: 52
Forks: 9
Contributors: 3

Direct Usage Popularity

The npm package vue3-ts-jsoneditor receives a total of 1,680 downloads a week. As such, we scored vue3-ts-jsoneditor popularity level to be Small.

Based on project statistics from the GitHub repository for the npm package vue3-ts-jsoneditor, we found that it has been starred 52 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 3
Funding: No

This project has seen only 10 or less contributors.

We found a way for you to contribute to the project! Looks like vue3-ts-jsoneditor is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Sustainable

Commit Frequency

Open Issues: 3
Open PR: 0
Last Release: 29 days ago
Last Commit: 29 days ago

Further analysis of the maintenance status of vue3-ts-jsoneditor based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Sustainable.

We found that vue3-ts-jsoneditor demonstrates a positive version release cadence with at least one new version released in the past 3 months.

In the past month we didn't find any pull request activity or change in issues status has been detected for the GitHub repository.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 2 years
Dependencies: 3 Direct
Versions: 78
Install Size: 1.92 MB
Dist-tags: 1
# of Files: 29
Maintainers: 1
TS Typings: No

vue3-ts-jsoneditor has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

NPM npm

🇺🇦🇺🇦🇺🇦 Stand With Ukraine 🇺🇦🇺🇦🇺🇦

vue3-ts-jsoneditor

Powered by svelte-jsoneditor

🚀 Advantages

SSR support
Full width button
Automatic dynamic import of query languages
Automatic dynamic import of dark theme

🕹 Demo

> you can 👀 a live demo here

✳️ For Nuxt

You can use this module

☑️ Installation

npm install vue3-ts-jsoneditor

✅ Using

👉 Import globally

import {createApp} from 'vue';
import App from './App.vue';
import {JsonEditorPlugin} from 'vue3-ts-jsoneditor';

const app = createApp(App);

app.use(JsonEditorPlugin, {
  componentName: '/componentName/', // Default: 'JsonEditor',
  options: {
    /**
     *
     * SET GLOBAL OPTIONS
     *
     * */
  }
});

app.mount('#app');

🌎 Global options

interface JSONEditorOptions {
  readOnly?: boolean;
  indentation?: number | string;
  tabSize?: number;
  selection?: JSONEditorSelection;
  mode?: Mode;
  mainMenuBar?: boolean;
  navigationBar?: boolean;
  statusBar?: boolean;
  askToFormat?: boolean;
  escapeControlCharacters?: boolean;
  escapeUnicodeCharacters?: boolean;
  flattenColumns?: boolean;
  validator?: Validator;
  parser?: JSONParser;
  validationParser?: JSONParser;
  pathParser?: JSONPathParser;
  queryLanguagesIds?: QueryLanguageId[];
  queryLanguageId?: QueryLanguageId;
  onRenderValue?: OnRenderValue;
  onClassName?: OnClassName;
  onRenderMenu?: OnRenderMenu;
  height?: string | number;
  fullWidthButton?: boolean;
  darkTheme?: boolean;
}

type Mode = "text" | "tree" | "table";

type QueryLanguageId = 'javascript' | 'lodash' | 'jmespath';

Read more in svelte-jsoneditor properties

👉 Import locally

👉 Use in template

// You can use the "v-model:json" and pass json value
<template>
  
</template>

// or you can use the "v-model:text" and pass json string

<template>
  
</template>

// or you can use the "v-model" and pass json value. "mode" should be "tree"!!!

<template>
  
</template>

// or you can use the "v-model" and pass json string. "mode" should be "text"!!!

<template>
  
</template>

❗️❗️❗️ Important

> If you want use v-model (not v-model:json or v-model:text) then the type of data depends on the mode of the editor. > If mode="tree", then the data type in the model is JSON value, if mode="text", > then the data type is JSON string. > Please be aware that in text mode v-model can contain invalid JSON: whilst typing in text mode, > a JSON document will be temporarily invalid, like when the user is typing a new string. > > It is more clear to use v-model:json for tree mode and v-model:text for text mode.

☑️ Slots

Slot	Description
default	Slot content displayed before the editor is rendered. Useful for SSR

☑️ Props

Name	Description	type	default
json (v-model)	JSON value	`object`	array
text (v-model)	JSON string	`string`	undefined
modelValue (v-model)	JSON value or JSON string	`object`	array
value	Same as modelValue	`object`	array
selection (v-model)	The current selected contents. You can use two-way binding using bind:selection. The tree mode supports MultiSelection, KeySelection, ValueSelection, InsideSelection, or AfterSelection. The table mode supports ValueSelection, and text mode supports TextSelection.	`JSONEditorSelection`	null
mode	mode: 'tree', 'text' or 'table'. Open the editor in 'tree' mode (default), 'table' mode, or 'text' mode	`string`	'tree'
mainMenuBar	Show the main menu bar. Default value is true.	`boolean`	true
navigationBar	Show the navigation bar with, where you can see the selected path and navigate through your document from there.	`boolean`	true
statusBar	Show a status bar at the bottom of the 'text' editor, showing information about the cursor location and selected contents.	`boolean`	true
askToFormat	When true (default), the user will be asked whether he/she wants to format the JSON document when a compact document is loaded or pasted in 'text' mode. Only applicable to 'text' mode.	`boolean`	true
readOnly	Open the editor in read-only mode: no changes can be made, non-relevant buttons are hidden from the menu, and the context menu is not enabled.	`boolean`	false
indentation	Number of spaces use for indentation when stringifying JSON, or a string to be used as indentation like '\t' to use a tab as indentation, or ' ' to use 4 spaces (which is equivalent to configuring indentation: 4). See also property tabSize.	`number`	string
tabSize	When indentation is configured as a tab character (indentation: '\t'), tabSize configures how large a tab character is rendered. Default value is 4. Only applicable to text mode.	`number`	4
escapeControlCharacters	When true, control characters like newline and tab are rendered as escaped characters \n and \t. Only applicable for 'tree' mode, in 'text' mode control characters are always escaped.	`boolean`	false
escapeUnicodeCharacters	When true, unicode characters like ☎ and 😀 are rendered escaped like \u260e and \ud83d\ude00	`boolean`	false
flattenColumns	Only applicable to 'table' mode. When true, nested object properties will be displayed each in their own column, with the nested path as column name. When false, nested objects will be rendered inline, and double-clicking them will open them in a popup.	`boolean`	true
validator	Validate the JSON document. Details in svelte-jsoneditor	`function (json: unknown): ValidationError[]`
parser	Configure a custom JSON parser, like lossless-json. By default, the native JSON parser of JavaScript is used. The JSON interface is an object with a parse and stringify function	`JSONParser`	undefined
validationParser	Only applicable when a validator is provided. This is the same as parser, except that this parser is used to parse the data before sending it to the validator. Configure a custom JSON parser that is used to parse JSON before passing it to the validator. By default, the built-in JSON parser is used. When passing a custom validationParser, make sure the output of the parser is supported by the configured validator.	`JSONParser`	undefined
pathParser	An optional object with a parse and stringify method to parse and stringify a JSONPath, which is an array with property names. The pathParser is used in the path editor in the navigation bar, which is opened by clicking the edit button on the right side of the navigation bar. The pathParser.parse function is allowed to throw an Error when the input is invalid. By default, a JSON Path notation is used, which looks like $.data[2].nested.property.	`JSONPathParser`	undefined
queryLanguagesIds	Configure one or multiple query language that can be used in the Transform modal. The library comes with three languages: `javascript`, `lodash` or `jmespath`	`QueryLanguage[]`	[javascript]
queryLanguageId	The id of the currently selected query language `javascript`, `lodash` or `jmespath`	`string`
onClassName	Add a custom class name to specific nodes, based on their path and/or value.	`function (path: Path, value: any): string`	undefined
onRenderValue	Details in svelte-jsoneditor	`function (props: RenderValueProps) : RenderValueComponentDescription[]`
onRenderMenu	Details in svelte-jsoneditor	`function (items: MenuItem[], context: { mode: 'tree'`	'text'
fullWidthButton	Whether full screen switching is added	`boolean`	true
height	Default height	`string`	number
darkTheme	Switch to dark theme	`boolean`	false

☑️ Events

Name	Description	Arguments
change	Which is invoked on every change made in the JSON document. The parameter patchResult is only available in tree mode, and not in text mode, since a change in arbitrary text cannot be expressed as a JSON Patch document.	(content: Content, previousContent: Content, patchResult: JSONPatchResult
error	Event fired when an error occurs. Default implementation is to log an error in the console and show a simple alert message to the user.	(err: Error)
change-mode	Invoked when the mode is changed.	(mode: 'tree'
change-query-language	Invoked when the user changes the selected query language in the TransformModal via the configuration button top right.	(queryLanguageId: string)
focus	Fired when the editor got focus.	()
blur	Fired when the editor lost focus.	()

☑️ Use expose functions

$collapseAll - collapse all nodes
$expandAll - expand all nodes
$expand - Expand or collapse paths in the editor. See more about expand()
$get - Get the current JSON document. See more about get()
$set - Replace the current content. Will reset the state of the editor. See also method update(). See more about set()
$update - Update the loaded content, keeping the state of the editor (like expanded objects). See more about update()
$updateProps - Update some or all of the properties See more about updateProps()
$refresh - Refresh rendering of the contents, for example after changing the font size. This is only available in text mode. See more about refresh()
$focus - Give the editor focus. See more about focus()
$destroy - Destroy the editor, remove it from the DOM. See more about destroy()
$patch - Apply a JSON patch document to update the contents of the JSON document. See more about patch()
$transform - Programmatically trigger clicking of the transform button in the main menu, opening the transform model. See more about transform()
$scrollTo - Scroll the editor vertically such that the specified path comes into view. Only applicable to modes tree and table. The path will be expanded when needed. The returned Promise is resolved after scrolling is finished. See more about scrollTo()
$findElement - Find the DOM element of a given path. Returns null when not found. See more about findElement()
$acceptAutoRepair - In tree mode, invalid JSON is automatically repaired when loaded. See more about acceptAutoRepair()
$validate - Get all current parse errors and validation errors. See more about validate()

<template>
  

  <div>
    <button>collapse all</button>

    <button>expand all</button>
  </div>
</template>

🟥🟧🟨🟩🟦🟪️ Styling

The editor can be styled using the available CSS variables. A full list with all variables can be found here

<template>
  
</template>



<style>
.awesome-json-editor {
  /* define a custom theme color */
  /* over all fonts, sizes, and colors */
  --jse-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
  Cantarell, 'Helvetica Neue', sans-serif;
  /* "consolas" for Windows, "menlo" for Mac with fallback to "monaco", 'Ubuntu Mono' for Ubuntu */
  /* (at Mac this font looks too large at 14px, but 13px is too small for the font on Windows) */
  --jse-font-family-mono: consolas, menlo, monaco, 'Ubuntu Mono', 'source-code-pro', monospace;
  --jse-font-size-mono: 14px;
  --jse-font-size: 16px;
  --jse-font-size-text-mode-search: 80%;
  --jse-line-height: calc(1em + 4px);
  --jse-indent-size: calc(1em + 4px);
  --jse-color-picker-button-size: 1em;
  --jse-padding: 10px;
  --jse-theme-color: #3883fa;
  --jse-theme-color-highlight: #5f9dff;
  --jse-background-color: #fff;
  --jse-text-color: #4d4d4d;
  --jse-text-color-inverse: #fff;
  --jse-error-color: #ee5341;
  --jse-warning-color: #fdc539;

  /* main, menu, modal */
  --jse-main-border: 1px solid #d7d7d7;
  --jse-menu-color: var(--jse-text-color-inverse);
  --jse-menu-button-size: 32px;
  --jse-modal-background: #f5f5f5;
  --jse-modal-overlay-background: rgba(0, 0, 0, 0.3);
  --jse-modal-code-background: rgba(0, 0, 0, 0.05);

  /* panels: navigation bar, gutter, search box */
  --jse-panel-background: #ebebeb;
  --jse-panel-color: var(--jse-text-color);
  --jse-panel-color-readonly: #b2b2b2;
  --jse-panel-border: var(--jse-main-border);
  --jse-panel-button-color: inherit;
  --jse-panel-button-background: transparent;
  --jse-panel-button-color-highlight: var(--jse-text-color);
  --jse-panel-button-background-highlight: #e0e0e0;

  /* navigation-bar */
  --jse-navigation-bar-color: #656565;
  --jse-navigation-bar-background: var(--jse-background-color);
  --jse-navigation-bar-background-highlight: #e5e5e5;
  --jse-navigation-bar-dropdown-color: #656565;

  /* context menu */
  --jse-context-menu-background: #656565;
  --jse-context-menu-background-highlight: #7a7a7a;
  --jse-context-menu-color: var(--jse-text-color-inverse);
  --jse-context-menu-color-disabled: #9d9d9d;
  --jse-context-menu-separator-color: #7a7a7a;
  --jse-context-menu-button-background: var(--jse-context-menu-background);
  --jse-context-menu-button-background-highlight: var(--jse-context-menu-background-highlight);
  --jse-context-menu-button-color: var(--jse-context-menu-color);
  --jse-context-menu-button-size: calc(1em + 4px);
  --jse-context-menu-tip-background: rgba(255, 255, 255, 0.2);
  --jse-context-menu-tip-color: inherit;

  /* contents: json key and values */
  --jse-key-color: #1a1a1a;
  --jse-value-color: #1a1a1a;
  --jse-value-color-number: #ee422e;
  --jse-value-color-boolean: #ff8c00;
  --jse-value-color-null: #004ed0;
  --jse-value-color-string: #008000;
  --jse-value-color-url: #008000;
  --jse-delimiter-color: rgba(0, 0, 0, 0.38);
  --jse-edit-outline: 2px solid #656565;

  /* contents: selected or hovered */
  --jse-hover-background-color: rgba(0, 0, 0, 0.06);
  --jse-selection-background-color: #d3d3d3;
  --jse-selection-background-light-color: #e8e8e8;

  /* contents: section of collapsed items in an array */
  --jse-collapsed-items-background-color: #f5f5f5;
  --jse-collapsed-items-selected-background-color: #c2c2c2;
  --jse-collapsed-items-link-color: rgba(0, 0, 0, 0.38);
  --jse-collapsed-items-link-color-highlight: #ee5341;

  /* contents: highlighting of search matches */
  --jse-search-match-color: #ffe665;
  --jse-search-match-outline: 1px solid #ffd700;
  --jse-search-match-active-color: #ffd700;
  --jse-search-match-active-outline: 1px solid #e1be00;

  /* contents: inline tags inside the JSON document */
  --jse-tag-background: rgba(0, 0, 0, 0.2);
  --jse-tag-color: var(--jse-text-color-inverse);

  /* controls in modals: inputs, buttons, and `a` */
  --jse-controls-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
  --jse-input-background: var(--jse-background-color);
  --jse-input-background-readonly: transparent;
  --jse-input-border: 1px solid #d8dbdf;
  --jse-input-border-focus: 1px solid var(--jse-theme-color);
  --jse-input-radius: 3px;
  --jse-button-background: #e0e0e0;
  --jse-button-background-highlight: #e7e7e7;
  --jse-button-color: var(--jse-text-color);
  --jse-button-primary-background: var(--jse-theme-color);
  --jse-button-primary-background-highlight: var(--jse-theme-color-highlight);
  --jse-button-primary-background-disabled: #9d9d9d;
  --jse-button-primary-color: var(--jse-text-color-inverse);
  --jse-a-color: #156fc5;
  --jse-a-color-highlight: #0f508d;

  /* messages */
  --jse-message-error-background: var(--jse-error-color);
  --jse-message-error-color: var(--jse-text-color-inverse);
  --jse-message-warning-background: #ffde5c;
  --jse-message-warning-color: var(--jse-text-color);
  --jse-message-success-background: #9ac45d;
  --jse-message-success-color: var(--jse-text-color-inverse);
  --jse-message-info-background: #9d9d9d;
  --jse-message-info-color: var(--jse-text-color-inverse);
  --jse-message-action-background: rgba(255, 255, 255, 0.2);
  --jse-message-action-background-highlight: rgba(255, 255, 255, 0.3);

  /* svelte-select */
  --itemIsActiveBG: #3883fa;
  --border: 1px solid #d8dbdf;
  --borderRadius: 3px;
  --background: #fff;

  /* color picker */
  --jse-color-picker-background: var(--jse-panel-background);
  --jse-color-picker-border-box-shadow: #cbcbcb 0 0 0 1px;
}
</style>

🔨Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:3080
npm run dev

# build for production with minification
npm run build

vue3-ts-jsoneditor dependencies

immutable-json-patch vanilla-jsoneditor vue

vue3-ts-jsoneditor development dependencies

@rushstack/eslint-patch @types/jsoneditor @types/node @vitejs/plugin-vue @vue/eslint-config-prettier @vue/eslint-config-typescript @vue/tsconfig eslint eslint-plugin-vue npm-run-all prettier sass typescript vite vite-plugin-chunk-split vite-plugin-dts vite-plugin-env-config vite-plugin-libcss vue-tsc

FAQs

What is vue3-ts-jsoneditor?

[![npm version](https://badge.fury.io/js/vue3-ts-jsoneditor.svg)](https://badge.fury.io/js/vue3-ts-jsoneditor) ![NPM](h... Visit Snyk Advisor to see a full health score report for vue3-ts-jsoneditor, including popularity, security, maintenance & community analysis.

Is vue3-ts-jsoneditor popular?

The npm package vue3-ts-jsoneditor receives a total of 1,680 weekly downloads. As such, vue3-ts-jsoneditor popularity was classified as small. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is vue3-ts-jsoneditor well maintained?

We found indications that vue3-ts-jsoneditor maintenance is sustainable demonstrating some project activity. We saw a total of 3 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is vue3-ts-jsoneditor safe to use?

The npm package vue3-ts-jsoneditor was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 7 November-2024, at 00:51 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (1,680)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Readme

🇺🇦🇺🇦🇺🇦 Stand With Ukraine 🇺🇦🇺🇦🇺🇦

vue3-ts-jsoneditor

Powered by svelte-jsoneditor

🚀 Advantages

🕹 Demo

✳️ For Nuxt

☑️ Installation

✅ Using

👉 Import globally

🌎 Global options

👉 Import locally

👉 Use in template

❗️❗️❗️ Important

☑️ Slots

☑️ Props

☑️ Events

☑️ Use expose functions

🟥🟧🟨🟩🟦🟪️ Styling

🔨Build Setup

vue3-ts-jsoneditor dependencies

vue3-ts-jsoneditor development dependencies

FAQs

What is vue3-ts-jsoneditor?

Is vue3-ts-jsoneditor popular?

Is vue3-ts-jsoneditor well maintained?

Is vue3-ts-jsoneditor safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues