starlight-openapi icon indicating copy to clipboard operation
starlight-openapi copied to clipboard

Add UI Customization Options Similar to Starlight Component Override System

Open faiz9068 opened this issue 9 months ago • 1 comments

Is your feature request related to a problem?

Current Functionality

The starlight-openapi plugin currently provides excellent OpenAPI documentation integration for Starlight sites, but offers limited UI customization options compared to Starlight's core component override capabilities.

Describe the solution you'd like

Feature Request

Please add the ability to customize the UI components through a similar override system as Starlight core provides. This would allow developers to:

  1. Override specific UI components
  2. Create alternative views similar to RapiDoc, SwaggerUI, or Redoc
  3. Maintain the integration benefits of the plugin while having more control over presentation

Use Cases

  • Teams with established design systems who need API documentation to match their branding
  • Developers who want to optimize the UI for specific types of APIs (e.g., simpler view for microservices)
  • Creating more interactive or specialized documentation experiences
  • Accessibility improvements for specific audiences

Example Implementation

Ideally, the implementation would follow Starlight's component override system, allowing for:

// starlight.config.mjs
import { defineConfig } from '@astrojs/starlight/config';

export default defineConfig({
  // ... other configuration
  components: {
    // Core Starlight overrides
    SkipLink: './src/components/SkipLink.astro',
    
    // New OpenAPI specific overrides
    ApiEndpoint: './src/components/ApiEndpoint.astro',
    ApiResponseExample: './src/components/ApiResponseExample.astro',
    ApiParameters: './src/components/ApiParameters.astro',
    // etc.
  },
});

Reference Implementation

I would like to create UI similar to what's shown here: https://starlight-openapi-rapidoc.vercel.app/api/petstore/operations/findpets

This RapiDoc style offers a cleaner, more compact view that would better suit our documentation needs. Key features I appreciate in this UI:

  • The more compact parameter display
  • The request/response tabs layout
  • The code sample formatting
  • The overall information density

Technical Considerations

  • The override system should expose key components of the OpenAPI UI
  • Component props should be well-documented
  • TypeScript types would be ideal for developer experience
  • Default components should still be available as reference implementations
  • A way to extend/modify styles without complete component overrides would be helpful

Impact

This feature would significantly enhance the flexibility of the starlight-openapi plugin, making it suitable for more projects and reducing the need for custom solutions or switching to alternative documentation systems.

Describe alternatives you've considered

No response

Additional Context

No response

faiz9068 avatar Feb 25 '25 08:02 faiz9068

Thanks for the feature request :raised_hands:

Customization is definitely something I want to tackle in the future altho I am not sure yet which direction it'll take and which level of customization I would like to offer.

Supporting something like Starlight override's definitely cost with a maintenance price so definitely something to consider but definitely something to keep monitoring and see if it's something that interests more people.

HiDeoo avatar Feb 25 '25 09:02 HiDeoo