react-json-view vs jsoneditor vs ang-jsoneditor vs jsoneditor-react
JSON Editing Libraries for Web Development Comparison
Search packages..
1 Year
react-json-viewjsoneditorang-jsoneditorjsoneditor-reactSimilar Packages:
What's JSON Editing Libraries for Web Development?

These libraries provide tools for visualizing and editing JSON data in web applications. They cater to different frameworks and use cases, allowing developers to integrate JSON editing capabilities into their applications seamlessly. Each library has unique features and design principles that make them suitable for various scenarios, from simple JSON viewing to complex editing functionalities.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-json-view641,5383,522-1804 years agoMIT
jsoneditor199,52411,7668.09 MB2298 days agoApache-2.0
ang-jsoneditor36,98315971.2 kB274 months agoMIT
jsoneditor-react25,94827065 kB43-MIT
Feature Comparison: react-json-view vs jsoneditor vs ang-jsoneditor vs jsoneditor-react

Framework Compatibility

  • react-json-view:

    Tailored for React, react-json-view is optimized for use within React applications, allowing for easy integration and customization while adhering to React's principles.

  • jsoneditor:

    Framework-agnostic, jsoneditor can be used in any web application regardless of the framework, making it versatile for developers who work across different technologies.

  • ang-jsoneditor:

    Designed specifically for Angular applications, ang-jsoneditor utilizes Angular's features such as dependency injection and reactive forms, ensuring a smooth integration with Angular's ecosystem.

  • jsoneditor-react:

    Built for React, jsoneditor-react takes full advantage of React's component lifecycle and state management, providing a seamless experience for React developers.

User Interface

  • react-json-view:

    react-json-view presents a clean and minimalistic UI for displaying JSON data, allowing users to expand and collapse objects and arrays, making it easy to navigate large datasets.

  • jsoneditor:

    jsoneditor offers a rich and interactive UI with a tree structure and text editor, enabling users to visualize and manipulate JSON data intuitively, suitable for both developers and non-developers.

  • ang-jsoneditor:

    ang-jsoneditor features a user-friendly interface that allows users to easily navigate and edit JSON data with a tree view and text editor, providing a familiar experience for Angular users.

  • jsoneditor-react:

    jsoneditor-react inherits the interactive UI of jsoneditor, providing a consistent and responsive experience for React applications, with easy-to-use editing capabilities.

Customization and Extensibility

  • react-json-view:

    react-json-view is designed for easy customization, enabling developers to modify styles and behaviors through props, making it a flexible choice for React projects.

  • jsoneditor:

    jsoneditor is highly customizable, allowing developers to modify its appearance and behavior through configuration options, making it adaptable to various use cases.

  • ang-jsoneditor:

    ang-jsoneditor allows for customization through Angular's component architecture, enabling developers to extend functionality and tailor the editor to their specific needs within Angular applications.

  • jsoneditor-react:

    jsoneditor-react provides customization options that align with React's component-based design, allowing developers to create tailored JSON editing experiences.

Performance

  • react-json-view:

    react-json-view is lightweight and optimized for performance, ensuring quick rendering and interaction even with large JSON objects, making it ideal for applications with extensive data.

  • jsoneditor:

    jsoneditor is designed for performance, handling large JSON datasets efficiently while providing a responsive user experience during editing and viewing.

  • ang-jsoneditor:

    Performance in ang-jsoneditor is optimized for Angular applications, leveraging Angular's change detection mechanisms to ensure efficient updates and rendering of JSON data.

  • jsoneditor-react:

    jsoneditor-react benefits from React's virtual DOM, ensuring high performance during updates and rendering, making it suitable for applications that require real-time JSON editing.

Learning Curve

  • react-json-view:

    react-json-view is simple to integrate and use within React applications, making it accessible for developers looking for a quick solution to display and edit JSON data.

  • jsoneditor:

    jsoneditor has a gentle learning curve, suitable for developers of all skill levels, as it provides a straightforward API and user interface for JSON manipulation.

  • ang-jsoneditor:

    The learning curve for ang-jsoneditor is moderate, especially for developers familiar with Angular, as it integrates seamlessly into Angular applications and follows Angular's conventions.

  • jsoneditor-react:

    Developers with React experience will find jsoneditor-react easy to learn, as it follows React's principles and utilizes familiar patterns for state management and component lifecycle.

