index.mdx

mode	custom
title	Tyk API Gateway Documentation

export const mostViewed = [ { title: "Tyk Platforms", items: [ { title: "Deployment Options", path: "apim/" }, { title: "Self-managed", path: "tyk-self-managed/" }, { title: "Cloud", path: "tyk-cloud/" }, { title: "Open Source Gateway", path: "apim/open-source/" }, ], }, { title: "API management", items: [ { title: "Create API", path: "getting-started/quick-start/" }, { title: "Access an API", path: "getting-started/configure-first-api/" }, { title: "Create UDG schema", path: "api-management/data-graph/" }, { title: "Using OAS API definition", path: "getting-started/quick-start/" }, ], }, { title: "Product stack", items: [ { title: "OSS Tyk Gateway", path: "tyk-oss-gateway/" }, { title: "OSS Tyk gateway configuration", path: "tyk-oss-gateway/configuration/" }, { title: "Tyk Gateway API", path: "tyk-gateway-api/" }, { title: "Tyk Dashboard", path: "tyk-dashboard/" }, ], }, { title: "Developer support", items: [ { title: "FAQs", path: "frequently-asked-questions/" }, { title: "Latest Release", path: "developer-support/release-notes/overview/" }, { title: "How to upgrade", path: "developer-support/upgrading/" }, { title: "Contribute to docs", path: "developer-support/contributing/" }, ], }, ];

export const tykStacksCols = [ [ { title: "Tyk Gateway (Open source)", desc: "Open source Enterprise API Gateway.", path: "tyk-oss-gateway/" }, { title: "Tyk Dashboard", desc: "The GUI and analytics platform for Tyk.", path: "tyk-dashboard/" }, { title: "Universal Data Graph", desc: "Combine multiple APIs into one universal interface.", path: "api-management/data-graph/" }, { title: "Tyk Enterprise Developer Portal", desc: "Expose APIs for third-party developers to register and use.", path: "tyk-developer-portal/tyk-enterprise-developer-portal/" }, { title: "Tyk Multi Data Center Bridge", desc: "Control plane that performs management and synchronisation.", path: "tyk-multi-data-centre/" }, ], [ { title: "Tyk Pump (Open source)", desc: "Responsible for moving analytics into a persistent data store.", path: "tyk-pump/" }, { title: "Tyk Operator", desc: "Manage your APIs on Tyk Gateway.", path: "tyk-stack/tyk-operator/installing-tyk-operator/" }, { title: "Tyk Sync", desc: "Command-line tool to manage and synchronise Tyk installation.", path: "product-stack/tyk-sync/installing-tyk-sync/" }, { title: "Tyk Identity Broker (Open source)", desc: "A bridge between various Identity Management Systems.", path: "tyk-identity-broker/" }, { title: "Tyk Streams", desc: "Expose, manage & monetise real-time event streams, brokers and async APIs.", path: "api-management/event-driven-apis/" }, ], ];

  {/* headline */}
  <h1
    id="home-page-title"
    className="
    font-bold text-[36px] leading-normal mb-3
    lh-normal fs-normal
    text-gray-900 dark:text-white
  "
  >
    Tyk Documentation
  </h1>

  {/* body copy */}
  <p className="mb-4 fs-16 font-400 lh-normal text-sec">
    The hub for Tyk API management. Whether you’re new or experienced, get
    started with Tyk, explore our product stack and core concepts, access
    in-depth guides, and actively contribute to our ever-evolving products.
  </p>

</div>

