Awesome AMP HTML ·

A curated list of AMP (Accelerated Mobile Pages) repos, examples, starters, tutorials, components, modules, videos, and anything else useful.

Inspired by the awesome-* trend on GitHub.

AMP is a web component framework to easily create user-first websites, stories, ads and emails.

Contents

• About
• Getting Started
• Development and Optimization
• Testing
• Integrations
  • Wordpress
  • Magento
  • React
• Templates
• Community

About

AMP is a free, open-source web component framework that powers all kinds of experiences on the web. Its mission is to improve the web for everyone – publishers, platforms, advertisers, creators, and of course, users. The AMP Project enables the creation of user-first websites, immersive tappable stories, lightning-fast ads, and dynamic email.

Getting Started

• Official Documentation:
  • AMP Websites - Web pages that are compelling, smooth, and load near instantaneously.
  • Web Stories - Use AMP to create visual stories on the web.
  • AMP Ads - Use AMP to build and serve lightning fast, safe ads to pages and stories.
  • AMP Email - Use AMP to send interactive, dynamic emails.
  • Tools - Tools for creation, design and development of AMP html projects.
• Official Repository - The AMP web component framework.
• The AMP Channel - Official YouTube channel of the AMP project.
• Examples - AMP examples.

Development and Optimization

• AMP Validator - Web interface for validate AMP html.
• Experiment Configurator - Beta-test new features of AMP before they're available for everyone.
• AMP Playground - Start prototyping in an interactive online editor.
• AMP Toolbox - A collection of AMP tools making it easier to publish and host AMP pages.
• AMP Page Experience Guide - Analyze and learn how to optimize your AMP pages for Google's page experience ranking signal.
• VS Code Extension - Makes authoring AMP easy by validating for errors/warnings as you type within VS Code.
• AMP Prototyper - A prototyping tool that automatically converts a HTML page to AMP for demonstrating performance gains with AMP.

Testing

• Google AMP Test - Test if and how your AMP page appears in Google Search.
• Gmails AMP for Email Playground - Draft AMP emails, see a live preview, and have your emails sent to your own Gmail account for testing.
• Mail.ru AMP Playground - Draft AMP emails, see a live preview, and have your emails sent to your Mail.ru account.

Integrations

Wordpress

• AMP for WP - Success with WordPress, powered by AMP with the Official AMP plugin.
  • AMP Plugin - The Official AMP plugin for Wordpress.
  • Ecosystem Plugins - Plugins compatibles with the Official AMP plugin for Wordpress.
  • Ecosystem Themes - Themes compatibles with the Official AMP plugin for Wordpress.
• AMP for WP Plugin - AMP for WP automatically adds Accelerated Mobile Pages (Google AMP Project) functionality to your WordPress site.

Magento

• AMP for Magento - Magento 2 AMP Extension.

React

• Nextjs AMP Support - With Next.js you can turn any React page into an AMP page, with minimal config, and without leaving React.
• react-amphtml - Use amphtml components inside your React apps easily.
• Storybook:
  • Storybook AMP addon - Storybook addon for AMP (Accelerated Mobile Pages). Allows to display in your stories AMP Html components generated with React.
  • @ampproject/storybook-addon - Storybook addon for building and testing AMP components.

Templates

• AMP Project Templates - Get started quickly with a ready-made design. Templates designed to work with all devices: mobile, tablet and desktop.
• amptemplates.io - A collection of responsive, blazing fast AMP templates from all over the web.

Community

• Stack Overflow - Recommended way to find answers to questions about AMP.
• Google's AMP forum - For AMP on Google Search questions or issues.
• @AMPhtml - Profile on Twitter.