How to Choose: react-json-view vs jsoneditor vs ang-jsoneditor vs jsoneditor-react
  • react-json-view:

    Use react-json-view if you need a lightweight, easy-to-use JSON viewer and editor specifically designed for React. It offers a simple API and is highly customizable, making it ideal for projects that require quick integration and minimal overhead.

  • jsoneditor:

    Opt for jsoneditor if you are looking for a standalone, framework-agnostic solution that can be easily integrated into any web application. It offers a rich set of features for editing and visualizing JSON data, making it suitable for various use cases without being tied to a specific framework.

  • ang-jsoneditor:

    Choose ang-jsoneditor if you are working within an Angular application and need a JSON editor that integrates well with Angular's reactive forms and dependency injection. It provides a native Angular experience, making it easier to manage state and lifecycle events.

  • jsoneditor-react:

    Select jsoneditor-react if you are developing a React application and want a JSON editor that leverages React's component-based architecture. It provides a seamless integration with React's state management, making it easier to handle JSON data within your React components.

Similar Npm Packages to react-json-view

react-json-view is a React component that allows developers to display and edit JSON data in a user-friendly format. This package is particularly useful for debugging and visualizing complex data structures, making it easier for developers to understand and manipulate JSON data directly within their applications. With features like collapsible nodes, syntax highlighting, and the ability to edit values inline, react-json-view provides a powerful tool for anyone working with JSON data in React.

An alternative to react-json-view is react-json-tree. This library also provides a way to visualize JSON data, but it focuses on rendering the data in a tree structure. react-json-tree is designed to be lightweight and customizable, allowing developers to tailor the appearance and behavior of the tree to fit their application's needs. It supports features like styling, expandable nodes, and the ability to handle large datasets efficiently.

For a detailed comparison of these two packages, check out the following link: Comparing react-json-view vs react-json-tree.

Similar Npm Packages to jsoneditor

jsoneditor is a versatile JavaScript library that provides a web-based interface for viewing, editing, and formatting JSON data. It allows users to interactively manipulate JSON structures, making it an excellent tool for developers and data analysts who frequently work with JSON. While jsoneditor offers a robust solution for JSON manipulation, there are several alternatives in the React ecosystem that cater to similar needs. Here are a few noteworthy options:

  • jsoneditor-react is a React wrapper for the jsoneditor library. It allows developers to integrate the powerful JSON editing capabilities of jsoneditor directly into their React applications. With jsoneditor-react, you can easily embed a JSON editor in your React components, providing a seamless experience for users who need to view and edit JSON data. This package is ideal for those who want to leverage the features of jsoneditor while maintaining the React component structure.

  • react-json-editor-ajrm is another React-based JSON editor that offers a user-friendly interface for editing JSON data. It provides features such as syntax highlighting, validation, and error handling, making it easy for users to work with complex JSON structures. This package is particularly useful for applications that require a straightforward and intuitive way to edit JSON data while ensuring that the data remains valid.

  • react-json-view is a simple and lightweight component for displaying and editing JSON data in React applications. It provides a clean and organized view of JSON objects, allowing users to expand and collapse nested structures. While it focuses more on displaying JSON data rather than extensive editing capabilities, it is an excellent choice for applications that need a quick and easy way to visualize JSON.

  • react-jsonschema-form is a library for building forms in React applications based on JSON Schema. While it serves a different purpose than the other libraries mentioned, it allows developers to create dynamic forms that can validate and manage JSON data. This package is particularly useful for applications that require user input and need to ensure that the data adheres to a specific schema.

To explore how these packages compare, check out the comparison link: Comparing jsoneditor vs jsoneditor-react vs react-json-editor-ajrm vs react-json-view vs react-jsonschema-form.

Similar Npm Packages to ang-jsoneditor

