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.

Introduction

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.

CODE

How to publish AMPs

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

CODE

AMP for E-Commerce Getting Started

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

CODE

Components

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

amp-access-laterpay

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

CODE

amp-access

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.

CODE

amp-accordion

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.

CODE

amp-ad

How to display Ads in your AMP HTML files.

CODE

amp-analytics

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

CODE

amp-anim

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

CODE

amp-app-banner

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

CODE

amp-audio

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

CODE

amp-bind

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

DEMO CODE

amp-brid-player

Embed Brid Player videos in your AMP HTML files.

CODE

amp-brightcove

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

CODE

amp-call-tracking

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

CODE

amp-carousel

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

CODE

amp-dailymotion

Embed daily motion videos into your AMP HTML files.

CODE

amp-dynamic-css-classes

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

CODE

amp-experiment

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

CODE

amp-facebook

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

CODE

amp-fit-text

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

CODE

amp-font

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

CODE

amp-form

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

DEMO CODE

amp-fx-flying-carpet

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

CODE

amp-fx-parallax

The amp-fx-parallax extension allows an element to move as if it is nearer or farther relative to the foreground of the page content.

DEMO CODE

amp-gfycat

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

CODE

amp-gist

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

CODE

amp-google-vrview-image

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

DEMO CODE

amp-hulu

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

CODE

amp-iframe

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

CODE

amp-ima-video

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

CODE

amp-image-lightbox

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

CODE

amp-img

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

CODE

amp-instagram

Embed instagram videos and photos into your AMP HTML files.

CODE

amp-install-serviceworker

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

CODE

amp-jwplayer

Embed jwplayer videos in your AMP HTML files.

CODE

amp-kaltura-player

Embed Kaltura videos in your AMP HTML files.

CODE

amp-lightbox

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.

CODE

amp-list

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

CODE

amp-live-list

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

CODE

amp-mustache

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

CODE

amp-o2-player

Embed o2 player in your AMP HTML files.

CODE

amp-pinterest

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

CODE

amp-pixel

amp-pixel is a lightweight mechanism for measuring pageviews.

CODE

amp-reach-player

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

CODE

amp-selector

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

CODE

amp-sidebar

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

CODE

amp-social-share

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

CODE

amp-soundcloud

Play soundcloud tracks from within AMP HTML files.

CODE

amp-springboard-player

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

CODE

amp-sticky-ad

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

CODE

amp-twitter

Embed tweets into your AMP HTML files.

CODE

amp-user-notification

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

CODE

amp-video

Embed videos into your AMP HTML files.

CODE

amp-vimeo

Embed Vimeo videos in your AMP HTML files.

CODE

amp-vine

Embed Vine videos in your AMP HTML files.

CODE

amp-youtube

Embed YouTube videos into your AMP HTML files.

CODE

Advanced

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.

CODE

Click-to-play overlay for amp-video

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

CODE

Custom Loading Indicators

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

CODE

How to create interactive AMP pages?

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

DEMO CODE

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.

CODE

Image Galleries with amp-carousel

The amp-carousel component works great for image galleries.

CODE

Integrating Videos in AMP an Overview

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

DEMO CODE

Layout System

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

CODE

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.

CODE

Payments in AMP

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

DEMO CODE

Star Rating

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

DEMO CODE

Tab Panels with amp-selector

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

DEMO CODE

Using the AMP URL API

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

CODE

Using the Google AMP Cache

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

CODE

Video Carousels with amp-carousel

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

CODE

Samples & Templates

Templates and metadata samples for different kinds of AMPs.

Comment Section

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

DEMO CODE

Housing

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

DEMO CODE

Live Blog

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

DEMO CODE

News Article

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

DEMO CODE

Poll

This is a sample template for a poll in AMP.

DEMO CODE

Product Browse Page

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

DEMO CODE

Product Page

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

DEMO CODE

Recipe

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

DEMO CODE