/JSON-previewer

Preview Json in the form of an interactive diagram

Primary LanguageJavaScript

🔗 Links

portfolio twitter

Overview

A web application for JSON visualization and interaction, generated images are downloadable.

Stack

  • React.js
  • Scss
  • Css

Features

  • Tabs
  • Preview Board
  • Code editor
  • Zoom In/out
  • Focus control
  • Lock
  • Download Button

How It Works

Users can easily interact with the code editor and type in JSON structured code.

The code editor has a debugging feature - red indicator that shows error exist in the code. So, It can't be previewed until the bug is fixed.

At the bottom-left, it has features which allows:

  • Zoom in or out from the workspace.
  • Fit to view for easy switching on the vertical or horizontal direction.
  • Lock to restrict the diagram generated from further edit or distortion.

At the top-right, there is:

  • Download to the diagrams
  • Orientation adjustment button for custom view.

Installation

  1. Clone the repository
git clone https://github.com/iBz-04/JSON-previewer.git
  1. Change the working directory
cd json-preview
  1. Install dependencies
npm install
  1. Run the app
npm start

You can now see it at http://localhost:3000 in your browser.

Feedback

If you have any feedback, please reach out to us ibz.04dev@gmail.com

Authors