ang-jsoneditor is an Angular wrapper for the popular JSON editor library, allowing developers to easily visualize and edit JSON data structures within Angular applications. It provides a user-friendly interface for manipulating JSON data, making it suitable for applications that require JSON data management. While ang-jsoneditor is a great choice for Angular developers, there are several alternatives available that cater to different frameworks and use cases. Here are a few notable alternatives:

  • jsoneditor is a standalone JavaScript library that provides a web-based interface for viewing and editing JSON data. It is framework-agnostic, meaning it can be used with any JavaScript framework or even vanilla JavaScript. jsoneditor offers a rich set of features, including tree and code views, search functionality, and the ability to validate JSON data. This library is ideal for developers looking for a versatile JSON editor that can be easily integrated into various projects.
  • jsoneditor-react is a React-specific wrapper for the jsoneditor library. It allows React developers to seamlessly integrate JSON editing capabilities into their applications while leveraging React's component-based architecture. jsoneditor-react provides a simple API for rendering the JSON editor and managing its state, making it a suitable choice for React applications that require JSON data manipulation.
  • react-json-view is another React component that provides a simple way to display and edit JSON data. It offers a clean and interactive interface for viewing JSON structures, with features like collapsible nodes, syntax highlighting, and the ability to edit values directly. react-json-view is lightweight and easy to use, making it a great option for developers who need a straightforward solution for displaying and editing JSON data in their React applications.

To see how ang-jsoneditor compares with jsoneditor, jsoneditor-react, and react-json-view, check out the comparison: Comparing ang-jsoneditor vs jsoneditor vs jsoneditor-react vs react-json-view.

Similar Npm Packages to jsoneditor-react

jsoneditor-react is a React wrapper for the popular JSON Editor library, which allows developers to visualize, edit, and manipulate JSON data in a user-friendly interface. This package provides a simple way to integrate a powerful JSON editor into React applications, making it easier for users to interact with JSON data. While jsoneditor-react is a robust solution, there are several alternatives available that cater to similar needs. Here are a few noteworthy options:

  • jsoneditor is the core library that jsoneditor-react wraps. It provides a versatile and interactive interface for editing JSON data. This library can be used independently of React and is suitable for any web application that requires JSON manipulation. If you are not specifically looking for a React integration, using jsoneditor directly might be a good choice.

  • react-json-editor-ajrm is a React component for editing JSON data that offers a clean and intuitive interface. It is designed to be easy to use and integrates well with React applications. This library is particularly useful for developers who want a straightforward JSON editing experience without the additional features that might come with more complex libraries.

  • react-json-tree is a React component that displays JSON data in a tree structure. It allows users to explore and visualize JSON data easily. While it does not provide editing capabilities like jsoneditor-react, it is an excellent choice for applications that require a read-only view of JSON data in a structured format.

  • react-json-view is another React component that provides a way to display JSON data in a collapsible tree format. It offers features like editing, copying, and expanding/collapsing nodes, making it a versatile option for both viewing and interacting with JSON data. If you need a balance between visualization and editing, react-json-view is worth considering.

  • react-jsonschema-form is a library that allows developers to create forms based on JSON Schema. It is particularly useful for applications that require dynamic form generation based on JSON data structures. While it serves a different purpose than jsoneditor-react, it is a valuable tool for managing JSON data in form-based applications.

For a comprehensive comparison of these packages, check out the following link: Comparing jsoneditor vs jsoneditor-react vs react-json-editor-ajrm vs react-json-tree vs react-json-view vs react-jsonschema-form.

README for react-json-view

alt text

npm npm Build Status Coverage Status

react-json-view

RJV is a React component for displaying and editing javascript arrays and JSON objects.

This component provides a responsive interface for displaying arrays or JSON in a web browser. NPM offers a distribution of the source that's transpiled to ES5; so you can include this component with any web-based javascript application.

Check out the Interactive Demo

Implementation Example

// import the react-json-view component
import ReactJson from 'react-json-view'

// use the component in your app!
<ReactJson src={my_json_object} />

Output Examples

Default Theme

alt text

Hopscotch Theme, with Triangle Icons:

alt text

Installation Instructions

Install this component with NPM.

npm install --save react-json-view

Or add to your package.json config file:

"dependencies": {
    "react-json-view": "latest"
}

Props

