Navigate to playground.amp.dev
Switch the format to AMP for Email
The HTML tag has the amp4email attribute to indicate the document type
The meta charset tag is required, like in AMP for Web
The <title> element is optional and can be removed
This line loads the AMP runtime, it's the same v0.js as with AMP for Web
The boilerplate is short and used to hide the body until v0.js loads
The <style> tag can be used for custom CSS, just like AMP for Web
Most importantly, the body tag is what the user sees and the AMP Playground updates it in real time
Open Gmail
A simple HTML email with some text and images
Paste the markup of the email we've just seen to Playground
Replace <img> with <amp-img> to make the email valid AMP
Move CSS from style attribute to style tag
Wrap everything inside <amp-accordion>
Make sure amp-accordion JS is added on top
Try expanding the accordion sections and make sure it all works
Open the Gmail AMP playground
Copy-paste the markup from AMP Playground to Gmail AMP Playground
Pick a subject for the email
Press Send
Go to Gmail and open the email that the playground sent
Open Gmail settings and find Dynamic email section
Enable the checkbox and open developer settings
Type in Playground sender email, amp@gmail.dev
Press OK and then save, Gmail will reload
Open the email again
Go back to playground, delete everything
Add amp-list
Write template that uses title, description and image
Add button to refresh amp-list
Copy-paste from AMP Playground to Gmail Playground
Change the subject and press Send
Go to Gmail and try it out
Try the refresh button