Back to Scalar

Getting Started

documentation/guides/sdks/getting-started.md

latest21.8 KB
Original Source
<div class="hero-animation container-full"> <scalar-icon src="https://api.scalar.com/cdn/images/LByt7m02eR-6wZrXUk5d5/v1Pu6_BCmly6VhPAuotVZ.svg"></scalar-icon> </div> <div class="flex flex-col gap-3 hero small-test"> <scalar-heading level="2" slug="scalar-sdks" class="text-balance"> SDKs </scalar-heading> <p> Get started with generating world-class SDKs in minutes on scalar.com in several languages: TypeScript, Python, Golang & more. </p> </div> <div class="mt-10"> <scalar-image src="/sdks-animated.svg" src-dark="/sdks-animated-dark.svg"></scalar-image> </div> <div class="flex"> <div class="full-container-constrained">

Getting Started

:::scalar-callout{ type=info } SDK generation is part of our paid plans and costs $100 per month per language. Keep this in mind when selecting which languages you'd like to generate SDKs for. :::

Make sure you have created a Scalar Account & are logged in (see create account guide)

Generating your first SDK

<scalar-steps> <scalar-step id="step-1" title="Upload OpenAPI Document">

From the dashboard click "Create new SDK".

If you don't already have an OpenAPI document on our registry, you can import it right in the modal.

</scalar-step> <scalar-step id="step-2" title="Select Desired Languages"> Select as many SDKs as you would like, or just one language to start. Once you click "Continue" we will begin generating your SDKs. </scalar-step> <scalar-step id="step-3" title="Manage your new SDKs"> Once created, you will get redirected to the SDK Overview page where you can: - Configure your SDK settings - Add our GitHub Integration - Downlad the SDK Client </scalar-step> </scalar-steps>

<scalar-image src="/sdk-dashboard-static.svg" src-dark="/sdk-dashboard-static-dark.svg"></scalar-image>

