Back to Scalar

Getting Started

documentation/guides/registry/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-registry" class="text-balance"> Registry </scalar-heading> <p> Get started with Registry for managing & versioning OpenAPI Documents, JSON Schema, Spectral Rules as your source of truth with a deep Git integration. </p> </div> <div class="mt-10"> <scalar-image src="/registry-animated.svg" src-dark="/registry-animated-dark.svg"></scalar-image> </div> <div class="flex"> <div class="full-container-constrained">

Create your Scalar Account

To first access the Registry you need to create an account or sign in.

Once authenticated you will see your dashboard, you have two options to interface with the Registry:

<div class="mt-6"> <scalar-image src="/scalar-dashboard.svg" src-dark="/scalar-dashboard-dark.svg"></scalar-image> </div>

So... Why a Registry?

Managing OpenAPI can be difficult; is the source-of-truth: design, implementation, Git, cloud? How do you manage versions and access, also how do downstream consumers of your API interact with it? Does it need to be private?

Who is going to update the docs when our API has new endpoints or examples?

Scalar handles all this and makes it incredibly easy to get to the exciting stuff! Once a document is in the Registry we can:

Create Docs

World Class API Docs with just a few clicks, all managed by Scalars registry automagically from your OpenAPI document changes.

<div class="mt-6"> <scalar-image src="/api-docs-static-zoom.svg" src-dark="/api-docs-static-zoom-dark.svg"></scalar-image> </div>

Create SDKs

World Class SDKs with just a few clicks, all managed by Scalars registry automagically from your OpenAPI document changes.

and so much more!

All of this with just a couple clicks or a few API requests! You handle making your API great, and we will handle the rest of the tooling. OpenAPI first.

<div class="mt-6"> <scalar-image src="/sdk-dashboard-static.svg" src-dark="/sdk-dashboard-static-dark.svg"></scalar-image> </div> <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-green"> <scalar-icon src="phosphor/bold/git-branch"></scalar-icon> Single Source of Truth </b> </div> <div class="feature-item"> <b class="flex items-center icon-text gap-3 font-medium min-h-8 text-green"> <scalar-icon src="phosphor/bold/arrows-clockwise"></scalar-icon> Git Integration </b> </div> <div class="feature-item"> <b class="flex items-center icon-text gap-3 font-medium min-h-8 text-green"> <scalar-icon src="phosphor/bold/arrow-up-right"></scalar-icon> OpenAPI Documents </b> </div> <div class="feature-item"> <b class="flex items-center icon-text gap-3 font-medium min-h-8 text-green"> <scalar-icon src="phosphor/bold/brackets-curly"></scalar-icon> JSON Schema Support </b> </div> <div class="feature-item"> <b class="flex items-center icon-text gap-3 font-medium min-h-8 text-green"> <scalar-icon src="phosphor/bold/warning-octagon"></scalar-icon> Spectral Rules </b> </div> <div class="feature-item"> <b class="flex items-center icon-text gap-3 font-medium min-h-8 text-green"> <scalar-icon src="phosphor/bold/lock-simple"></scalar-icon> Private or Public </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/registry/cli"><scalar-icon src="phosphor/bold/brackets-square"></scalar-icon> CLI</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/upload"><scalar-icon src="phosphor/bold/upload"></scalar-icon> Upload API</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"> <scalar-image src="/api-client-static.svg" src-dark="/api-client-static-dark.svg"></scalar-image> </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 class="mt-6"> <scalar-image src="/sdks-static.svg" src-dark="/sdks-static-dark.svg"></scalar-image> </div> </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"> <scalar-image src="/registry-static.svg" src-dark="/registry-static-dark.svg"></scalar-image> </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"> <scalar-image src="/api-docs-static-zoom.svg" src-dark="/api-docs-static-zoom-dark.svg"></scalar-image> </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: rgb(128 248 0 / 38%); --fa-yellow: rgb(0 158 85); --fa-red: rgb(115 0 255 / 0%); --scalar-background-2: var(--scalar-background-1) } @supports (color: color(display-p3 1 1 1)) { .hero-animation .fa { --fa-orange: color(display-p3 0.62 0.96 0.17 / 0.38); --fa-yellow: color(display-p3 0.19 0.61 0.36); --fa-red: color(display-p3 0.41 0 0.99 / 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>