One of the top requests we have heard from the AMP community is the ability to use AMP’s highly performant AMP components in non-AMP pages. The AMP Project has been hard at work for 2 years trying to address this request in an effort that we have called Bento AMP. To be specific, our goal is to allow developers to leverage the performance and user experience benefits of AMP components without having to use the entire AMP runtime. Today, we are excited to say that we are one step closer to making this a reality with the release of a developer preview! Read the getting started guide to try the Bento components out!
Why use AMP components anywhere and everywhere?
The AMP Project’s goal has always been to help developers create great user first experiences. AMP’s highly performant and user centric components are a key part of this value proposition. And now with Bento AMP you can use AMP components where needed. You can now mix AMP components with your favorite framework and CMS.
For example, developers can use Bento components for one-off cases such as adding a carousel to an otherwise non-AMP page, or as a way of testing out AMP components on the path to being valid AMP. Keep up with the latest progress in the Bento AMP project via the working group on GitHub, or learn more about what’s next in AMP.
Developer Preview
The current release is a developer preview of a few standalone AMP components. Our goal is to gather feedback on the feasibility of our technical implementation. Bento AMP components currently still need to use the AMP runtime, but no longer require pages to be “valid AMP” for the components to work. This means you can import a standalone AMP component on your page alongside other custom JavaScript if needed.
Trying Bento AMP components
To get started, first read the guide here. The following Bento components are available experimentally during our developer preview:
- amp-accordion
- amp-base-carousel
- amp-inline-gallery
- amp-stream-gallery
- amp-date-countdown
- amp-date-display
- amp-fit-text
- amp-instagram
- amp-lightbox
- amp-selector
- amp-social-share
- amp-timeago
- amp-youtube
- amp-video
Please note that since this is a developer preview, using Bento components on AMP pages will make them invalid. This is something we intend to change in our full launch. We are excited to offer these initial Bento AMP components to gather developer feedback, however we encourage that developers use the latest production version of the AMP components to create valid AMP pages when deploying AMP experiences while the Bento components are in developer preview.
The future of Bento
Going forward, we plan to fully launch and allow Bento components on all HTML documents. This allows developers to leverage these high performing components to create great page experiences. Look out for this change later this year!
We also plan to publish the React version of Bento components next as npm packages. This will make it even easier for React apps to use Bento AMP components!
Try Bento now!
Read the getting started guide to try out Bento AMP components! The AMP team encourages and welcomes developer feedback through GitHub and our Slack channel. Please reach out with any questions or issues!
Posted by Naina Raisinghani, Product Manager, AMP Project