> ## Documentation Index
> Fetch the complete documentation index at: https://developer.jtl-software.com/llms.txt
> Use this file to discover all available pages before exploring further.

# JTL Developer Platform

> Build apps for 50,000+ JTL merchants. From first idea to live in the App Store.

<div className="hero-gradient">
  <div className="hero-center">
    <div className="hero-title">
      Build with{' '}
      <span style={{ color: 'var(--jtl-orange)' }}>JTL Cloud</span>
    </div>

    <p className="hero-subtitle">
      Build, deploy, and manage apps and integrations for 50,000+ JTL
      merchants. Connect marketplaces, extend ERP workflows, and ship
      faster with JTL Cloud.
    </p>

    <div
      className="hero-search"
      onClick={() => document.getElementById('search-bar-entry')?.click()}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => {
			if (e.key === 'Enter')
				document.getElementById('search-bar-entry')?.click();
		}}
    >
      <svg xmlns="http://www.w3.org/2000/svg" className="hero-search-icon" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth="2">
        <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
      </svg>

      <span className="hero-search-text">I'm looking for...</span>
    </div>
  </div>
</div>

## Get Started

<CardGroup cols={3}>
  <Card title="Create an Account" href="/get-started/create-developer-account" icon="user-plus" iconType="duotone">
    Get started by setting up a developer account and configuring your apps.
  </Card>

  <Card title="Build with Template" href="/get-started/quick-start/from-template" icon="rocket" iconType="duotone">
    The fastest way to ship: clone a starter template and deploy your first app in minutes.
  </Card>

  <Card title="Build from Scratch" href="/get-started/quick-start/from-scratch" icon="hammer" iconType="duotone">
    Prefer full control? Build your app from the ground up with step-by-step guidance.
  </Card>
</CardGroup>

***

## What you Can Build

<CardGroup cols={2}>
  <Card title="Cloud Apps" icon="git-fork" href="/guides/cloud-apps/architecture-overview">
    Extend JTL with custom dashboards, automations, and tools. Merchants
    install your app from the App Store.
  </Card>

  <Card title="Using Platform APIs" icon="plug" href="/guides/cloud-apps/using-platform-apis">
    Call JTL Platform APIs from your Cloud App to access merchant data.
  </Card>
</CardGroup>

## Explore the APIs

<CardGroup cols={3}>
  <Card title="GraphQL Playground" icon="share-2" href="/api-reference/graphql-playground">
    Explore queries and mutations interactively with autocomplete and schema docs.
  </Card>

  <Card title="REST API Reference" icon="book" href="/api-reference">
    Browse all REST API endpoints with request/response schemas.
  </Card>

  <Card title="SDKs & Libraries" icon="wrench" href="/guides/cloud-apps/app-shell-ui-integration#appbridge-communication">
    Client libraries for JavaScript.
  </Card>
</CardGroup>

