# Endpoint request snippet

> Learn how to use EndpointRequestSnippet components in Fern to reference API endpoint requests in your documentation with code examples.

Use the `<EndpointRequestSnippet>` components to reference an endpoint request from
your API Reference.

## Usage

<div>
  <EndpointRequestSnippet endpoint="POST /chat/{domain}" />
</div>

```jsx Markdown
<EndpointRequestSnippet endpoint="POST /chat/{domain}" />
```

## Reference particular examples

<Steps>
  ### Set the example name in your spec

  <AccordionGroup>
    <Accordion title="OpenAPI">
      ```yaml openapi.yml {12}
      paths:
        /pet:
          put:
            summary: Update an existing pet 
            operationId: pets_update
            requestBody: 
              content:
                application/json:
                  schema:
                    $ref: '#/components/schemas/Pet'
                  examples:
                    ExampleWithMarkley:
                      value: 
                        name: Markley
                        id: 44
      ```
    </Accordion>

    <Accordion title="Fern Definition">
      ```yaml pets.yml {11}
      service:
        auth: true
        base-path: ""
        endpoints:
          update:
            docs: Update an existing pet 
            method: PUT
            path: /pet
            request: Pet
            examples:
              - name: ExampleWithMarkley
                request:
                  name: Markley
                  id: 44
      ```
    </Accordion>
  </AccordionGroup>

  ### Directly reference the example

  ```jsx Markdown {3}
    <EndpointRequestSnippet 
      endpoint="PUT /pet" 
      example="ExampleWithMarkley"
    />
  ```

  <Note title="Referencing examples">
    If the example includes a `summary` or `docs` field, use that for the `example` prop. If not summary is set, use the example name.
  </Note>
</Steps>

## Variants

### Filter languages

Use the `languages` prop to filter which languages appear in the dropdown and control their order.

<div>
  <div>
    <EndpointRequestSnippet endpoint="POST /chat/{domain}" languages={["curl", "python", "typescript"]} />
  </div>
</div>

```jsx Markdown
<EndpointRequestSnippet 
  endpoint="POST /chat/{domain}" 
  languages={["curl", "python", "typescript"]}
/>
```

### Show payload

The `payload` option displays the raw JSON request body for POST/PUT/PATCH requests, or query parameters for GET requests.

<div>
  <div>
    <EndpointRequestSnippet endpoint="POST /chat/{domain}" languages={["curl", "python", "payload"]} />
  </div>
</div>

```jsx Markdown
<EndpointRequestSnippet 
  endpoint="POST /chat/{domain}" 
  languages={["curl", "python", "payload"]}
/>
```

## Properties

<ParamField path="endpoint" type="string" required={true}>
  The endpoint to display, in the format `METHOD /path` (e.g., `POST /chat/{domain}`).
</ParamField>

<ParamField path="example" type="string" required={false}>
  The name of a specific example to display. If the example includes a `summary` or `docs` field, use that value.
</ParamField>

<ParamField path="highlight" type="number | number[]" required={false}>
  Line numbers to highlight in the code snippet. Accepts a single number, an array of numbers, or ranges (e.g., `{[1-3, 5]}`).
</ParamField>

<ParamField path="languages" type="string[]" required={false}>
  Specifies which languages to show in the dropdown and in what order. Supported values include `curl`, `python`, `typescript`, `javascript`, `go`, `ruby`, `java`, `kotlin`, `csharp`, `php`, `swift`, `rust`, and `payload`. When not specified, all available languages are shown.
</ParamField>