Configuration and Customization of Swashbuckle.AspNetCore.ReDoc

Change Relative Path to the UI

By default, the Redoc UI will be exposed at /api-docs. If necessary, you can alter this when enabling the Redoc middleware:

<a id='snippet-Redoc-RoutePrefix'></a>

app.UseReDoc(options =>
{
    options.RoutePrefix = "docs";
});

^{<a href='/test/WebSites/DocumentationSnippets/WebApplicationExtensions.cs#L142-L147' title='Snippet source file'>snippet source</a> | <a href='#snippet-Redoc-RoutePrefix' title='Start of snippet'>anchor</a>}

Change Document Title

By default, the Redoc UI will have a generic document title. You can alter this when enabling the Redoc middleware:

<a id='snippet-Redoc-DocumentTitle'></a>

app.UseReDoc(options =>
{
    options.DocumentTitle = "My API Docs";
});

^{<a href='/test/WebSites/DocumentationSnippets/WebApplicationExtensions.cs#L149-L154' title='Snippet source file'>snippet source</a> | <a href='#snippet-Redoc-DocumentTitle' title='Start of snippet'>anchor</a>}

Apply Redoc Parameters

Redoc ships with its own set of configuration parameters, all described in the Redoc documentation. In Swashbuckle.AspNetCore, most of these are surfaced through the Redoc middleware options:

<a id='snippet-Redoc-CustomOptions'></a>

app.UseReDoc(options =>
{
    options.SpecUrl("/v1/swagger.json");
    options.EnableUntrustedSpec();
    options.ScrollYOffset(10);
    options.HideHostname();
    options.HideDownloadButton();
    options.ExpandResponses("200,201");
    options.RequiredPropsFirst();
    options.NoAutoAuth();
    options.PathInMiddlePanel();
    options.HideLoading();
    options.NativeScrollbars();
    options.DisableSearch();
    options.OnlyRequiredInSamples();
    options.SortPropsAlphabetically();
});

^{<a href='/test/WebSites/DocumentationSnippets/WebApplicationExtensions.cs#L156-L174' title='Snippet source file'>snippet source</a> | <a href='#snippet-Redoc-CustomOptions' title='Start of snippet'>anchor</a>}

[!NOTE] Using options.SpecUrl("/v1/swagger.json") multiple times within the same UseReDoc(...) will not add multiple URLs.

Inject Custom CSS

To tweak the look and feel, you can inject additional CSS stylesheets by adding them to your wwwroot folder and specifying the relative paths in the middleware options:

<a id='snippet-Redoc-CustomCSS'></a>

app.UseReDoc(options =>
{
    options.InjectStylesheet("/redoc/custom.css");
});

^{<a href='/test/WebSites/DocumentationSnippets/WebApplicationExtensions.cs#L176-L181' title='Snippet source file'>snippet source</a> | <a href='#snippet-Redoc-CustomCSS' title='Start of snippet'>anchor</a>}

It is also possible to modify the theme by using the AdditionalItems property. More information can be found in the Redoc documentation.

<a id='snippet-Redoc-ModifyTheme'></a>

app.UseReDoc(options =>
{
    options.ConfigObject.AdditionalItems = new Dictionary<string, object>
    {
        // Configured additional options
    };
});

^{<a href='/test/WebSites/DocumentationSnippets/WebApplicationExtensions.cs#L183-L191' title='Snippet source file'>snippet source</a> | <a href='#snippet-Redoc-ModifyTheme' title='Start of snippet'>anchor</a>}

Customize index.html

To customize the UI beyond the basic options listed above, you can provide your own version of the Redoc index.html page:

<a id='snippet-Redoc-CustomIndexHtml'></a>

app.UseReDoc(options =>
{
    options.IndexStream = () => typeof(Program).Assembly
        .GetManifestResourceStream("CustomIndex.ReDoc.index.html"); // Requires file to be added as an embedded resource
});

^{<a href='/test/WebSites/DocumentationSnippets/WebApplicationExtensions.cs#L193-L199' title='Snippet source file'>snippet source</a> | <a href='#snippet-Redoc-CustomIndexHtml' title='Start of snippet'>anchor</a>}

<Project>
  <ItemGroup>
    <EmbeddedResource Include="CustomIndex.ReDoc.index.html" />
  </ItemGroup>
</Project>

[!TIP] To get started, you should base your custom index.html on the default version.