<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="/favicon.png" type="image/png">
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap"></noscript>
    <title>DataJelly - The Visibility Layer for Modern Apps</title>
    <meta name="description" content="Ensure your React, Lovable, or v0 app looks perfect everywhere. DataJelly generates rich social previews for Slack and Twitter while making your content readable by ChatGPT and Perplexity." />
    <meta name="author" content="DataJelly" />
    <meta name="keywords" content="app visibility, social previews, OG images, link unfurling, AI SEO, ChatGPT visibility, Perplexity, Slack previews, Twitter cards, iMessage previews, React SEO, Lovable SEO, v0 SEO, JavaScript SEO, SPA SEO, prerendering, bot-friendly HTML" />

    <meta property="og:title" content="DataJelly - The Visibility Layer for Modern Apps" />
    <meta property="og:description" content="Rich social previews for Slack & Twitter. AI-readable content for ChatGPT & Perplexity. Zero-code setup." />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="https://datajelly.com/datajelly-og-image.png" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="DataJelly - The Visibility Layer for Modern Apps" />
    <meta name="twitter:description" content="Rich social previews for Slack & Twitter. AI-readable content for ChatGPT & Perplexity." />
    <meta name="twitter:image" content="https://datajelly.com/datajelly-og-image.png" />

    <link rel="canonical" href="https://datajelly.com/" />

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "SoftwareApplication",
      "name": "DataJelly",
      "description": "The visibility layer for modern apps. Rich social previews, AI-readable content, and SEO-optimized snapshots for React, Lovable, and v0 apps.",
      "url": "https://datajelly.com",
      "applicationCategory": "WebApplication",
      "operatingSystem": "Web",
      "offers": {
        "@type": "AggregateOffer",
        "lowPrice": "0",
        "highPrice": "75",
        "priceCurrency": "USD",
        "offerCount": "4"
      },
      "provider": {
        "@type": "Organization",
        "name": "DataJelly",
        "url": "https://datajelly.com",
        "logo": "https://datajelly.com/favicon.png"
      }
    }
    </script>

    <!-- Deferred Google Tag Manager — loads after page is interactive -->
    <script>
    window.addEventListener('load', function() {
      setTimeout(function() {
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-WHTS4RGJ');
      }, 100);
    });
    </script>

    <!-- Early module discovery — module scripts are deferred by spec -->
    <script type="module" crossorigin src="/assets/index-heM00BqN.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/supabase-BcDzVCz0.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-LrDKCtZB.js">
    <link rel="modulepreload" crossorigin href="/assets/radix-dWX2f9Nu.js">
    <link rel="modulepreload" crossorigin href="/assets/syntax-BtNtcTQD.js">
    <link rel="modulepreload" crossorigin href="/assets/seo-shared-phmQkX8f.js">
    <link rel="stylesheet" crossorigin href="/assets/index-C6umlJNG.css">
  </head>

  <body>
    <div id="root"><div style="height:100vh;display:flex;flex-direction:column;background:#f8faf8"><div style="height:56px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;padding:0 16px"><div style="font-size:20px;font-weight:700;color:#1a6b3c">DataJelly</div></div><div style="flex:1;display:flex;align-items:center;justify-content:center"><div style="width:32px;height:32px;border:3px solid #1a6b3c;border-top-color:transparent;border-radius:50%;animation:djspin 1s linear infinite"></div></div></div><style>@keyframes djspin{to{transform:rotate(360deg)}}</style></div>
  </body>
</html>
