Documentation - JSON Crack

import React from "react"; import Head from "next/head"; import { Group, Paper, Stack, Text, Title } from "@mantine/core"; import { CodeHighlight } from "@mantine/code-highlight"; import styled from "styled-components"; import Layout from "src/layout/Layout"; const StyledFrame = styled.iframe` border: none; width: 80%; flex: 500px; margin: 3% auto; `; const StyledContentBody = styled.div` display: flex; flex-direction: column; flex-wrap: wrap; gap: 15px; line-height: 1.8; overflow-x: auto; `; const StyledHighlight = styled.span<{ $link?: boolean; $alert?: boolean }>` display: inline-block; text-align: left; color: ${({ theme, $link, $alert }) => $alert ? theme.DANGER : $link ? theme.BLURPLE : theme.TEXT_POSITIVE}; background: ${({ theme }) => theme.BACKGROUND_TERTIARY}; border-radius: 4px; font-weight: 500; padding: 2px 4px; font-size: 14px; margin: ${({ $alert }) => ($alert ? "8px 0" : "1px")}; `; const Docs = () => { return ( Documentation - JSON Crack Documentation # Fetching from URL By adding ?json=https://catfact.ninja/fact query at the end of iframe src you will be able to fetch from URL at widgets without additional scripts. This applies to editor page as well, the following link will fetch the url at the editor:{" "} https://jsoncrack.com/editor?json=https://catfact.ninja/fact See the Pen Untitled by Aykut Saraç (@AykutSarac) on{" "} CodePen. # Embed Saved JSON Just like fetching from URL above, you can embed saved public json by adding the json id to "json" query{" "} ?json=639b65c5a82efc29a24b2de2 See the Pen Untitled by Aykut Saraç (@AykutSarac) on{" "} CodePen. # Communicating with API ◼︎ Post Message to Embed Communicating with the embed is possible with{" "} MessagePort , you should pass an object consist of "json" and "options" key where json is a string and options is an object that may contain the following: See the Pen Untitled by Aykut Saraç (@AykutSarac) on{" "} CodePen. ◼︎ On Page Load ⚠️ Important! - iframe should be defined before the script tag ⚠️ Note - Widget is not loaded immediately with the parent page. The widget sends its id attribute so you can listen for it as in the example below to ensure its loaded and ready to listen for messages. See the Pen Untitled by Aykut Saraç (@AykutSarac) on{" "} CodePen. ); }; export default Docs;