{/* container-xl with 1 % inline padding ≥ 992 px */}

  {/* section heading */}
  <div className="component-heading flex flex-col lg:flex-row lg:items-center justify-between mb-5">
    <div>
      <h2 className="home-section-heading">Try it out</h2>
      <p className="fs-16 font-400 text-sec lh-normal">Get started on any of our platforms</p>
    </div>
  </div>

  {/* 2-column Card grid */}
  <div className="grid gap-8 lg:grid-cols-3">
    {/* ───────── Card 1 ───────── */}
    <div className="border border-gray-300 p-8 flex flex-col items-center text-center h-full">
      <div className="parent-container">
        <div>
          <div className="image-container mb-6">
            <img src="/img/tyk-cloud.svg" alt="Guided evaluation" className="home-img" style={{ width: '128px', height: '64px' }} />
          </div>
          <p className="fs-18 font-semibold mb-4 text-sec">Try Tyk Cloud</p>
          <p className="fs-xs mb-3 text-sec">
            Get 48 hours of free, immediate access to our fully managed SaaS solution. No installation required.
          </p>
          <p className="fs-xs mb-3 text-sec">
            Ideal for quick, hassle-free evaluation
          </p>
        </div>

        <div className="py-4">
          <a href="https://tyk.io/cloud-trial/" className="sec-btn">Cloud Trial</a>
        </div>
      </div>
    </div>

    {/* ───────── Card 2 ───────── */}
    <div className="border border-gray-300 p-8 flex flex-col items-center text-center h-full">
      <div className="parent-container">
        <div>
          <div className="image-container mb-6">
            <img src="/img/tyk-sm.svg" alt="48-hour free trial" style={{ width: '128px', height: '64px' }} />
          </div>
          <p className="fs-18 font-semibold mb-4 text-sec">Try Tyk Self Managed</p>
          <p className="fs-xs mb-3 text-sec">Deploy Tyk on your own infrastructure with a free 14-day trial. Full access, full control.</p>
          <p className="fs-xs mb-3 text-sec">
            Ideal for on premise environments or custom setups
          </p>
        </div>

        <div className="py-4">
          <a href="https://tyk.io/self-managed-trial/" className="sec-btn">Self Managed Trial</a>
        </div>
      </div>
    </div>

    {/* ───────── Card 3 ───────── */}
    <div className="border border-gray-300 p-8 flex flex-col items-center text-center h-full">
      <div className="parent-container">
        <div>
          <div className="image-container mb-6">
            <img src="/img/poc.svg" alt="Guided evaluation" className="home-img" style={{ width: '128px', height: '64px' }} />
          </div>
          <p className="fs-18 font-semibold mb-4 text-sec">Proof of Concept</p>
          <p className="fs-xs mb-3 text-sec">
            For complex or regulated environments, work with our team on a tailored proof of concept or request an extended, in-depth trial of Tyk.
          </p>
          <p className="fs-xs mb-3 text-sec">
            We’ll map your requirements to Tyk’s architecture.
          </p>
        </div>

        <div className="py-4">
          <a href="https://tyk.io/guided-evaluation/" className="sec-btn">Request PoC</a>
        </div>
      </div>
    </div>

  </div>
</div>

  {/* heading */}
  <div className="component-heading mb-5">
    <h2 className="home-section-heading">Most viewed</h2>
    <p className="fs-16 font-400 text-sec lh-normal">
      Quick links to pages our users visit most
    </p>
  </div>

  {/* responsive grid */}
  <div className="grid gap-y-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
    {mostViewed.map((col) => (
      <div key={col.title}>
        {col.items.map((item) => (
          <div key={item.path} className="mb-2">
            <a href={`/${item.path}`} className="text-primary fs-xs">
              {item.title}
            </a>
          </div>
        ))}
      </div>
    ))}
  </div>
</div>

  {/* heading */}
  <div className="component-heading mb-5">
    <h2 className="home-section-heading">Explore by Tyk Stack</h2>
    <p className="fs-16 font-400 text-sec lh-normal">
      Explore everything Tyk has to offer
    </p>
  </div>

  {/* flex row → two vertical lists on md+, one list on mobile */}
  <div className="flex flex-col md:flex-row md:gap-6 home-bottom">
    {tykStacksCols.map((col, idx) => (
      <div key={idx} className="w-full md:w-1/2 space-y-4">
        {col.map((item) => (
          <a
            key={item.path}
            href={`/${item.path}`}
            className="
            stack-box
            flex items-center
            border border-gray-300 rounded-md
            px-4 py-3
            hover:bg-gray-50 transition
          "
          >
            {/* green leaf icon */}
            <svg viewBox="0 0 32 32" className="w-8 h-8 flex-none mr-3" fill="#20EDBA">
              <path d="M31.956 14.561C31.251 6.452 24.507.087 16.22 0H0v3.575v13.079C.353 24.981 7.052 31.695 15.427 32H32V14.605c0-.044-.044-.044-.044-.044z"/>
            </svg>

            <div className="stack-text-container">
              <div className="stack-heading">{item.title}</div>
              <div className="fs-xs text-sec font-400 lh-20">{item.desc}</div>
            </div>
          </a>
        ))}
      </div>
    ))}
  </div>
</div>