update README.md

README.md

@@ -1,12 +1,43 @@
 <div align="center">
-  <img width="512" alt="json visio logo" src="https://user-images.githubusercontent.com/47941171/161961529-8d617a59-2439-4f5a-b918-bde12da5bcf8.png">
+  <a href="https://jsonvisio.com">
+    <img width="512" alt="json visio logo" src="https://user-images.githubusercontent.com/47941171/161961529-8d617a59-2439-4f5a-b918-bde12da5bcf8.png">
+  </a>
+  <h1 align="center">JSON Visio (jsonvisio.com)</h1>
 </div>
+<hr />
 
-# JSON Visio (jsonvisio.com)
+<div>
+    <p align="center">
+      <img alt="travis ci badge" src="https://img.shields.io/travis/com/AykutSarac/jsonvisio.com/main?style=flat-square" />
+      <a href="https://github.com/AykutSarac/jsonvisio.com/blob/main/LICENSE">
+      <img alt="license badge" src="https://img.shields.io/github/license/AykutSarac/jsonvisio.com?style=flat-square" />
+      </a>
+      <a href="https://opencollective.com/jsonvisio">
+      <img alt="open collective badge" src="https://img.shields.io/opencollective/backers/jsonvisio.com?style=flat-square" />
+      </a>
+      <a href="https://github.com/AykutSarac/jsonvisio.com/releases">
+      <img alt="version badge" src="https://img.shields.io/github/package-json/v/AykutSarac/jsonvisio.com?color=green&style=flat-square" />
+      </a>
+  </p>
+  <p align="center">
+    <i>Simple json visualization tool for your data.</i>
+  </p>
+  <img width="800" src="https://github.com/AykutSarac/jsonvisio.com/blob/main/public/preview.png" alt="preview 1" />
+
+  <p align="center">
+    <h2 align="center">Support JSON Visio<h2>
+    </p>
+  <p align="center">
+    <a href="https://www.producthunt.com/posts/json-visio?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-json&#0045;visio" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=332281&theme=light" alt="JSON&#0032;Visio - Simple&#0032;visualization&#0032;tool&#0032;for&#0032;your&#0032;JSON&#0032;data&#0046; | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+    <a href="https://www.patreon.com/bePatron?u=55924790" data-patreon-widget-type="become-patron-button">
+  <img height="54" alt="Become_a_patron" src="https://user-images.githubusercontent.com/47941171/161963362-78d9121c-99b8-4194-aaf7-2cef35b7f599.png">
+    </a>
+  </p>
+</div>
 
 JSON Visio is data visualization tool for your json data which seamlessly illustrates your data on graphs without having to restructure anything, paste directly or import file.
 
-<b><a href="https://jsonvisio.com">jsonvisio.com</a></b>
+> <b><a href="https://jsonvisio.com">JSON Visio - Directly into graphs</a></b>
 
 ## ⚡️ Features
 
@@ -19,23 +50,20 @@ JSON Visio is data visualization tool for your json data which seamlessly illust
 * Friendly UI
 * Light/Dark Mode
 
-## ❤️ Support JSON Visio
-
-<div align="center">
-<a href="https://www.producthunt.com/posts/json-visio?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-json&#0045;visio" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=332281&theme=light" alt="JSON&#0032;Visio - Simple&#0032;visualization&#0032;tool&#0032;for&#0032;your&#0032;JSON&#0032;data&#0046; | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
-
-<a href="https://www.patreon.com/bePatron?u=55924790" data-patreon-widget-type="become-patron-button">
-  <img height="54" alt="Become_a_patron" src="https://user-images.githubusercontent.com/47941171/161963362-78d9121c-99b8-4194-aaf7-2cef35b7f599.png">
-</a>
-</div>
 
 ## 🧩 Preview
 
 <div align="center">
-  <img width="800" src="https://github.com/AykutSarac/jsonvisio.com/blob/main/public/preview.png" alt="preview 1" />
   <img width="800" src="https://github.com/AykutSarac/jsonvisio.com/blob/main/public/preview_2.png" alt="preview 1" />
   </div>
 
+## 🛠 Development Setup
+
+```sh
+  npm install
+  npm run dev
+```
+
 ## License
 
 This project is open source and available under the [MIT License](LICENSE).