import React from "react"; import Head from "next/head"; import Link from "next/link"; import { useRouter } from "next/router"; import { TwitterTweetEmbed } from "react-twitter-embed"; import { FaGithub, FaHeart, FaLinkedin, FaTwitter } from "react-icons/fa"; import { HiCursorClick, HiLightningBolt, HiOutlineDownload, HiOutlineSearchCircle, } from "react-icons/hi"; import { Producthunt } from "src/components/Producthunt"; import { CarbonAds } from "src/components/CarbonAds"; import { Sponsors } from "src/components/Sponsors"; import { GoalsModal } from "src/containers/Modals/GoalsModal"; import pkg from "../../../package.json"; import * as Styles from "./styles"; const Home: React.FC = () => { const { push } = useRouter(); const [isModalVisible, setModalVisible] = React.useState(false); const [isMobile, setIsMobile] = React.useState(false); React.useEffect(() => { setIsMobile(window.screen.width <= 768); }, []); return ( JSON Crack - Crack your data into pieces Editor Features Sponsor GitHub JSON Crack Seamlessly visualize your JSON data{" "} instantly{" "} into graphs. Paste - Import - Fetch! window.location.replace("/editor")} disabled={isMobile} > {isMobile ? "Incompatible Device" : "GO TO EDITOR"} {!isMobile && ( <> setModalVisible(true)}> Help JSON Crack Accomplish It's Goals )} EASY-TO-USE Don't even bother to update your schema to view your JSON into graphs; directly paste, import or fetch! JSON Crack helps you to visualize without any additional values and save your time. SEARCH Have a huge file of values, keys or arrays? Worry no more, type in the keyword you are looking for into search input and it will take you to each node with matching result highlighting the line to understand better! DOWNLOAD Download the graph to your local machine and use it wherever you want, to your blogs, website or make it a poster and paste to the wall. Who wouldn't want to see a JSON Crack graph onto their wall, eh? LIVE With Microsoft's Monaco Editor which is also used by VS Code, easily edit your JSON and directly view through the graphs. Also there's a JSON validator above of it to make sure there is no type error. Open Source Community Join the Open Source Community by suggesting new ideas, support by contributing; implementing new features, fixing bugs and doing changes minor to major! push("https://github.com/AykutSarac/jsoncrack.com")} status="SECONDARY" > STAR ON GITHUB Embed Into Your Website Easily embed the JSON Crack graph into your website to showcase your visitors, blog readers or anybody else!
Support JSON Crack at
Product Hunt
Affiliate
© 2022 JSON Crack - {pkg.version}
); }; export default Home;