<div class="feature"> <h2>Features</h2> <div class="flex flex-wrap feature-container"> <div class="feature-item"> <b class="flex items-center icon-text gap-3 font-medium min-h-8 text-purple"> <scalar-icon src="phosphor/bold/arrow-up-right"></scalar-icon> OpenAPI-First </b> </div> <div class="feature-item"> <b class="flex items-center icon-text gap-3 font-medium min-h-8 text-purple"> <scalar-icon src="phosphor/bold/brackets-square"></scalar-icon> Custom-code </b> </div> <div class="feature-item"> <b class="flex items-center icon-text gap-3 font-medium min-h-8 text-purple"> <scalar-icon src="phosphor/bold/code"></scalar-icon> Code Samples </b> </div> <div class="feature-item"> <b class="flex items-center icon-text gap-3 font-medium min-h-8 text-purple"> <scalar-icon src="phosphor/bold/fingerprint"></scalar-icon> OpenAPI Authentication </b> </div> <div class="feature-item"> <b class="flex items-center icon-text gap-3 font-medium min-h-8 text-purple"> <scalar-icon src="phosphor/bold/cloud-check"></scalar-icon> Syncs with Docs </b> </div> <div class="feature-item"> <b class="flex items-center icon-text gap-3 font-medium min-h-8 text-purple"> <scalar-icon src="phosphor/bold/file-cloud"></scalar-icon> File Streaming Support </b> </div> </div> <div class="cta flex flex-col gap-3 small-test"> <scalar-heading level="2" class="text-balance" slug="what-are-you-waiting-for">What are you waiting for?</scalar-heading> <p> We're committed to enabling developers and companies to practice the highest of API industry standards. </p> <div class="flex gap-2 mb-11"> <a class="t-editor__button" href="https://dashboard.scalar.com/register">Get Started</a> <a class="t-editor__button" href="https://scalar.cal.com/scalar/chat-with-scalar" target="_blank">Book a Demo</a> </div> <a class="expander-hover-link" href="https://discord.gg/scalar" target="_blank" aria-label="Join Scalar community on Discord">Community →</a> <a class="expander-hover-link" href="https://github.com/scalar/scalar" target="_blank" aria-label="View Scalar on GitHub">GitHub →</a> <a class="expander-hover-link" href="mailto:[email protected]" target="_blank" aria-label="Contact Scalar support">Contact Us →</a> </div> </div> </div> <div class="resources-cta sticky"> <div class="resources-cta-container"> <p class="mt-3 mb-1 pl-2"> <b class="font-medium">Additional Reading</b> </p> <p> <a class="flex items-center gap-1.5 font-medium text-c-2 hover:bg-b-2 rounded px-2 p-1" href="/products/sdks/configuration/typescript"><scalar-icon src="phosphor/bold/file-ts"></scalar-icon> Typescript SDKs</a> </p> <p> <a class="flex items-center gap-1.5 font-medium text-c-2 hover:bg-b-2 rounded px-2 p-1" href="/products/sdks/publishing"><scalar-icon src="phosphor/bold/package"></scalar-icon> Publishing to npm</a> </p> <p> <a class="flex items-center gap-1.5 font-medium text-c-2 hover:bg-b-2 rounded px-2 p-1" href="/products/registry/getting-started"><scalar-icon src="phosphor/bold/seal-check"></scalar-icon> Registry</a> </p> <p class="mt-3 mb-1 pl-2"> <b class="font-medium">Community</b> </p> <p> <a class="flex items-center gap-1.5 font-medium text-c-2 hover:bg-b-2 rounded px-2 p-1" href="https://discord.gg/scalar" target="_blank"><scalar-icon src="phosphor/bold/discord-logo"></scalar-icon> Discord</a> </p> <p> <a class="flex items-center gap-1.5 font-medium text-c-2 hover:bg-b-2 rounded px-2 p-1" href="https://twitter.com/scalar" target="_blank"><scalar-icon src="phosphor/bold/twitter-logo"></scalar-icon> Twitter</a> </p> <p> <a class="flex items-center gap-1.5 font-medium text-c-2 hover:bg-b-2 rounded px-2 p-1" href="https://github.com/scalar/scalar" target="_blank"><scalar-icon src="phosphor/bold/github-logo"></scalar-icon> GitHub</a> </p> </div> </div> </div> <div class="expander-container"> <div class="expander-hover"> <div class="expander-hover-preview">
</div>
<div class="relative">
  <div class="expander-hover-sticker">
    <object class="sticker-clip-client" width="156" height="110"
      data="https://api.scalar.com/cdn/images/LByt7m02eR-6wZrXUk5d5/JXS6tZ4EbKIkeGpjP6QKc.svg"></object>
  </div>
  <div class="expander-hover-title">API Client</div>
  <div class="expander">
    <div class="expander-content">
      Minimal, powerful, fully open-source API Client built on open standards by us + our community.
    </div>
  </div>
  <a class="expander-hover-link" href="https://client.scalar.com/" target="_blank" aria-label="Learn more about API Client">Learn More</a>
</div>
</div> <div class="expander-hover"> <div class="expander-hover-preview">
</div>
<div class="relative">
  <div class="expander-hover-sticker">
    <object class="sticker-clip-sdk" width="145" height="145"
      data="https://api.scalar.com/cdn/images/LByt7m02eR-6wZrXUk5d5/gM-mqYTBYMkqpnexTIr-r.svg"></object>
  </div>
  <div class="expander-hover-title">SDKs</div>
  <div class="expander">
    <div class="expander-content">
      Bring your OpenAPI document and get type-safe client libraries for TypeScript, Python and more.
    </div>
  </div>
  <a class="expander-hover-link" href="/products/sdks/getting-started" aria-label="Learn more about SDKs">Learn More</a>
</div>
</div> <div class="expander-hover"> <div class="expander-hover-preview">
</div>
<div class="relative">
  <div class="expander-hover-sticker">
  <object class="sticker-clip-registry" width="136" height="186"
      data="https://api.scalar.com/cdn/images/LByt7m02eR-6wZrXUk5d5/jgGF_IKsu-T_irS-6MMOy.svg"></object>
  </div>
  <div class="expander-hover-title">API Registry</div>
  <div class="expander">
    <div class="expander-content">
      Managing & versioning OpenAPI Documents with a deep Git integration.
    </div>
  </div>
  <a class="expander-hover-link" href="/products/registry/getting-started" aria-label="Learn more about API Registry">Learn More</a>
