# JSON Viewer

> Source: https://agilitycms.com/docs/apps/json-viewer

The JSON Viewer app shows you exactly what the Agility Content Fetch API returns for the content item or page you're editing. Open it from the sidebar, switch between Live and Preview, and copy the JSON in one click.

It's useful any time you need to know what your front end actually receives: checking a field's shape before you write the component that renders it, confirming that a change made it into the Preview API, or answering "why doesn't my site show this?" without leaving Agility.

## What you can do

- **See an item's JSON:** in the content item sidebar, view the Fetch API response for the item you're editing.
- **See a page's JSON:** in the page sidebar, view the Fetch API response for the page, including its components.
- **Switch between Live and Preview:** Live shows the published version your site serves; Preview shows the latest saved version, unpublished changes included.
- **Refresh and copy:** reload the response after you save, and copy the JSON to your clipboard.

The response is requested with `contentLinkDepth=1`, so linked content one level deep is expanded, as most front ends request it.

## Who it's for

- **Developers** building or debugging a front end, who want the real API response without opening a terminal or an API client.
- **Editors and content leads** who want to check what a change looks like to the website before they ask a developer.

## Install the app

1. In Agility, go to **Settings** > **Apps**.
2. Find **JSON Viewer** in the marketplace and click **Install**.
3. Choose the instances to install it in.

There's nothing to configure. The app uses your instance's own API keys, supplied by Agility when the sidebar opens, so you don't enter or store a key.

## Use it

1. Open a content item or a page.
2. In the sidebar, open the **JSON Viewer** tab.
3. Choose **Live** or **Preview**.
4. After you save a change, click refresh to see the new response.

## Notes

- **Live shows published content only.** If the Live tab is empty or out of date, the item or page hasn't been published yet, or the change is still saved but unpublished. Check the Preview tab.
- **What you see is the API response, not your page.** Your front end may request content differently, for example with a deeper `contentLinkDepth`, so what it renders can differ from what the viewer shows.
- The app is open source: [agility/agility-fetch-sidebar-app](https://github.com/agility/agility-fetch-sidebar-app).

## Related

- [Apps SDK](https://agilitycms.com/docs/apps/apps-sdk)
- [Creating Apps for Agility](https://agilitycms.com/docs/apps/creating-apps-for-agility)

---

## Related pages

- [Google Analytics](https://agilitycms.com/docs/apps/google-analytics.md)
- [Google Translate](https://agilitycms.com/docs/apps/google-translate.md)
- [Hubspot](https://agilitycms.com/docs/apps/hubspot.md)
- [Power Fields](https://agilitycms.com/docs/apps/power-fields.md)
- [BigCommerce](https://agilitycms.com/docs/apps/bigcommerce.md)
- [Cloudinary](https://agilitycms.com/docs/apps/cloudinary.md)
- [Bynder](https://agilitycms.com/docs/apps/bynder.md)
- [Formstack](https://agilitycms.com/docs/apps/formstack.md)
- [TypeForm](https://agilitycms.com/docs/apps/typeform.md)
- [Secure Files - Azure](https://agilitycms.com/docs/apps/secure-files-azure.md)
- [Secure Files - AWS](https://agilitycms.com/docs/apps/secure-files-aws.md)
- [Vimeo](https://agilitycms.com/docs/apps/vimeo.md)
- [YouTube](https://agilitycms.com/docs/apps/youtube.md)
- [Posthog (Beta)](https://agilitycms.com/docs/apps/posthog.md)
- [DeepL](https://agilitycms.com/docs/apps/deepl.md)
- [Picker Fields](https://agilitycms.com/docs/apps/picker-fields.md)
- [SEO Analysis](https://agilitycms.com/docs/apps/seo-analysis.md)
- [Commercetools](https://agilitycms.com/docs/apps/commercetools.md)

Index of every docs page: https://agilitycms.com/docs/llms.txt