How to Create a Live Email Preview Tool with CKEditor and iframe in ASP.NET Web Forms

Sometimes, it’s the simple tools that make the biggest difference in user experience. One such powerful feature I recently implemented was a live email preview tool — a side-by-side panel that allows users to write rich content and instantly see how it would look in an email format.

If you’re developing a content editor, email composer, or CMS using ASP.NET Web Forms, adding a real-time preview feature with CKEditor and an iframe is a smart way to improve usability. Here’s how you can create one from scratch.

Project Goal: Real-Time Email Preview in ASP.NET Web Forms

The goal was simple:

• Use CKEditor to give users a rich text editing experience
• Display the typed content immediately in a preview pane styled like a real email
• All within a clean, responsive layout using Bootstrap

The Layout: Editor and Preview Side-by-Side

The layout is split into two Bootstrap columns:

• Left Column: A <textarea> enhanced with CKEditor for rich text editing
• Right Column: A hidden preview panel using an iframe that becomes visible once content is typed

HTML Layout Code:

<div class=”col-md-6″> <div class=”form-group”> <textarea class=”form-control” id=”paragraphInput” runat=”server” rows=”20″ placeholder=”Enter your paragraph here…” style=”min-height: 100px;”></textarea> </div> </div> <div class=”col-md-6″> <div class=”email-preview-container” id=”divframe” style=”overflow: auto; height: auto; display: none;”> <iframe class=”mailIframe” style=”width: 100%; height: 100%; border: none; display: none;”></iframe> </div> </div>

CKEditor Integration in ASP.NET Web Forms

To transform the plain textarea into a modern rich text editor, I integrated CKEditor. It’s lightweight, customizable, and perfect for this use case.

Here’s how I initialized CKEditor with a minimal toolbar setup:

JavaScript for CKEditor Setup:

$(function () { let editor1 = CKEDITOR.replace('<%=paragraphInput.ClientID%>', { toolbar: [ { name: 'basicstyles', items: ['Bold', 'Italic'] }, { name: 'paragraph', items: ['NumberedList', 'BulletedList'] } ] });

editor1.on('change', function () { var content = this.getData(); let iframe = document.querySelector('.mailIframe'); iframe.srcdoc = buildIframeTemplate(content); $('.mailIframe').show(); $('#divframe').show(); });

// Initialize iframe on page load iframe.srcdoc = buildIframeTemplate(editor.getData()); });

Here, we’re listening to CKEditor’s change event to update the preview in real-time. The content is wrapped with a template and injected into the iframe using the srcdoc property.

Creating the Preview Template for Emails

To make the iframe preview feel like an actual email, we wrap the user’s input in a clean HTML structure. This ensures consistent formatting and professional styling.

Template Function:

function buildIframeTemplate(content) { return `

<!DOCTYPE html> <html> <head> <style> body { font-family: Arial, sans-serif; padding: 20px; color: #333; } </style> </head> <body> ${content} </body> </html> `; }

With this, the email preview appears clean, padded, and styled like a message you’d find in a modern inbox.

Implementing a live preview panel in ASP.NET Web Forms using CKEditor and iframe.srcdoc was surprisingly smooth — and incredibly effective.

Key Takeaways:

• CKEditor makes content editing intuitive and customizable
• iframe.srcdoc enables real-time rendering without needing server-side refreshes
• This setup is perfect for email builders, newsletters, CMS tools, or feedback forms

Future Enhancements

This live preview tool is easy to extend. Consider adding:

• Email templates with branding
• Image uploads using CKEditor plugins
• Export to PDF or email directly from the editor

Final Thoughts

If you’re building any kind of content management or communication tool in ASP.NET Web Forms, don’t underestimate the power of live feedback. A simple preview panel can dramatically boost user confidence and satisfaction.