index.html

---
layout: default
title: Home
---

<div class="hero-section">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-6">
        <h1 class="display-5 fw-bold mb-4">
          <span class="d-block">API Client + LLM Agent</span>
          <span class="d-block fs-1 fw-normal mt-2">
            <span class="animated-adjective">Simple</span>
          </span>
        </h1>
        <p class="lead mb-4">
          Run existing collections <strong><em>as-is</em></strong>. Connect your LLM to automate browsers and test APIs. <strong>100% local</strong> — your secrets never touch the cloud.
        </p>
        <div class="d-flex gap-3 mb-4">
          <button id="download-btn" class="btn btn-primary btn-lg">
            <i class="bi bi-download me-2"></i>
            <span id="download-text">Download for <span id="os-name">Your OS</span></span>
          </button>
          <button class="btn btn-outline-primary btn-lg" data-bs-toggle="modal" data-bs-target="#downloadModal">
            <i class="bi bi-list me-2"></i>All Downloads
          </button>
          <button class="btn btn-outline-success btn-lg" data-bs-toggle="modal" data-bs-target="#videoModal">
            <i class="bi bi-play-circle me-2"></i>Watch Video
          </button>
        </div>
        <p class="text-muted small">
          <i class="bi bi-shield-lock me-1"></i>100% Local • Free Forever • LLM &amp; MCP Ready • Enterprise ready • macOS • Windows • Linux
        </p>
        <p class="text-muted small">
          Latest version: <strong><a href="https://github.com/karatelabs/xplorer/releases" class="text-decoration-none" id="version-link"><span id="version-number">2.0.1</span></a></strong> (<span id="release-date">2025-01-15</span>)
        </p>
        <div class="mt-3">
          <a href="https://www.producthunt.com/products/xplorer-api-client-done-right?embed=true&utm_source=badge-featured&utm_medium=badge&utm_source=badge-xplorer-api-client-done-right" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1040745&theme=light&t=1764059463149" alt="Xplorer - API Client, Done Right - A Secure, 100% Local API Client | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
        </div>
      </div>
      <div class="col-lg-6">
        <img src="{{ '/assets/images/docs/xplorer-ui.png' | relative_url }}" alt="Karate Xplorer Interface" class="img-fluid rounded shadow-lg">
      </div>
    </div>
  </div>
</div>

<div class="container my-5" id="features">
  <h2 class="text-center mb-5">Why Xplorer?</h2>
  <div class="row g-4">
    <div class="col-md-4">
      <div class="text-center">
        <div class="feature-icon text-primary">
          <i class="bi bi-cash-coin"></i>
        </div>
        <h4>No Limits. No Paywalls.</h4>
        <p class="text-muted">No sign-in required. Core features are free, forever. No artificial limits on API requests or test runs. No telemetry.</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="text-center">
        <div class="feature-icon text-primary">
          <i class="bi bi-shield-lock"></i>
        </div>
        <h4>100% Local - Zero Cloud</h4>
        <p class="text-muted">API keys, secrets and payloads stay on your machine. No CORS issues, no cloud access, and no agents to configure. Test localhost or anything within your firewall.</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="text-center">
        <div class="feature-icon text-primary">
          <i class="bi bi-arrow-repeat"></i>
        </div>
        <h4>Zero Migration Effort</h4>
        <p class="text-muted">Import and run existing collections and environments instantly. All standard formats and JS assertion syntax supported.</p>
      </div>
    </div>
  </div>

  <div class="row g-4 mt-4">
    <div class="col-md-4">
      <div class="text-center">
        <div class="feature-icon text-primary">
          <i class="bi bi-robot"></i>
        </div>
        <h4>LLM Agent &amp; MCP</h4>
        <p class="text-muted">Connect Claude Code, Copilot, or any LLM via curl or MCP. Your AI agent controls a real browser to explore, test, and automate — you describe the task in plain English.</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="text-center">
        <div class="feature-icon text-primary">
          <i class="bi bi-ui-checks"></i>
        </div>
        <h4>Familiar Interface</h4>
        <p class="text-muted">No need to learn a new UX. Simple UI with dark mode and theme support. Keyboard shortcuts, adjust font size, great for demos.</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="text-center">
        <div class="feature-icon text-primary">
          <i class="bi bi-pencil-square"></i>
        </div>
        <h4>Edit & Maintain</h4>
        <p class="text-muted">Edit existing tests and collections in-place. Preserve investments in API tests for as long as needed. Choose if (and when) to migrate.</p>
      </div>
    </div>
  </div>

  <div class="row g-4 mt-4">
    <div class="col-md-4">
      <div class="text-center">
        <div class="feature-icon text-primary">
          <i class="bi bi-building"></i>
        </div>
        <h4>Enterprise Ready</h4>
        <p class="text-muted">Simple install. Signed desktop app for Mac, Windows, and Linux. Ready for enterprise deployment.</p>
      </div>
    </div>
  </div>