</div>
</div> <div class="expander-hover"> <div class="expander-hover-preview">
</div>
<div class="relative">
  <div class="expander-hover-sticker">
    <object class="sticker-clip-docs" width="113" height="143" data="https://api.scalar.com/cdn/images/LByt7m02eR-6wZrXUk5d5/HLhbFqJ4vSzo4UDEZX2dq.svg"></object>
  </div>
  <div class="expander-hover-title">API Docs</div>
  <div class="expander">
    <div class="expander-content">
      Write beautiful documentation with Markdown + MDX + Git Sync.
    </div>
  </div>
  <a class="expander-hover-link" href="/products/docs/getting-started" aria-label="Learn more about API Docs">Learn More</a>
</div>
</div> </div> <div class="getting-started footer container-full"> <div class="footer-content"> <div> <span class="text-c-1"> <scalar-icon src="https://api.scalar.com/cdn/images/LByt7m02eR-6wZrXUk5d5/qlPkhjY7Ec6E5g3SHMjEp.svg"></scalar-icon> </span> <p class="mt-10 text-c-3 text-sm text-balance">The OpenAPI company.</p> <p class="mt-5 text-c-3 text-sm text-balance">© API Documentation, Inc.</p> </div> <div class="flex text-sm"> <div class="w-1/3 flex flex-col gap-2"> <b>Products</b> <a class="text-c-2 hover:text-c-1 font-normal" href="/products/api-references/getting-started" target="_blank">API References</a> <a class="text-c-2 hover:text-c-1 font-normal" href="https://client.scalar.com/" target="_blank">API Client</a> <a class="text-c-2 hover:text-c-1 font-normal" href="https://docs.scalar.com/" target="_blank">API Docs</a> <a class="text-c-2 hover:text-c-1 font-normal" href="https://editor.scalar.com/" target="_blank">Swagger Editor</a> </div> <div class="w-1/3 flex flex-col gap-2"> <b>Company</b> <a class="text-c-2 hover:text-c-1 font-normal" href="mailto:[email protected]" target="_blank">Support</a> <a class="text-c-2 hover:text-c-1 font-normal" href="/legal/terms-and-conditions">Terms of Service</a> <a class="text-c-2 hover:text-c-1 font-normal" href="/legal/privacy-policy">Privacy Policy</a> <button class="cky-banner-element text-c-2 hover:text-c-1 font-normal">Cookie Preferences</button> </div> <div class="w-1/3 flex flex-col gap-2"> <b>Socials</b> <a class="text-c-2 hover:text-c-1 font-normal" href="https://twitter.com/scalar" target="_blank">x (formerly Twitter)</a> <a class="text-c-2 hover:text-c-1 font-normal" href="https://github.com/scalar/scalar" target="_blank">GitHub</a> <a class="text-c-2 hover:text-c-1 font-normal" href="https://discord.gg/scalar" target="_blank">Discord</a> <a class="text-c-2 hover:text-c-1 font-normal" href="https://www.linkedin.com/company/scalar-org" target="_blank">Linkedin</a> </div> </div> </div> <!-- footer animation --> <div class="footer-animation"> <scalar-icon src="https://api.scalar.com/cdn/images/LByt7m02eR-6wZrXUk5d5/v1Pu6_BCmly6VhPAuotVZ.svg"></scalar-icon> </div> </div> <style> .resources-cta-container { border-radius: var(--scalar-radius-lg); border: var(--scalar-border-width) solid var(--scalar-border-color); width: 100%; padding: 12px 8px; } .resources-cta { max-height: fit-content; width: 100%; top: 12px; padding-top: 50px; padding-bottom: 200px; } .full-container-constrained { max-width: 720px; padding-right: 40px; } .full-container-constrained > .t-editor__heading { margin-top: 44px; } .full-container-constrained > .t-editor__paragraph { margin-top: 12px; } .full-container-constrained > .t-editor__steps { margin-top: 24px; margin-bottom: 24px; } .hero-animation { position: absolute; top: 0; z-index: -1; transform: scaleY(-1); margin-top: 0; } .hero-animation .fa { --fa-orange: rgba(49, 215, 250, .25); --fa-yellow: #0189fc; --fa-red: rgba(54, 114, 255,0); --scalar-background-2: var(--scalar-background-1) } @supports (color: color(display-p3 1 1 1)) { .hero-animation .fa { --fa-orange: rgb(141 49 250 / 25%); --fa-yellow: color(display-p3 0.41 0 0.99); --fa-red: rgb(255 54 223 / 0%); } } .t-editor__page-title, .layout-aside-right, .t-editor__page-nav, .notify-container, .subheading, :not(.getting-started).footer, .t-editor .page-header, .content .page-nav, .t-doc__toc { display: none; } main.content { overflow-x: clip; } .t-doc .layout-header { z-index: 10000; } .t-editor__button { min-width: 160px; justify-content: center; } .t-editor .editor-content, .t-editor { padding-bottom: 0; } h3.t-editor__heading, h2.t-editor__heading { --font-size: var(--scalar-heading-1); margin-top: 0; } :root { --scalar-container-width: 960px; --scalar-toc-width: 0; } .hero.hero { margin-top: 88px; } .small-test { max-width: 680px; text-wrap: balance; margin-top: 44px; position: relative; } .t-editor .editor-static .page-node, .t-editor .page-node, .t-editor .content { max-width: var(--scalar-container-width); padding-bottom: 0; margin-bottom: 0; } .container { width: var(--scalar-container-width); margin: auto; position: relative; } .container-full { --scalar-container-sidebar-gap: calc( ( (100dvw - var(--scalar-container-width) - var(--scalar-sidebar-width)) / 2 ) ); width: calc(100dvw - var(--scalar-sidebar-width)); margin-left: min(-1 * var(--scalar-container-sidebar-gap), -50px); } .t-editor.page { position: relative; margin-right: unset; } .container { width: 900px; margin: auto; position: relative; } /* logos */ .logowall.logowall { margin-top: 48px; display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; gap: 40px; } .logowall-item { display: flex; align-items: center; justify-content: center; } .logowall-item svg { width: 100%; height: auto; max-height: 24px; } .ign-logo__fill { fill: var(--scalar-color-1); } .fill-current-bg { fill: var(--scalar-background-1); } /* feature */ .feature { padding: 60px 0 !important; } .feature-container { gap: 6px; margin-top: 32px; } .feature-item { flex: 0 0 calc(50% - 6px); } /* new stuff */ .expander { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0; transition: grid-template-rows 0.25s, opacity 0.25s ease-in-out; } .expander-content { min-height: 0; margin-bottom: 12px; margin-top: 6px; line-height: 1.45; font-size: 14px; } .expander-hover { height: 370px; position: relative; } .expander-hover:hover .expander { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 0.5s, opacity 0.5s ease-in-out; } .expander.expanded .expander-content { visibility: visible; } .expander-hover-title { font-size: 20px; font-weight: var(--scalar-semibold); margin-top: 24px; } .expander-hover-link { --font-color: var(--scalar-color-2); --font-visited: var(--scalar-color-2); color: var(--font-color, var(--scalar-color-1)); font-weight: var(--scalar-semibold); text-underline-offset: 0.25rem; text-decoration-thickness: 1px; text-decoration: underline; text-decoration-color: color-mix( in srgb, var(--font-color, var(--scalar-color-1)) 30%, transparent ); margin-top: 6px; } .expander-hover:hover .expander-hover-link { --font-color: var(--scalar-color-1); } .expander-hover-preview { position: absolute; left: -120px; top: -220px; width: 1100px; mask-image: radial-gradient(circle at top left, black 25%, transparent 40%); pointer-events: none; opacity: 0; transition: all 0.3s ease-in-out; transform: rotate(1deg) translate3d(-10px, -10px, 0); max-height: 500px; overflow: hidden; } .expander-hover .relative { z-index: 1; } .expander-hover:hover .expander-hover-preview { opacity: 1; transform: rotate(2deg) translate3d(0, 0, 0); transition: all 0.3s ease-in-out 0.2s; } .expander-hover-preview img { margin-left: 0; mask-image: linear-gradient(black, transparent); width: 100%; } .expander-hover-sticker { height: 143px; width: 100%; display: flex; align-items: center; position: relative; margin-left: -12px; transition: transform 0.3s ease-in-out; justify-content: flex-start; } .expander-hover-sticker object { pointer-events: none; } .expander-hover-sticker img { max-height: initial; margin-left: initial; } .expander-hover:hover .expander-hover-sticker { transform: rotate(-3deg); } .expander-container { display: flex; gap: 44px; } .cta { padding: 80px 0; margin-top: 0 !important; } .mb-11 { margin-bottom: 44px; } /* footer */ .footer { position: relative; overflow: hidden; background: var(--scalar-background-2); padding-inline: 20px; padding-bottom: 200px; margin-top: 100px; } .footer-animation { margin-inline: -20px; } .footer-animation svg { position: absolute; bottom: 0; } .footer-content { display: flex; gap: 48px; max-width: var(--scalar-container-width); width: 100%; margin: auto; padding-top: 92px; } .footer-content > * { flex: 1; } .footer-content span, .footer-content p, .footer-content a, .footer-content button { position: relative; z-index: 1; } .w-1\/3 { width: 33.33% } .light-mode .dark-image { display: none; } .dark-mode .light-image { display: none; } .sticker-clip-client { clip-path: path("M158 91.9102C158 95.8908 154.773 99.1172 150.792 99.1172L147.269 99.1172L147.269 105.78C147.268 107.948 145.511 109.705 143.343 109.705L86.2051 109.705C84.0373 109.705 82.2795 107.948 82.2793 105.78L82.2793 99.1172L7.208 99.1172C3.22741 99.1172 1.10673e-05 95.8908 -4.01752e-06 91.9101L-3.50643e-06 80.2178C-3.47119e-06 79.4117 0.135571 78.6109 0.400387 77.8496L25.7949 4.83984C26.8028 1.94219 29.5346 -5.6154e-06 32.6025 -5.4813e-06L150.792 -3.15072e-07C154.773 -1.41078e-07 158 3.22654 158 7.20703L158 91.9102Z") } .sticker-clip-sdk { clip-path: path("M60.0562 8.61129C65.9233 -1.83053 81.0294 -1.61478 86.5955 8.99068L142.416 115.353C144.543 119.406 141.567 124.259 136.991 124.201L114.679 123.918L114.138 135.797C113.962 139.654 110.761 142.678 106.9 142.634L32.9393 141.782C29.1212 141.738 26.0084 138.707 25.864 134.891L25.406 122.787L6.28841 122.544C1.70363 122.486 -1.1476 117.543 1.09835 113.545L60.0562 8.61129Z") } .sticker-clip-registry { clip-path: path("M71.0986 1.13334C75.8537 -0.596969 81.1116 1.85514 82.8428 6.6099L90.3037 27.1079H98.5059C104.199 27.108 108.814 31.7235 108.814 37.4165V77.9663L121.32 112.329C119.703 112.128 118.003 112.298 116.351 112.899C110.96 114.861 108.12 120.659 110.009 125.848C111.898 131.038 117.8 133.654 123.191 131.692C124.844 131.091 126.254 130.127 127.364 128.933L134.608 148.835C136.339 153.591 133.887 158.849 129.132 160.58L73.3945 180.866C68.6393 182.596 63.3816 180.145 61.6504 175.39L58.958 167.994H2.29102C1.02582 167.994 0 166.968 0 165.703V29.398C0.000538247 28.1333 1.02616 27.1079 2.29102 27.1079H9.8125C10.6721 24.5603 12.6383 22.4116 15.3613 21.4204L71.0986 1.13334Z") } .sticker-clip-docs { overflow: hidden; border-radius: 20px; } @media screen and (max-width: 1280px) { .resources-cta { display: none; } .full-container-constrained { padding-right: 0px; max-width: 100%; } } @media screen and (max-width: 1000px) { .t-doc { --scalar-sidebar-width: 0px; } .hero.hero { margin-top: 188px; } .t-editor.page { padding-inline: 30px; } .container-full { --scalar-container-sidebar-gap: 30px; width: 100dvw; padding-inline: 30px; margin-inline: -30px; } .hero-animation { margin-top: -100px !important; padding-inline: 0; margin-inline: 0; } .logowall.logowall { grid-template-columns: repeat(3, 1fr); column-gap: 20px; row-gap: 40px; } .logowall-item { justify-content: start; } .logowall-item svg { width: auto; max-width: 100%; height: 100%; max-height: 20px; } .feature-item { flex: 0 0 calc(100% - 22px); } .expander-container { display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 0; } .expander-hover { width: auto; } .expander-hover .expander { grid-template-rows: 1fr; opacity: 1; } .expander .expander-content { visibility: visible; } .footer-content { flex-direction: column; } .footer-content > * { flex: initial; } } </style>