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.


The amp-3d-gltf component displays 3D models that are in glTF format.


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


The amp-access component adds support for authentication and authorization, allowing you to limit access to parts of your AMP pages as well as display customized content for the logged in user.


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.


AddThis Floating Bar and Inline Share Buttons are available for AMP! Make it simple for website visitors to share your content with our free social sharing buttons.


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


Use amp-anim to 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 Bodymovin animations in your AMP HTML files.


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.


The amp-dailymotion component allows to embed daily motion videos into your AMP HTML files.


amp-date-countdown component allows to create a dynamic timer that counts down to the given date and time which you can render in your AMP page.


The amp-date-display component renders date information in various date formats and in different locales.


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 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-comments component allows embedding Facebook comments into AMP files.


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


The amp-facebook-page component allows embedding Facebook pages into AMP files.


The amp-facebook component allows embedding both Facebook 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.


The amp-geo extension makes it possible to vary small sections of content based on an approximation of the users' country-level location, similar to the level of an ISO Country Code.


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.


Use the amp-google-document-embed component to embed PDFs and other documents formats directly into your AMP HTML files.


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.


The amp-image-slider component allows comparing 2 images by moving the vertical slider bar.


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


Input masks automatically add formatting characters to user input, and prevent users from typing input that doesn't match the mask.


Use the amp-instagram component to 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.


Use the amp-jwplayer extension to embed jwplayer videos in your AMP HTML files.


Use the amp-kaltura extension to 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 enables client-side rendering in AMP.


The amp-live-list component provides content updates at a configurable frequency (min is 15s) from the client.


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


amp-next-page allows you to add an infinite scroll style experience to your AMP pages.


Use the amp-o2-player component to embed the o2 player into your AMP HTML files.


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


amp-pixel is a lightweight mechanism for measuring pageviews.


Use the amp-reach-player component to embed videos hosted on Beachfront Reach in your AMP HTML pages.


The amp-reddit component allows embedding both reddit posts and comments into AMP files.


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


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


The amp-social-share component provides a common interface for share buttons, styled to complement each other.


Use the amp-soundcloud component topPlay soundcloud tracks from within AMP HTML files.


Use the amp-springboard-player component to 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"


Use amp-twitter to embed tweets into your AMP HTML files.


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


With amp-video-iframe you can include a custom-built video player that will obtain all the features available in the AMP Video Interface


Use amp-video to embed videos into your AMP HTML files.


Use amp-vimeo to embed Vimeo videos in your AMP HTML files.


Use amp-vine to embed Vine videos in your AMP HTML files.


The amp-web-push component allows users to subscribe to web push notifications.


Use amp-youtube to embed YouTube videos into your AMP HTML files.


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

Advanced Video Docking

With amp-video you can have rich user interface features, such as docking (minimize-to-corner).

Autosuggest form

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


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.

Copy Button

This is a sample showing how to add a "copy" button to your page, allowing the user to copy some fixed item per-page.

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

If you need more fine-grained geolocation support than provided by the amp-geo extension, you can implement 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.

Joining Analytics Sessions

Linker is an amp-analytics feature to join user sessions from the AMP Cache domain to publisher origin domains.

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.

OAuth2 Login

This sample showcases how to use amp-access to allow an OAuth2-based login flow on your AMP pages, such as Google, Facebook and GitHub sign-in.

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.

SeatMap Multiple Selection

This sample allows to multiple select seats in a seatmap with one click: this is useful when an user wants to book adjacent seats without clicking multiple times; go here for the basic seatmap sample.


This is a sample showing how to implement a seatmap that can be used for theaters, cinemas, airplanes and more.

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 an 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.

Video rotate to fullscreen with hint

This is a sample template for implementing rotate-to-fullscreen with a user hint in AMP.

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.

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 orientation effects

amp-orientation-observer combined with amp-animation is a powerful building block that can handle various uses-cases that are dependent on the orientation of the device.

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 a 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.

Shopping Cart

We use amp-list, to show a dynamic list of items in the cart.