Learn AMP by Example

A hands-on introduction to Accelerated Mobile Pages (AMP) focusing on code and live samples. Learn how to create AMP pages and see examples for all AMP components.


Get started with AMP and learn how to build your first AMP page.

Hello World

An AMP HTML tutorial - learn the different building blocks of an AMP HTML file.

How to publish AMPs

There are a few things you need to watch out for when publishing Accelerated Mobile Pages (AMP).

AMP for E-Commerce Getting Started

Here is a quick getting started guide for creating e-commerce webpages with AMP.


How to support hreflang and internationalization with AMP.


AMP components in action. Learn how to build AMPs using the built-in components.


amp-access-laterpay allows publishers to easily integrate with the payment infrastructure platform LaterPay.


The amp-access component adds support for paywalls and subscriptions to AMP, allowing the publisher to control which content is accessible by the reader and with what restrictions.


An accordion provides a way for viewers to have a glance at the outline of the content and jump to a section or their choice at their will.


How to display Ads in your AMP HTML files.


The amp-analytics element can be used to measure activity on an AMP document.


Embed animations (gif, webp) into your AMP HTML files.


amp-app-banner provides a minimal UI for a cross-platform, fixed-position banner showing a call-to-action to install an app.


AMP replaces the HTML5 audio tag with its own version: amp-audio.


amp-bind allows you to add custom interactivity to your pages beyond using AMP's pre-built components.


Embed Brid Player videos in your AMP HTML files.


The amp-brightcove component allows embedding a Brightcove Video Cloud or Perform player.


amp-call-tracking replaces static phone numbers with dynamically generated phone numbers used for call tracking analytics.


The amp-carousel component allows displaying multiple similar pieces of content along a horizontal axis.


Embed daily motion videos into your AMP HTML files.


amp-date-picker is an AMP component which allows to select a single date or a range of dates.


AMP's dynamic CSS classes provided by the amp-dynamic-css-class tag enable boolean logic for a handful of conditions


The amp-experiment component allows to perform user experience experiments on an AMP document and collect resulting data.


The amp-facebook-like component allows embedding Facebook like button into AMP files.


The amp-facebook component allows embedding both posts and videos into AMP files.


amp-fit-text enables you to manage the size and fit of text within a given area.


Learn how to use the amp-font component to trigger and monitor the loading of custom fonts on AMP pages.


The amp-form extension allows the usage of forms and input fields in an AMP document.


The amp-fx-collection extension provides a collection of preset visual effects, such as parallax that can be easily enabled on any element via amp-fx attribute.


amp-fx-flying-carpet displays its children inside a container of fixed height.


Use the amp-gfycat component to embed animated GIFs from gfycat in your AMP HTML files.


The amp-gist component allows embedding of an entire gist or a single file.


The amp-google-vrview-image extension allows embedding 360 degree VR media into AMP pages.


Use the amp-hulu component to embed Hulu videos into AMP files.


Use amp-iframe for embedding content into AMP files via iframe.


amp-ima-video embeds a video player for instream video ads that are integrated with the IMA SDK.


The amp-image-lightbox component allows the user to expand an image to fill the viewport.


AMP HTML files don't support the normal HTML img tag.


Embed instagram videos and photos into your AMP HTML files.


The amp-install-serviceworker component enables service worker installation via same origin or via the Google AMP Cache.


Embed jwplayer videos in your AMP HTML files.


Embed Kaltura videos in your AMP HTML files.


The amp-lightbox-gallery component provides a "lightbox” experience for AMP components (e.g., amp-img, amp-carousel).


The amp-lightbox component allows for a “lightbox” or similar experience - where upon user interaction a component expands to fill the viewport, until it is closed again by the user.


The amp-list component fetches dynamic content from a CORS JSON endpoint and renders it using a supplied template.


The amp-live-list component adds support for publishing live updates to AMP pages as new content becomes available in the source document.


amp-mustache templates are a simple, structured templating system based on mustache.


Embed o2 player in your AMP HTML files.


The amp-pinterest component allows embedding a Pin It button or pin widget.


amp-pixel is a lightweight mechanism for measuring pageviews.


Embed videos hosted on Beachfront Reach in your AMP HTML files.


amp-selector lets the user choose from a list of options.


A sidebar provides a way to display meta content intended for temporary access (navigation links, buttons, menus, etc.).


The Social Share extension provides a common interface for share buttons, styled to complement each other.


Play soundcloud tracks from within AMP HTML files.


Embed videos hosted on the Springboard Video Platform in your AMP HTML files.


