Dynamic Content code samples

If you're getting started with Dynamic Content or are looking for practical examples of how to implement features such as preview and visualization, we have a number of code samples to help kickstart your development.

On this page we'll provide more details of our sample code projects, the features that they demonstrate and the languages and tools that they make use of. All of these samples are available on the Amplience GitHub repo.

For a complete list of our example content field and dashboard extensions see the example extensions page.

Next.js Static Blog

The product blog is a static site powered by Dynamic Content and developed using the JAMstack architecture.

Languages used: TypeScript/ JavaScript.


Next.js framework for React.


Key features demonstrated

  • How to build a static website with Dynamic Content
  • Using Dynamic Content webhooks to trigger a rebuild of a site when content changes
  • How to use the Content Delivery SDK. Fetching content at build time
  • Implementing preview and visualization to preview individual content items and the entire site at a specified date and time
  • How to implement searching and sorting
  • Using delivery keys to specify the URL path for a blog post

Find it on GitHub.


Algolia sample webhook integration

A sample webhook integration that demonstrates how you can keep an Algolia Search index up-to-date with published content from Dynamic Content.

Languages used: TypeScript/ JavaScript


Express.js framework for Node.js


Key features demonstrated

  • Setting up webhooks in Dynamic Content. A webhook is used to trigger an update of the Algolia search index when a content item is published
  • Using the Dynamic Content Management SDK to fetch the correct version of the content item from within the webhook app
  • Validating a webhook signature

Find it on GitHub.


Vue.js demo Algolia blog

An example app that makes use of the Dynamic Content and the Algolia integration to create a simple blog with keyword search features.

Languages used: TypeScript/ JavaScript


NuxtJS framework for Vue.js.


Key features demonstrated

  • Using the Dynamic Content Algolia integration
  • Setting up and using the Dynamic Content Accelerators
  • Using the Content Rendering Service with the Content Delivery SDK

Find it on GitHub.

Content managed PWA

A sample React / Next.js application that uses Dynamic Content for content management.

Languages used: TypeScript/ JavaScript


Next.js framework for React.


Key features demonstrated

Find it on GitHub.

Content Delivery SDK

Content Management SDK

Webhooks

Blog posts

How we built the Amplience Product Blog

The Dynamic Content Algolia integration

Sample web app powered with Dynamic Content and Algolia search

How to drive dynamic banners using search