I live-build a fully functional block-based email editor using Laravel, Vue 3, and Maizzle with AI as my pair programmer. Watch how I use Claude, GPT, and Junie to scaffold components, wire up real-time previews, and build something I’ll actually use every week.

Sign up for my newsletter here: https://aaronfrancis.com/newsletter

Follow me:
Twitter:  https://twitter.com/aarondfrancis 
LinkedIn: https://www.linkedin.com/in/aarondfrancis
Website: https://aaronfrancis.com - find articles, podcasts, courses, and more.

Chapters:
00:00 - What we're building: a block email editor  
00:39 - Live preview and Maizzle integration  
02:06 - Real dev workflow: AI-assisted coding  
03:02 - Starting the Laravel + Vue project  
04:00 - Drawing out the UI layout  
05:56 - Why this editor uses constrained blocks  
06:58 - Planning reusable components (YouTube, promo, etc.)  
09:11 - Setting up the Laravel route and view  
13:00 - Writing the first AI prompt  
14:47 - Feeding layout into Claude and refining structure  
18:12 - Why emails are hard and Maizzle helps  
20:20 - JSON block structure and the roundtrip render flow  
27:11 - Implementing dynamic components  
32:01 - Building the Vue editor UI  
38:50 - Creating the Maizzle.js project and dev server  
43:02 - Replacing JSON debugger with live preview  
47:38 - Live rendering emails using Maizzle server  
53:14 - Real-time email preview inside the app  
1:00:47 - Drag-and-drop reordering with blue drop indicators  
1:13:00 - Markdown block rendering  
1:20:00 - Tailwind CSS purging fix with inline tokens  
1:28:00 - Dynamic email preview fully working  
1:35:00 - Copy HTML to clipboard  
1:44:00 - Augmenting blocks with backend data  
2:00:00 - Adding the YouTube block with video preview  
2:10:00 - Final thoughts and how I’ll use this editor every week

Aaron Francis

A developer demonstrates building a visual email editor from scratch using AI coding assistants (Claude, ChatGPT, and JetBrains Junie) alongside Vue.js and Laravel. The project creates a block-based email builder with drag-and-drop functionality, where users can add components like headings and paragraphs, then preview the actual email output using Maizzle.js for proper email rendering with inlined CSS. The approach showcases practical AI-assisted development workflow, including iterative prompting, code refinement, and debugging.

Vibe coding a visual email editor with AI, Laravel & Vue