Editor’s Note: the following guest post was written by Robin Van Opstal and Matthias Rohmer, developers at Jung von Matt
The AMP Playground allows you to quickly draft out ideas for all sorts of AMP products, no matter if it’s a website, a story, an ad or an email – and good news: in the last few weeks we streamlined the overall UX and added a lot more features for it to be even more helpful during your journey with AMP.
Auto import AMP components
AMP requires you to add <script> elements for the components you use to the <head> of your document. Keeping track of those can be cumbersome, especially if you are testing out whether a script element or an AMP component works better for your use-case. For real-world projects, the AMP Optimizer helps you by adding missing resource hints and removing those you don’t need. The same functionality is now available for the Playground. <script> tags for used components are simply added while you type away:
Import documents
Often enough, a developer won’t want to try something completely new on their page, but rather test how a feature might be added to an existing AMP site. While you could use any of the examples on amp.dev as a starting point by choosing one from the template dialog, you are now able to import arbitrary AMP documents directly into the AMP Playground. Just hit import and paste the URL of the document you want to work on.
You are now even able to import AMP Emails: simply save your mail to your local disk in the EML format. Then drop it into the AMP playground and get to hacking!
Inspect AMP state
With amp-bind AMP offers a mighty tool to add interactivity to your website. You could even build games with it! But with so many possibilities, it’s easy to quickly get in over your head… Seeing what’s going on in your document has never been easier as with the updated playground: import or create a document using amp-bind and open the AMP state fly-in. Now play around with the preview and watch every state update as it happens live!
Automatic hashes for amp-script
A few months ago we added another component that really brings AMP to the next level by allowing custom JavaScript while still being valid AMP: amp-script. But there’s a caveat: if you add inline JavaScript to your page, it’s only valid as long as your script content matches a hash defined in your document’s <head>.
Manually updating the hash with every single bit you add to your script is not really feasible, especially when you are building towards something and testing things out. But we’re here to help: the AMP Playground now automatically creates CSP hashes for every inline amp-script in your document so you can concentrate on building something new instead of refreshing hashes.
Enable experiments
New AMP features are carefully developed and tested before they get rolled out to millions of AMP domains. To ensure a new feature doesn’t break production sites but is still testable without building AMP yourself, the Playground hides unfinished features behind experiment flags. You can learn more about experiments in Enable experimental features over at amp.dev.
To enable experiments in the playground there’s no need to fiddle around with the browser console and manually call AMP.toggleExperiment(). You can simply open the experiments fly-in and pick any experiment from the list. Disabling it afterwards is just as easy.
Shareability
To top it all off, we finally built a feature that has been requested a lot: snippets you’ve created in the playground are now shareable by URL. As with the other features, hit the share button and a fly-in with the sharing URL will open.
Summary
We hope these new features make the Playground a lot more useful for you. And as always: if there’s a feature you are still missing or something is not working as you think it should, we look forward to your feedback on GitHub.