# Additional installation options coming soon
Source: https://speakeasy.com/openapi

import { PageHeader, CardGrid } from "@/mdx/components";
import { openapiSections } from "@/lib/data/openapi-sections";
import { allFrameworkGuidesData } from "@/lib/data/openapi/framework-all-guides";
import { TechCards } from "@/components/card/variants/docs/tech-cards";
import { WebGLVideo } from "@/components/webgl/components/video.lazy";
import { GithubIcon } from "@/assets/svg/social/github";
import { openapiGuidesData } from '@/lib/data/docs/openapi-guides';

<div className="relative docs-index bsmnt-container-md flex flex-col mt-10 gap-14">
  <WebGLVideo textureUrl="/webgl/bars-logo.mp4" className="absolute top-0 right-0 size-52 md:size-96 max-w-full -mt-10 pointer-events-none" />

<div className="mb-8">
  <PageHeader
    leftAlign
    eyebrow="Resources"
    title="OpenAPI Hub"
    description="The all in one resource for understanding the OpenAPI Specification."
    className="text-shadow-ascii-contrast"
  />
</div>

  <div>
    ## OpenAPI Basics
    Start with these foundational concepts to understand and create OpenAPI specifications.

    <TechCards items={openapiSections?.[0]?.cards} className="my-6" />

  </div>

  <div>
    ## Advanced Considerations
    Once you've mastered the basics, explore these advanced topics for more sophisticated API documentation.

    <CardGrid cards={openapiSections?.[1]?.cards} className="my-6" />

  </div>

  <div>
    ## OpenAPI Parser Library
    
    Work directly with OpenAPI specifications, Arazzo workflows, and OpenAPI Overlays using our comprehensive Go library and CLI tools.

    <div className="bg-white border border-border dark:border-neutral-800 dark:bg-neutral-900 rounded-[0.75rem] p-6 my-6">
      <div className="flex items-start gap-4">
        <div className="flex-shrink-0">
          <div className="w-10 h-10 bg-neutral-100 dark:bg-neutral-800 rounded-lg flex items-center justify-center">
            <GithubIcon className="w-6 h-6 text-muted-foreground" />
          </div>
        </div>
        <div className="flex-1">
          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
            <a href="https://github.com/speakeasy-api/openapi" target="_blank" rel="noopener noreferrer" className="interact:text-blue-600 dark:interact:text-blue-400 transition-colors">
              speakeasy-api/openapi
            </a>
          </h3>
          <p className="text-gray-600 dark:text-gray-300 mb-4">
            Battle-tested Go library for parsing, validating, and manipulating OpenAPI 3.0/3.1 specifications, Arazzo workflow documents, and OpenAPI Overlays. Includes a comprehensive CLI for common operations.
          </p>
          <div className="space-y-3">
            <div>
              <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-1">Key features:</h4>
              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
                <li>• Full OpenAPI 3.0.x and 3.1.x support with validation</li>
                <li>• Arazzo workflow document parsing and validation</li>
                <li>• OpenAPI Overlay application and comparison</li>
                <li>• Document traversal and manipulation APIs</li>
                <li>• Reference resolution with circular reference handling</li>
              </ul>
            </div>
            <div>
              <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-1">CLI installation:</h4>
              
```bash filename="Terminal"
go install github.com/speakeasy-api/openapi/cmd/openapi@latest

```
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

<div>
## Server Framework Guides

Generate OpenAPI specs from popular server frameworks:

<TechCards className="mt-5" items={allFrameworkGuidesData} />
</div>

<div>
## Working with OpenAPI Specs

Common guides for working with OpenAPI specs:

<CardGrid className="mt-5" cards={openapiGuidesData} heading="" />
</div>

</div>