Uploaded July 2025 | Updated September 2026, 3 days ago
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: aaronfrancis.com/newsletter
Follow me:
Twitter: twitter.com/aarondfrancis
LinkedIn: linkedin.com/in/aarondfrancis
Website: 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
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: aaronfrancis.com/newsletter
Follow me:
Twitter: twitter.com/aarondfrancis
LinkedIn: linkedin.com/in/aarondfrancis
Website: 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