Name|Type|Default|Description |:---|:---|:---|:--- src|JSON Object|None|This property contains your input JSON name|string or false|"root"|Contains the name of your root node. Use null or false for no name. theme|string|"rjv-default"|RJV supports base-16 themes. Check out the list of supported themes in the demo. A custom "rjv-default" theme applies by default. style|object|{}|Style attributes for react-json-view container. Explicit style attributes will override attributes provided by a theme. iconStyle|string|"circle"| Style of expand/collapse icons. Accepted values are "circle", triangle" or "square". indentWidth|integer|4|Set the indent-width for nested objects collapsed|boolean or integer|false|When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. collapseStringsAfterLength|integer|false|When an integer value is assigned, strings will be cut off at that length. Collapsed strings are followed by an ellipsis. String content can be expanded and collapsed by clicking on the string value. shouldCollapse|(field)=>{}|false|Callback function to provide control over what objects and arrays should be collapsed by default. An object is passed to the callback containing name, src, type ("array" or "object") and namespace. groupArraysAfterLength|integer|100|When an integer value is assigned, arrays will be displayed in groups by count of the value. Groups are displayed with bracket notation and can be expanded and collapsed by clicking on the brackets. enableClipboard|boolean or (copy)=>{}|true|When prop is not false, the user can copy objects and arrays to clipboard by clicking on the clipboard icon. Copy callbacks are supported. displayObjectSize|boolean|true|When set to true, objects and arrays are labeled with size displayDataTypes|boolean|true|When set to true, data type labels prefix values onEdit|(edit)=>{}|false|When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed. Returning false from onEdit will prevent the change from being made. see: onEdit docs onAdd|(add)=>{}|false|When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed. Returning false from onAdd will prevent the change from being made. see: onAdd docs defaultValue|string \|number \|boolean \|array \|object|null|Sets the default value to be used when adding an item to json onDelete|(delete)=>{}|false|When a callback function is passed in, delete functionality is enabled. The callback is invoked before deletions are completed. Returning false from onDelete will prevent the change from being made. see: onDelete docs onSelect|(select)=>{}|false|When a function is passed in, clicking a value triggers the onSelect method to be called. sortKeys|boolean|false|set to true to sort object keys quotesOnKeys|boolean|true|set to false to remove quotes from keys (eg. "name": vs. name:) validationMessage|string|"Validation Error"|Custom message for validation failures to onEdit, onAdd, or onDelete callbacks displayArrayKey|boolean|true|When set to true, the index of the elements prefix values

Features

  • onEdit, onAdd and onDelete props allow users to edit the src variable
  • Object, array, string and function values can be collapsed and expanded
  • Object and array nodes display length
  • Object and array nodes support a "Copy to Clipboard" feature
  • String values can be truncated after a specified length
  • Arrays can be subgrouped after a specified length
  • Base-16 Theme Support
  • When onEdit is enabled:
    • Ctrl/Cmd+Click Edit Mode
    • Ctrl/Cmd+Enter Submit

Customizing Style

Stock Themes

RJV now supports base-16 themes!

You can specify a theme name or object when you instantiate your rjv component.

<ReactJson src={my_important_json} theme="monokai" />

Check out the list of supported themes in the component demo.

Monokai theme example

alt text

Solarized theme example

alt text

Use Your Own Theme

You can supply your own base-16 theme object.

To better understand custom themes, take a look at my example implementation and the base-16 theme styling guidelines.

onEdit, onAdd and onDelete Interaction

Pass callback methods to onEdit, onAdd and onDelete props. Your method will be invoked when a user attempts to update your src object.

The following object will be passed to your method:

{
    updated_src: src, //new src value
    name: name, //new var name
    namespace: namespace, //list, namespace indicating var location
    new_value: new_value, //new variable value
    existing_value: existing_value, //existing variable value
}

Returning false from a callback method will prevent the src from being affected.

Contributing to the source code

Run the Dev Server

# clone this repository
git clone git@github.com:mac-s-g/react-json-view.git && cd react-json-view
# install dependencies
npm install --save-dev
# run the dev server with hot reloading
npm run dev

Webpack Dev Server should automatically open up http://localhost:2000 in your web browser. If it does not, open a browser and navigate to port 2000. The hot reloader will automatically reload when files are modified in the /src/ directory.

Run the Production Build

# run the build (note: you may need to use `sudo` priveledges to run the build successfully)
npm run build

Please add tests for your code before posting a pull request.

You can run the test suite with npm run test or npm run test:watch to automatically reload when files are modified.

Docker Tools

I recommend using docker for development because it enforces environmental consistency.

For information about contributing with Docker, see the README in ./docker.

Inspiration

I drew a ton of design ideas from react-json-tree. Thanks to the RJT contributors for putting together an awesome component!

I'm also inspired by users who come up with interesting feature requests. Reach out to me with ideas for this project or other projects you want to collaborate on. My email address is listed on my github user page.

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc or npmjs.com, the official website for the npm registry. Please note that npm is a registered trademark of npm, Inc. For more details, please refer to our Terms & Privacy.