<div id="custom-footer" role="contentinfo" className="flex gap-12 justify-between pt-10 mt-16 border-t border-gray-200 sm:flex dark:border-gray-800/50 pb-28">
  <div className="flex gap-6 flex-wrap">
    <a href="https://github.com/jtl-software" target="_blank" rel="noopener noreferrer" className="h-fit">
      <span className="sr-only">github</span>

      <svg
        className="w-5 h-5 bg-gray-400 dark:bg-gray-400 hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors"
        style={{
				WebkitMaskImage:
					'url(https://d3gk2c5xim1je2.cloudfront.net/v7.1.0/brands/github.svg)',
				WebkitMaskRepeat: 'no-repeat',
				WebkitMaskPosition: 'center',
				maskImage:
					'url(https://d3gk2c5xim1je2.cloudfront.net/v7.1.0/brands/github.svg)',
				maskRepeat: 'no-repeat',
				maskPosition: 'center',
			}}
      />
    </a>

    <a href="https://linkedin.com/company/jtl-software" target="_blank" rel="noopener noreferrer" className="h-fit">
      <span className="sr-only">linkedin</span>

      <svg
        className="w-5 h-5 bg-gray-400 dark:bg-gray-400 hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors"
        style={{
				WebkitMaskImage:
					'url(https://d3gk2c5xim1je2.cloudfront.net/v7.1.0/brands/linkedin.svg)',
				WebkitMaskRepeat: 'no-repeat',
				WebkitMaskPosition: 'center',
				maskImage:
					'url(https://d3gk2c5xim1je2.cloudfront.net/v7.1.0/brands/linkedin.svg)',
				maskRepeat: 'no-repeat',
				maskPosition: 'center',
			}}
      />
    </a>

    <a href="https://x.com/jtlsoftware" target="_blank" rel="noopener noreferrer" className="h-fit">
      <span className="sr-only">x</span>

      <svg
        className="w-5 h-5 bg-gray-400 dark:bg-gray-400 hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors"
        style={{
				WebkitMaskImage:
					'url(https://d3gk2c5xim1je2.cloudfront.net/v7.1.0/brands/x-twitter.svg)',
				WebkitMaskRepeat: 'no-repeat',
				WebkitMaskPosition: 'center',
				maskImage:
					'url(https://d3gk2c5xim1je2.cloudfront.net/v7.1.0/brands/x-twitter.svg)',
				maskRepeat: 'no-repeat',
				maskPosition: 'center',
			}}
      />
    </a>

    <a href="https://www.youtube.com/user/JTLSoftwareGmbH" target="_blank" rel="noopener noreferrer" className="h-fit">
      <span className="sr-only">youtube</span>

      <svg
        className="w-5 h-5 bg-gray-400 dark:bg-gray-400 hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors"
        style={{
				WebkitMaskImage:
					'url(https://d3gk2c5xim1je2.cloudfront.net/v7.1.0/brands/youtube.svg)',
				WebkitMaskRepeat: 'no-repeat',
				WebkitMaskPosition: 'center',
				maskImage:
					'url(https://d3gk2c5xim1je2.cloudfront.net/v7.1.0/brands/youtube.svg)',
				maskRepeat: 'no-repeat',
				maskPosition: 'center',
			}}
      />
    </a>

    <a href="https://www.instagram.com/jtlsoftware" target="_blank" rel="noopener noreferrer" className="h-fit">
      <span className="sr-only">instagram</span>

      <svg
        className="w-5 h-5 bg-gray-400 dark:bg-gray-400 hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors"
        style={{
				WebkitMaskImage:
					'url(https://d3gk2c5xim1je2.cloudfront.net/v7.1.0/brands/instagram.svg)',
				WebkitMaskRepeat: 'no-repeat',
				WebkitMaskPosition: 'center',
				maskImage:
					'url(https://d3gk2c5xim1je2.cloudfront.net/v7.1.0/brands/instagram.svg)',
				maskRepeat: 'no-repeat',
				maskPosition: 'center',
			}}
      />
    </a>

    <a href="https://www.facebook.com/JTLSoftware" target="_blank" rel="noopener noreferrer" className="h-fit">
      <span className="sr-only">facebook</span>

      <svg
        className="w-5 h-5 bg-gray-400 dark:bg-gray-400 hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors"
        style={{
				WebkitMaskImage:
					'url(https://d3gk2c5xim1je2.cloudfront.net/v7.1.0/brands/facebook.svg)',
				WebkitMaskRepeat: 'no-repeat',
				WebkitMaskPosition: 'center',
				maskImage:
					'url(https://d3gk2c5xim1je2.cloudfront.net/v7.1.0/brands/facebook.svg)',
				maskRepeat: 'no-repeat',
				maskPosition: 'center',
			}}
      />
    </a>
  </div>

  <div className="flex items-center">
    <a href="https://www.jtl-software.com/de/impressum" target="_blank" rel="noopener noreferrer" className="text-sm text-gray-400 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors font-bold underline">
      Imprint
    </a>
  </div>
</div>