Redocly API Block - Custom Configurations

Customize the Redocly API Block with configuration options to control appearance and behavior.

Default Values

When no options are specified, the component uses these defaults:

{
  width: '500px',
  typography: 'fontFamily: `adobe-clean, "Source Sans Pro", sans-serif`',
  codeBlock: 'tokens: { punctuation: { color: "white" }}',
  disableSidebar: false,
  disableSearch: false,
  hideTryItPanel: false,
  hideSchemaTitles: false,
  scrollYOffset: 0,
  sortOperationsAlphabetically: false,
  sortTagsAlphabetically: false,
  jsonSampleExpandLevel: 2,
  generateCodeSamples: 'languages: [], skipOptionalParameters: false'
}

Configuration Options

Visual Options

• width: Custom width (default: "500px")
• typography: Font family and size settings
• codeBlock: Code block styling and token colors

UI Options

• disableSidebar: Hide left sidebar (default: false)
• disableSearch: Disable search (default: false)
• hideTryItPanel: Hide try-it panel (default: false)
• hideSchemaTitles: Hide schema field title properties next to types (default: false)
• scrollYOffset: Offset for fixed headers (default: 0)

Content Options

• sortOperationsAlphabetically: Sort operations (default: false)
• sortTagsAlphabetically: Sort tags (default: false)
• jsonSampleExpandLevel: JSON expansion depth (default: 2)
• generateCodeSamples: Specify code sample languages

Advanced

• requestInterceptor: Custom function to intercept requests

Example

data-src=../../assets/openapi.yaml

data-width=50%

data-typography=fontFamily: `'Source Sans Pro', sans-serif`, fontSize: '16px'

data-codeBlock=tokens: { punctuation: { color: 'red' }}

data-disableSidebar=false

data-disableSearch=true

data-hideTryItPanel=true

data-hideSchemaTitles=true

data-scrollYOffset=64

data-sortOperationsAlphabetically=true

data-sortTagsAlphabetically=true

data-jsonSampleExpandLevel=all

data-generateCodeSamples=languages: [{ lang: 'curl' }, { lang: 'Node.js' }, { lang: 'JavaScript' }, { lang: 'Python' }], skipOptionalParameters: true

data-requestInterceptor=function(req, operation) { console.log('Request:', req); return req; }