https://github.com/agneym/json-formatter

An extensible JSON Viewer, Editor, Formatter, Validator based on Monaco Editor
https://github.com/agneym/json-formatter

formatter javascript json react styled-components

Last synced: about 2 months ago
JSON representation

An extensible JSON Viewer, Editor, Formatter, Validator based on Monaco Editor

• Host: GitHub
• URL: https://github.com/agneym/json-formatter
• Owner: agneym
• License: mit
• Created: 2019-07-02T11:20:39.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-03T09:47:51.000Z (almost 2 years ago)
• Last Synced: 2024-05-01T15:15:25.925Z (8 months ago)
• Topics: formatter, javascript, json, react, styled-components
• Language: JavaScript
• Homepage: https://jsoncrew.agney.dev/
• Size: 4.69 MB
• Stars: 45
• Watchers: 3
• Forks: 11
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# JSON Crew

[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)

![badge](https://action-badges.now.sh/agneym/json-formatter)

[![Netlify Status](https://api.netlify.com/api/v1/badges/3748ee21-7ff9-434c-b59b-64ad757e72e5/deploy-status)](https://app.netlify.com/sites/jsoncrew/deploys)







[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)

An extensible JSON Viewer, Editor, Formatter and Validator that works completely on the client side. 

## Features

1. JSON Viewer & Editor

1. JSON Formatting with options.

1. JSON Validation with respect to readily available schemas (with option to bring your own schema)

1. PWA - You can install this directly from your browser.

1. Upload JSON from your system or load directly from URL

1. Download formatted JSON

1. Share JSON with peer to peer

1. Search & Replace words/expressions with support for case matching, regular expressions

1. Multi-cursor editing support

1. Editor theming support

1. Supports Plugins to extend Functionality.

## How to create a JC Plugin

JSON Crew Plugin system is based on Web Components.

It gives the JSON data entered by the user as input to the web component and allows it to render the UI for plugin area. From here, you can transform the JSON and emit a custom event `json-transform` with transformed JSON as the transformation response.

1. Web Component gets `data` as input

2. Render UI and allow user to configure the transformation

3. Emit a custom event `json-transform` to show the transformed JSON to the user.

4. Give me a PR editing the [listing file](https://github.com/agneym/json-formatter/blob/master/src/components/Plugins/pluginDir.js)

[Tutorial Blog](https://dev.to/boywithsilverwings/creating-a-json-crew-plugin-2l55)

A Starting Template with [Lit Element](https://lit-element.polymer-project.org) can be found [here](https://github.com/agneym/jc-json-utils)

## Contributing

```

npm install

npm start

```

Development server started at http://localhost:3000.

For more details, view [Contributing Guidelines](.github/CONTRIBUTING.md)



  



## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
Amal Jose A
🔌

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!