</div>

<div class="cta-section py-5 mt-5">
  <div class="container text-center">
    <h2 class="mb-4">Ready to Get Started?</h2>
    <p class="lead mb-4">Download Xplorer and start using your existing collections today.</p>
    <button id="download-btn-bottom" class="btn btn-primary btn-lg">
      <i class="bi bi-download me-2"></i>
      <span id="download-text-bottom">Download v<span id="version-bottom">2.0.1</span> Now</span>
    </button>
    <p class="mt-3 text-muted small">
      <a href="https://github.com/karatelabs/xplorer/releases" class="text-decoration-none">View all releases</a> •
      <a href="{{ '/docs/faq' | relative_url }}" class="text-decoration-none">Have questions? Check our FAQ</a>
    </p>
  </div>
</div>

<!-- Video Modal -->
<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="videoModalLabel">Video Demo</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-0">
        <div class="ratio ratio-16x9">
          <iframe id="youtubeVideo" src="" title="Xplorer Demo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Download Modal -->
<div class="modal fade" id="downloadModal" tabindex="-1" aria-labelledby="downloadModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="downloadModalLabel">Download Karate Xplorer <small class="text-muted">v<span id="modal-version-number">2.0.1</span></small></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="list-group">
          <a href="#" id="download-mac-silicon" class="list-group-item list-group-item-action d-flex align-items-center">
            <i class="bi bi-apple fs-4 me-3"></i>
            <div>
              <h6 class="mb-0">macOS (Apple Silicon)</h6>
              <small class="text-muted">For M1, M2, M3 Macs</small>
            </div>
          </a>
          <a href="#" id="download-mac-intel" class="list-group-item list-group-item-action d-flex align-items-center">
            <i class="bi bi-apple fs-4 me-3"></i>
            <div>
              <h6 class="mb-0">macOS (Intel)</h6>
              <small class="text-muted">For Intel-based Macs</small>
            </div>
          </a>
          <a href="#" id="download-windows" class="list-group-item list-group-item-action d-flex align-items-center">
            <i class="bi bi-windows fs-4 me-3"></i>
            <div>
              <h6 class="mb-0">Windows</h6>
              <small class="text-muted">64-bit Windows installer</small>
            </div>
          </a>
          <a href="#" id="download-linux" class="list-group-item list-group-item-action d-flex align-items-center">
            <i class="bi bi-ubuntu fs-4 me-3"></i>
            <div>
              <h6 class="mb-0">Linux</h6>
              <small class="text-muted">Debian package (64-bit)</small>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // change this to update release location
  const VERSION = '2.2.0';
  const RELEASE_DATE = '2025-12-04'; // ISO format: YYYY-MM-DD
  const RELEASE_BASE_URL = 'https://github.com/karatelabs/xplorer/releases/download/v' + VERSION;  

  // Download file definitions
  const DOWNLOADS = {
    macSilicon: {
      file: `Xplorer-macosx-aarch64-${VERSION}.dmg`,
      name: 'macOS (Apple Silicon)',
      detectedOS: 'mac-silicon'
    },
    macIntel: {
      file: `Xplorer-macosx-x86_64-${VERSION}.dmg`,
      name: 'macOS (Intel)',
      detectedOS: 'mac-intel'
    },
    windows: {
      file: `Xplorer-win32-x86_64-${VERSION}.msi`,
      name: 'Windows',
      detectedOS: 'windows'
    },
    linux: {
      file: `Xplorer-linux-x86_64-${VERSION}.deb`,
      name: 'Linux',
      detectedOS: 'linux'
    }
  };

  function detectOS() {
    const userAgent = window.navigator.userAgent.toLowerCase();
    const platform = window.navigator.platform.toLowerCase();

    if (platform.includes('mac') || userAgent.includes('mac')) {
      // Detect Apple Silicon vs Intel
      // This is a heuristic - checking for arm64 in user agent or using feature detection
      if (userAgent.includes('arm') || (window.navigator.userAgentData &&
          window.navigator.userAgentData.platform === 'macOS')) {
        return 'mac-silicon';
      }
      return 'mac-intel';
    } else if (platform.includes('win') || userAgent.includes('win')) {
      return 'windows';
    } else if (platform.includes('linux') || userAgent.includes('linux')) {
      return 'linux';
    }
    return 'unknown';
  }

  function getDownloadUrl(downloadKey) {
    return `${RELEASE_BASE_URL}/${DOWNLOADS[downloadKey].file}`;
  }

  function getPrimaryDownload(os) {
    switch(os) {
      case 'mac-silicon': return { key: 'macSilicon', ...DOWNLOADS.macSilicon };
      case 'mac-intel': return { key: 'macIntel', ...DOWNLOADS.macIntel };
      case 'windows': return { key: 'windows', ...DOWNLOADS.windows };
      case 'linux': return { key: 'linux', ...DOWNLOADS.linux };
      default: return { key: 'macSilicon', ...DOWNLOADS.macSilicon };
    }
  }

  // Setup download links in modal
  document.getElementById('download-mac-silicon').href = getDownloadUrl('macSilicon');
  document.getElementById('download-mac-intel').href = getDownloadUrl('macIntel');
  document.getElementById('download-windows').href = getDownloadUrl('windows');
  document.getElementById('download-linux').href = getDownloadUrl('linux');

  // Set primary download buttons
  const os = detectOS();
  const primaryDownload = getPrimaryDownload(os);

  document.getElementById('os-name').textContent = primaryDownload.name;
  document.getElementById('download-btn').onclick = () => window.location.href = getDownloadUrl(primaryDownload.key);
  document.getElementById('download-btn-bottom').onclick = () => window.location.href = getDownloadUrl(primaryDownload.key);

  // Update version numbers and date in the UI
  document.getElementById('version-number').textContent = VERSION;
  document.getElementById('modal-version-number').textContent = VERSION;
  document.getElementById('version-bottom').textContent = VERSION;

  // Format date according to user's locale
  const releaseDate = new Date(RELEASE_DATE);
  const formattedDate = releaseDate.toLocaleDateString(undefined, {
    year: 'numeric',
    month: 'short',
    day: 'numeric'
  });
  document.getElementById('release-date').textContent = formattedDate;

  // Animated adjective rotation
  const adjectives = ['Simple', 'Easy', 'Lightweight', 'Capable', 'Local', 'Secure', 'Fast', 'AI Ready', 'Done Right.'];
  const adjectiveElement = document.querySelector('.animated-adjective');
  let currentIndex = 0;

  function rotateAdjective() {
    adjectiveElement.style.opacity = '0';
    setTimeout(() => {
      currentIndex = (currentIndex + 1) % adjectives.length;
      adjectiveElement.textContent = adjectives[currentIndex];
      adjectiveElement.style.opacity = '1';
    }, 300);
  }

  setInterval(rotateAdjective, 2000);

  // Video modal functionality
  const videoModal = document.getElementById('videoModal');
  const youtubeIframe = document.getElementById('youtubeVideo');
  const videoSrc = 'https://www.youtube.com/embed/ELekzGC7mC4?autoplay=1&si=KIRGR1PAJ1boC5xV';

  // Set video source when modal is shown
  videoModal.addEventListener('show.bs.modal', function () {
    youtubeIframe.src = videoSrc;
  });

  // Clear video source when modal is hidden to stop playback
  videoModal.addEventListener('hide.bs.modal', function () {
    youtubeIframe.src = '';
  });
</script>