Forms / Carousels / Gamification / Quiz inside your Email - AMP Way

About me

Senior Product Developer involved in developing frontend application tools to provide solution for the client usecases.

The problem I wanted to solve

Visual editor / builder / designer tool to generate Forms / Carousels / Gamification / Quiz inside your Email using Google AMP (Accelerated Mobile Pages) for email.
Emails to have multiple step forms / quizes / accordion / carousal / social media components to enagage the customers when sending/responding the email content.
AMP framework is to generate mobile first page, great page experience forms, responsive layouts.

What is Google AMP (Accelerated Mobile Pages) DIY Visual Builder / Editor?

Visual editor / builder / designer tool to generate Google AMP (Accelerated Mobile Pages) email template.

Below is the link for the amp email editor.
https://emaildojo.io/amp-email-editor

Tech stack

AMP Framework (https://amp.dev/) / Javascript / JQuery / Node JS

The process of building Google AMP (Accelerated Mobile Pages) DIY Visual Builder / Editor

Editor will generate the html and that html has to be parsed / extracted to generate the amp content which gets validated by the amp framework.

Challenges I faced

Not all the elements / formats gets validated in the amp frameworks, so everytime when we generate new component / style properties we need to verify with the AMP framework validator.

Key learnings

• DOM inject, iteration, filtering etc,
• AMP components and AMP State understanding.
• Parser to convert to from HTML format to AMP.

Final thoughts and next steps

This AMP Email Editor can be extended to be used for building AMP Website / AMP Ads / AMP Stories.
This editor can be used to generate/support Non-AMP content and extending the use case by using bentojs(https://bentojs.dev/).