amp-sticky-ad adds support for ad units that always take a fixed place in the viewport in your AMP HTML files.


The amp-timeago provides fuzzy timestamps by formatting dates as "X time ago"


Embed tweets into your AMP HTML files.


Use amp-user-notification to display a dismissable notification to the user.


Embed videos into your AMP HTML files.


Embed Vimeo videos in your AMP HTML files.


Embed Vine videos in your AMP HTML files.


Embed YouTube videos into your AMP HTML files.


Advanced AMP integrations. Learn how to get the most out of AMP.

amp-user-notification with Server Endpoint

Use amp-user-notification to display a dismissable notification to the user.


This sample showcases how to implement an interactive autosuggest form field.

Click-to-play overlay for amp-video

Click-to-play is a common UX feature for video players on the web.


This sample demonstrastes a classic dropdown combo, with a text field which filters the dropdown elements according to the user's input.

Custom Loading Indicators

While the AMP runtime fetches content from endpoints, it will display a loading indicator.

Favorite Button

This sample demonstrates how to implement a favorite/like/bookmark button in AMP.

Geolocation with amp-list

While the AMP Caches don't offer support for geolocation, you can enable geo-based features with geolocation logic on your backend and amp-list.

How to support Images with unknown Dimensions?

This sample demonstrates how it is possible to embed images with unknown dimensions into an AMP page while maintaining the correct aspect ratio.

Image Galleries with amp-carousel

The amp-carousel component works great for image galleries.

Integrating Videos in AMP an Overview

There many different ways to integrate videos in AMP HTML files.

Layout System

There are a number of tools in AMP and CSS to make responsive documents.

Linked Dropdowns

These linked dropdowns are implemented using AMP components.

Long List of amp-instagram Embeds

A page with a long list of amp-instagram embeds to show how fast and responsive AMP pages are, this example contains 15 amp-instagram embeds.

Paged List

Often, users requests data that could fill multiple pages of content, so web applications must provide a way for users to navigate across pages of data.

Payments in AMP

Via amp-iframe and the allowpaymentrequest attribute, AMP pages can support requesting payment information directly from the browser.

Rich Media Notifications

Media notifications are one of the most common ways users control media playback on mobile devices.

Show More Button

This is a sample showing how to implement the "show more" design pattern.

Star Rating

This star rating widget is implemented using only CSS, given AMP's restriction on custom JavaScript.

Tab Panels with amp-selector

This is a implementation of tab panels that uses amp-selector.

Using the AMP URL API

The AMP URL API retrieves the matching AMP URLs for a given list of URLs.

Using the Google AMP Cache

The Google AMP Cache stores valid AMPs and provides a consistently fast access to AMPs.

Video Carousels with amp-carousel

The amp-carousel component works not only great for image galleries, but also for video galleries.

Dynamic AMP

Client-side filtering

This is a sample showing how to implement client-side filtering.

Dynamic Content After User-Interaction

This is a sample showing how to show dynamic content after an user interaction: the product availability will be shown based on product selection.

How to embed interactive elements on AMP pages?

This samples demonstrates how to embed interactive charts into AMP files.

Mixing Dynamic and Cached Data

This is a sample showing how to integrate product data details such as description, price, availability etc with different data freshness requirements.

Multi Page Flow

This sample demonstrates different approaches for how to implement a multi-step flow in AMP.

Visual Effects

Animated Snackbar

Snackbars provide brief feedback about an operation through a message at the bottom of the screen.

Basics of scrollbound effects

amp-position-observer combined with amp-animation is a powerful building block that can handle various uses-cases such as scrollbound animations, parallax effects and transitions as elements enter and exit the viewport.

Scroll to top

amp-position-observer combined with amp-animation can be used to implement a scroll to top button.

Samples & Templates

Templates and metadata samples for different kinds of AMPs.

Checkout Flow

This sample demonstrates how you can implement a simple checkout page in AMP.

Comment Section

This sample showcases how to build a comment section in AMP HTML using the amp-form component after a successful login flow.


This is a sample showing how to implement an hotel page.


This sample showcases how to build a housing page in AMP HTML.

Live Blog

This is a sample template for implementing live blogs in AMP.

News Article

This is a sample template for a news article in AMP.


This is a sample template for a poll in AMP.

Product Browse Page

This is a sample template for a news article in AMP.

Product Page

This sample showcases how to build a product page in AMP HTML.


This is a sample recipe AMP article demonstrating how to express machine-readable recipe data using JSON+LD.