The AMP Project Roadmap
This is a high level overview suitable for all audiences. For a more detailed developer view, head to GitHub.
- Dedicated autocomplete component
Dedicated component for an autocomplete field using AMP.
- <amp-img> sizes="auto" for srcset
I find making Responsive Images in amp-html actually harder than normal HTML (which should not be the case).
- Explore AnimationWorklet and co. in AMP's scrollbound animations.
Explore using ScrollTimeline and AnimationWorklet (Chrome Origin Trial feature) in AMP's scrollbound animations.
- auto lightbox <amp-img>
Currently developers can mark an `<amp-img>` to be lightboxed by adding the `lightbox` attribute to it.
- Enable use of AMP Components outside of AMP pages
Explore the idea of using AMP components in non AMP pages.
- Payment component in AMP
AMP currently supports transactions in only limited contexts like via amp-iframe w/ the Payment Request API — however this omits many important use cases. This activity would implement a more robust payment component in AMP, potentially including integrations with third-party payment processors, widgets, wallets, etc (these should be supported somehow regardless).
- Scroll-freeze effect
Highly interactive documents on the web often employ a "scroll-freeze" effect, where scrolling the page temporarily stops in order to display a scroll- or time-bound animation. This activity implements this feature in AMP in such a way that it avoids common UX issues with this pattern (for instance, when the user feels "trapped" due to performance issues or unclear feedback when scrolling the page)
- Launch amp-vega-viz
amp-vega-viz has existed in AMP under experimental mode for over a year — this task is to assess the component for launch-readiness and then launch it
- amp-list v2
amp-list addressed a number of critical use cases when AMP first launched, but developers have struggled with a set of smaller issues that make the component generally hard to use. This issue is to fix those issues and relaunch under a new name.
- Finalize design and begin implementation of "Roots"
Effort to refactor AMP's internal APIs (e.g. services) to reduce bugs, improve usability, and scale them to future endeavors like AMP "out-of-box" and 1-pass optimization.
- Leaner AMP
- AMP Google Pay
Adds support for integrating Google Pay experiences into AMP pages.
- Create an onboarding developer portal for ads
The feature captures the development of a portal that would help developers understand the tools available to them both for ads being served to AMP pages and non-AMP Pages, including when the ads are legacy ads (ads with JS in them) vs when they are AMPHTML ads.
- Instrument & tweak legacy ad performance with no impact to UX
- Legacy ads (ads that consist of JS) on AMP pages some times have indeterministic behavior in regards to how quickly they appear on screen. This can happen in two different situations: 1) When the AMP page loads and looks entirely loaded by the ads take close to 5-6 seconds to load 2) Ads further down the viewport (even within 5 viewports) are not rendered even when scrolling down 10 seconds after pausing in the first viewport.
- Improve video playback reliability for stories
- Support paywalls in amp-story
Stories should support paywalls, similar to how standard AMP documents support paywalls through the usage of the `amp-access` component.
- TypeScript in AMP
Add TypeScript support to AMP and allow new extensions to be written in TypeScript.
- Allow ads to be position fixed on desktop canoncial
We have a requirement to make an ad sticky in an article template for a publisher in the right hand column on desktop (AMP as canonical). If we add a position fixed the ad doesn't render.
- Support rendering Sponsored Story Ads within stories
Sponsored Story Ads could be entirely inlined within the organic story instead of having to load the sponsored story in a new tab or with a redirect. Full design in the works.
- Instrument and speed up non-AMPHTML ads
AMPHTML ads are given preference over non-AMPHTML ads on AMP pages. This is because we don't know how non-AMPHTML ads can affect performance of the AMP page. The degree to which they are throttled should be instrumented and ensured that there are no idle cycles being spent after page load and before the ads are being loaded.
- Ads - Add Auto-Ad support for all ad networks
AdSense currently support auto ads. Make it generically available for any network to implement auto ads support.
- New default loaders for AMP
New loaders that indicate an image or embedded feature is loading will be utilized in AMP and are in the process of being built. A current 3-dot loader exists. This issue also encompasses the research necessary to determine whether redesigns will be received favorably by comparison.
- Launch `amp-date-display`
This feature allows you to display a time that is local to the user (shown in their timezone) as opposed to a constant timezone as set by the author.
- Support AMPHTML ads in mobile apps
This will require the ads SDK that renders the ad to recognize and deliver the AMPHTML ad to get information like view-ability and getting scroll bound animations to work.
- Rewrite the AMP Runtime for ads
When an AMPHTML ad is inside an non-AMP page context, it loads the entire AMP runtime. Although the AMP runtime is performant, it still has a lot of functionality that is irrelevant for rendering an ad. (e.g. scheduling) This feature captures the effort to rewrite the AMP runtime in a way that's specifically catered for ads and in the process, reduce the ad runtime size to 50% that of the AMP runtime and also decrease ad render time. In addition, this feature will also include additional ad specific library compliance like SafeFrame and MRAID out of the box.
- Support IAB Consent Framework using amp-consent
At the moment, consent within amp-consent is binary. Either the user can accept consent for all vendors on the page or reject consent for all vendors on the page. This feature provides the ability for a user to accept or reject consent on a per vendor basis. Further, this could also be enhanced to support consent on a per vendor *and* per purpose basis. for e.g. a user should be able to give consent at a granular level to Vendor A for the purpose of analytics but reject consent to Vendor A for the purpose of ads. Master issue is #15651
- Hero video component
It benefits users to focus an article on primary video content (even when there's other content on a given page) when the user's intent to watch that video is clear. This feature would give sites and platforms the ability to opt into a "hero" treatment for video on load: ex. pinned to the top of the page; in a lightbox; playing while minimized to corner.
- amp-carousel v2
Re-factor and re-launch a new version of amp-carousel to address a number of user & developer needs, including dynamic & responsive content, UX updates, and using amp-carousel outside of the context of valid AMP
- One-line PWA
Some PWA features are technically simple, but others can be challenging to implement and maintain. This means that a great AMP & PWA site is out of reach for many developers. This feature feature would make it trivially easy to implement a good AMP & PWA combination with just one line of code.
- amp-ima-video: Use native controls.
With using native controls we will get UX consistency, built-in accessibility,Volume, Chromecast, AirPlay, Closed Caption, etc..
- Improved resizing rules for amp-list
This issue captures the work needed to address a number of related amp-list resizing issues.
- Enhancements to amp-consent
This is a master issue to track the second phase of amp-consent which focuses on more advanced use cases of amp-consent. All active features in discussion from the initial amp-consent [implementation] (#13716 ) have been moved to this issue.
- Substitution variables for amp-consent
This feature will enable a publisher to incorporate amp-consent related status information via AMP's substitution variable framework (originally proposed [here](https://github.com/ampproject/amphtml/issues/14916#issuecomment-387766377)).
- Default loading state improvement for all components
AMP has a default loader for most content that depends on an external server call for content. Currently it's an animated ellipsis for most cases, and a more polished design for ads. This feature is to create a more polished design across all components that need it, and to possibly differentiate designs based on the context.
- Input masking
A common pattern on the web to assist form completion is input masking: automatically inserting expected characters and spaces in a given form input. For instance, "+1 (_ _ _) _ _ _-_ _ _ _" for a phone number in the United States. As the user types, their input fills out the blank entries, and sometimes showing validation issues automatically. This feature is to implement this type of input masking, with a flexible way to implement a system of expected characters and spaces, good default UI for the spaces, ways to easily customize, and a way to integrate with standard form validation.
- Land redesign of AMP layout system (Layers)
Land the redesign of AMP's layout system to support nested and horizontal scrolling AKA "Layers".
- Doc-level infinite scroll
Support document-level infinite scroll, such that when the user reaches the end of the core content of an AMP document (an article, a product detail page, etc), a call can be made to an arbitrary endpoint to fetch additional documents to be dynamically loaded into the view. For the best user experience, users should never see a loading spinner, but instead should either be presented with already-loaded results, or a "recommended content" section to navigate to more.
- Minimize video to corner on scroll
Often users want to continue watching a video at the same time that they view more content on a web page (see a recipe being made at the same time as jotting down ingredient list or reading steps one by one; watching footage of a news story while reading a deeper dive on the content). This feature is to implement a UI that makes this easy: minimizing videos to the corner of the screen when the user has scrolled them sufficiently out of view. Controls should be available to pause, mute, go to fullscreen, or dismiss the video. Should integrate well with similar platform-level UIs.
- Seamless page transitions
Users highly value page transitions that preserve as much context and happen as quickly as possible, but standard page navigations refresh the entire page (header bars, menus, etc disappear and reappear again), increasing actual and perceived loading time. App shell patterns (as with progressive web apps) address this opportunity—[this feature](https://github.com/ampproject/amphtml/issues/12981) is to provide a trivially-easy-to-implement way to get similar functionality with minimal effort.
- Ideation to better support for dynamic content
Developers have a range of options in AMP for supporting dynamic data (data that changes based on user-related parameters) when served from a cache: amp-list, amp-geo, amp-bind, etc. However, AMP does not currently offer good support for a number of remaining use cases. This issue tracks the task of identifying additional use cases and brainstorming with core AMP contributors how to better support a broader range of dynamic data in AMP
- Experimental availability of amp-script
amp-script is being developed in order to support a much broader set of interactivity in AMP and interoperability with non-AMP libraries & frameworks. This issue tracks the experimental release of amp-script. The viability of amp-script in production is still being investigated
- Loading state improvements for amp-list
amp-list is associated with multiple loading states, particularly when integrated w/ with amp-bind & infinite scroll. Some of these states can already be configured by developers and get a default loading state in order to communicate status to users. This feature is to ensure that more of these states are configurable by developers and get good default states to the extent possible
Remove “need to write custom JS for my use case” as top developer pain point.
- Public Documentation of AMP for Email
This a feature to capture the documentation work necessary to onboard different participants of the email ecosystem.
- Design/test a new desktop experience for stories
- [x] Create a prototype of a new desktop experience - [x] Test the prototype - [x] Integrate feedback - [x] Design a launch/rollout plan - [x] Roll out the new desktop experience
- Element-level infinite scroll
Support element-level infinite scroll, such that when the user reaches the end of a list of items (search results, product cards, etc), a call can be made to an arbitrary endpoint to populate the list with more items. For the best user experience, users should never see a loading spinner, but instead should either be presented with already-loaded results, or a button to tap to load more.
- Make stories respect responsive units
The fact that the amp-story desktop UI shows up to three `amp-story-page` elements in view at once can be problematic for designing responsively, because the size of the amp-story-page differs from the size of the viewport, so common responsive practices that are based on the viewport dimensions won't work (e.g. media queries, and the viewport units `vw`/`vh`/`vmin`/`vmax`).
- Allow custom sidebar content in stories
We should allow publishers to specify arbitrary custom content to be shown in a sidebar. The API and documentation should make it clear that every platform has the ability to display or not display this content. The sidebar can contain both runtime-specified content (configurable by viewer) and publisher-specified content.
- AMP Linker
We intend to implement a link decoration based solution for AMP pages to sync IDs across domains.
amp-video increasingly supports engaging and useful video features (analytics, muted autoplay, minimize-on-scroll), and some third-party players have adopted these features through video interface as well. However, single-business custom players can't get these features because they slip through the cracks: implementing them as new components isn't a good approach for AMP since they're not broadly useful to the community, which means they can't use video interface. [amp-video-iframe](https://github.com/ampproject/amphtml/issues/16252) would solve this by making these features available for custom video players via a special wrapper
- Add new analytics for stories
- Add an analytics trigger for when the user education overlay is shown (#15420) - Add an analytics trigger for when the video spinner is shown - Add an external facing classname for bookend links, so clicks can be tracked with `<amp-analytics>`
- Allow tapping on elements in amp-story-grid-layer
For any clickable element outside of amp-story-cta-layer, we should show a tooltip that defers the action until after the user has clicked on the tooltip.
- Implement support for ad server served ads in AMP Stories
Related to #12381. Background here: https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/amp-story-ads.md Provide the ability for ad servers to return single page or sponsored story ad from an ad server so that it's spliced in real time into the organic story.
- Implement support for publisher served ads in AMP Stories
This feature will enable a publisher to hardcode an ad story page inside an AMP Story until more ad servers support delivery of ads for AMP Stories.
- Support Viewability and Spam Detection instrumentation in AMPHTML ads
Implement a common image-slider pattern for publications comparing two different but related images: celebrities then and now; maps of geographic regions before and after a significant change; documents before and after editing.
Implement the ability to pan and zoom on interactive content in order to support finely detailed interactive use case (e.g. seat pickers in ticketing transaction flows)
- Ads- Launch Real Time Config 2.0
Publishers often have the need to enhance an ad request with targeting or audience information. Real Time Config is a publisher configurable end point that's invoked before the ad request to the ad request is made, so the end point and respond with targeting information that is attached along with the ad request.
- Support signed exchanges
- Improve audio UX for amp-story
Right now it is unclear which story pages have audio and which do not. We should improve the audio experience by only showing the audio icon when it makes sense (#13652) and adding callouts as necessary.
- Support HTML5 ads in AMP Stories
AMP Stories currently supports publishers to deliver direct sold native story ads. This feature captures the work involved for delivering "regular", non-native programmatic and direct sold ads. This allows publishers and advertisers to use existing ad demand instead of having to develop natively for stories.
- Support RTL for amp-story
Right now, everything is designed as LTR. This is a cover bug for enabling RTL support. We should consider the story to be RTL if:
- Trigger video fullscreen in landscape
Some browsers offer the capability to automatically trigger video fullscreen in landscape, sometimes at the browser level and sometimes through a developer opt-in. We want this feature to work just as it does per browser (either automatically or via opt-in).
- Tilt-based animations
Developers sometimes link device title to the background position of images, so that the content shifts on the screen in different directions and at different speeds based on the direction and degree of tilt. Ideally we can link this to an intuitive natural metaphor, so it feels predictable and natural. Phase one will be a low-level API along the lines of amp-position-observer, that allows such animations at a basic level.
- Reimplement viewport implementation as a shadow root
- Support inline CSS
When AMP launched, inline CSS was not supported. This limitation meant that it took developers longer to implement pages—this feature entails implementing support inline CSS without sacrificing the performance guarantees of AMP.
- Productionize and integrate AMP JS validator into runtime
- Leaner AMP
Goal: Reduce size of AMP’s main JS binary by 50%. Corollary: Do not regress parse, compile, and execution time of the JS.
- File upload
Until now it has not been possible to upload files from an AMP document. This feature is to support the ability to upload files in AMP with a simple, flexible API with no built-in styling of its own.
- Date picker
Well-designed date pickers are a common requirement for web pages that require users to select a date (e.g. scheduling an appointment, choosing a range of dates as criteria for a flight or hotel search, etc). The range of customizations needed to create good UX across the required use cases is not handled directly or consistently across the web platform, so custom JS is required for most developers—and consequently we needed to build this into AMP!
`<amp-form>` didn't launch with support for `<input type="password">`, due to the initial complexity, but developers have started to ask for this flexibility. This type of input, where the characters are visibly masked as a bullet or asterisk, is used in cases where third parties can directly see the screen of users entering confidential information.
- amp-consent support in amp-story
Bring the feature described in #13716 into amp-story.
- Easy fly-in-on-scroll
amp-position-observer makes it possible to create complex scroll-bound & scroll-triggered animations. However, we want to make some of the most common animations trivially simple to implement. This feature covers the case where arbitrary HTML elements translate slightly across the page in as the user scrolls them into view—both the scroll-bound case and scroll-triggered, time-based case. Developers will be able to configure aspects of the animation like trigger points, timing, and animation curve.