Work with content via the API

Work with your site’s content as data over the JSON:API: fetching directly is for content that is not the current page (a listing, a detail query, a feed for a channel with no pages to compose). That holds whether the fetch runs in a headless app, in a Canvas code component, or in a script. To build a frontend, Canvas Headless is the recommended path, starting at its quickstart; the two compose, with Canvas rendering the pages and direct fetches carrying the data.

The quickstart runs your first query from the terminal, and First fetch renders content in an app. From there: precise queries, both fetch contexts, languages, writes, and webhooks.

QuickstartFind a content type's machine name, list its published entries, and prove query parameters work with page[limit].

First fetchAdd the content fetch to the app from the Canvas Headless quickstart (or any app), pull one content type from your Source CMS site over JSON:API, and render it locally. All in under 10 minutes.

Query by type, field, and relationshipFilter with operators, trim responses with sparse fieldsets, pull related entries without N+1, paginate, sort, and compose it all into one request.

Fetch content directlyHow a direct Content API request works, where the fetch belongs in Next.js, Astro, Nuxt, and TanStack Start, what a Canvas code component may fetch, how to cache and revalidate, and how to map responses to components.

Work with multilingual contentRequest content in a specific language with the langCode parameter, opt into fallback deliberately with includeFallback, and map frontend route locales to site languages.

Create and update contentEnable API writes, then create, publish, update, and delete entries over JSON:API with a token from a client granted content:administer.

Create and update translationsCreate, update, and delete single translations over JSON:API with the langCode parameter, without touching an entry's other languages.

React to content changes with webhooksRegister an outgoing webhook, handle it in your frontend to trigger revalidation, and diagnose failed deliveries.