Problem/Motivation

The JSON:API Preview tab is extremely useful for inspecting the generated JSON:API output for an entity. However, when viewing the preview, there is currently no obvious way to identify the exact JSON:API endpoint URL that generated the response.

Users often need the endpoint URL for:

Front-end/headless application development
API testing with Postman, Insomnia, curl, etc.
Debugging JSON:API responses
Sharing API endpoints with developers and QA teams
Verifying resource paths and revisions

Currently, users must manually determine the endpoint URL from the JSON:API structure or construct it themselves.

Proposed Resolution

Display the JSON:API endpoint URL at the top of the preview page.

Example:

API URL:
https://example.com/jsonapi/node/page/7ed86648-9cca-4300-a119-fb45be31473b

Optionally

  • Render the URL as a clickable link.
  • Display the URL above the JSON payload.
  • Current Behavior

Desired Behavior

The JSON:API Preview tab should display the endpoint URL used to generate the preview.

Example:

API URL:
https://example.com/jsonapi/node/page/7ed86648-9cca-4300-a119-fb45be31473b

API Response:
{
...
}

This would be a small enhancement with a meaningful improvement to the developer experience.

CommentFileSizeAuthor
#2 view-json-api-url.jpg420.91 KBwluisi

Issue fork jsonapi_preview_tab-3593773

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

jyoti.singh created an issue. See original summary.

wluisi’s picture

wluisi commented
StatusFileSize
new view-json-api-url.jpg420.91 KB

Yeah, this is a great idea. We could pretty easily do this inside the JsonapiPreviewTabController > build() method, something like this:

$jsonapi_path = '/jsonapi/' . $entity->getEntityTypeId() . '/' . $entity->bundle() . '/' . $entity->uuid();

$build['content'] = [
  '#type' => 'link',
  '#title' => 'View JSON:API Url',
  '#url' => Url::fromUserInput($jsonapi_path),
  '#attributes' => [
    'target' => '_blank',
    'rel' => 'noopener noreferrer',
  ],
];

This will render a link that looks like this that opens in a new tab

example

Is this something you were interested in working on and contributing ? If not, I can probably work on adding this feature over the weekend.

wluisi’s picture

wluisi commented
Status: Active » Needs review

  • wluisi committed 2bdbc6bf on 1.0.x 
    feat: #3593773 Add API URL Display to JSON:API Preview Tab for Easier...
wluisi’s picture

wluisi commented
Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

wluisi’s picture

wluisi commented
Status: Fixed » Closed (fixed)

Thanks again Jyoti for suggesting this feature. It's been added to https://www.drupal.org/project/jsonapi_preview_tab/releases/1.0.1