HTML email templates in Flask - Step-by-Step Execution

Concept Flow - HTML email templates

Start Flask app

↓

Define email template HTML

↓

Render template with data

↓

Create email message

↓

Send email via SMTP

↓

Email received with styled content

This flow shows how Flask uses an HTML template to create and send a styled email message.

Execution Sample

Flask

from flask import Flask, render_template_string
from flask_mail import Mail, Message

app = Flask(__name__)
app.config.update({
  'MAIL_SERVER': 'smtp.example.com',
  'MAIL_PORT': 587,
  'MAIL_USE_TLS': True,
  'MAIL_USERNAME': '[e-mail]',
  'MAIL_PASSWORD': 'password'
})
mail = Mail(app)

@app.route('/send-email')
def send_email():
    html = render_template_string('<h1>Hello {{ name }}!</h1>', name='Friend')
    msg = Message('Greetings', sender='[e-mail]', recipients=['[e-mail]'])
    msg.html = html
    mail.send(msg)
    return 'Email sent!'

This Flask code renders an HTML email template with a name and sends it using Flask-Mail.

Execution Table

Step	Action	Input/State	Output/Result
1	Start Flask app	None	App initialized with mail config
2	Render HTML template	Template '<h1>Hello {{ name }}!</h1>', name='Friend'	HTML string '<h1>Hello Friend!</h1>'
3	Create Message object	Subject='Greetings', sender, recipients	Message with subject and recipients set
4	Assign HTML content	HTML string '<h1>Hello Friend!</h1>'	Message.html set to HTML string
5	Send email	Message object with HTML	Email sent via SMTP server
6	Return response	None	'Email sent!' string returned to browser

💡 Email sent successfully and response returned to user

Variable Tracker

Variable	Start	After Render	After Message Creation	After HTML Assign	After Send	Final
html	None	'<h1>Hello Friend!</h1>'	'<h1>Hello Friend!</h1>'	'<h1>Hello Friend!</h1>'	'<h1>Hello Friend!</h1>'	'<h1>Hello Friend!</h1>'
msg	None	None	Message(subject='Greetings', sender='[e-mail]', recipients=['[e-mail]'])	Message with html content	Message sent	Message object

Key Moments - 3 Insights

Why do we use render_template_string instead of just writing HTML directly?

render_template_string lets us insert dynamic data like the name 'Friend' into the HTML, as shown in step 2 of the execution_table.

What happens if we forget to set msg.html before sending?

The email will have no HTML content, so the recipient sees a blank or plain message. Step 4 shows setting msg.html is essential.

Why do we configure MAIL_SERVER and other settings before sending?

These settings tell Flask-Mail how to connect to the email server to send messages, as initialized in step 1.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'html' after step 2?

A '<h1>Hello Friend!</h1>'

B '<h1>Hello {{ name }}!</h1>'

C None

D 'Hello Friend!'

💡 Hint

Check the 'Output/Result' column in row with Step 2.

At which step is the email message actually sent?

A Step 3

B Step 4

C Step 5

D Step 6

💡 Hint

Look for the action 'Send email' in the execution_table.

If we change the name to 'Alice' in render_template_string, what changes in variable_tracker?

A 'msg' changes to include 'Alice' in subject

B 'html' becomes '<h1>Hello Alice!</h1>' after render

C 'html' remains '<h1>Hello Friend!</h1>'

D 'msg.html' becomes plain text

💡 Hint

Check how 'html' changes after rendering in variable_tracker.

Concept Snapshot

HTML email templates in Flask:
- Use render_template_string or render_template to create HTML content
- Insert dynamic data with {{ }} placeholders
- Create Message object with subject, sender, recipients
- Assign HTML content to msg.html
- Send email with mail.send(msg)
- Configure mail server settings before sending

Full Transcript

This lesson shows how Flask sends HTML emails using templates. First, the Flask app starts with mail server settings. Then, an HTML template string with a placeholder for a name is rendered into a full HTML string. Next, a Message object is created with subject, sender, and recipients. The rendered HTML is assigned to the message's html property. The message is sent through the SMTP server. Finally, a confirmation response is returned. Variables like 'html' and 'msg' change step-by-step as the email is prepared and sent. Key points include using templates for dynamic content, setting the html property, and configuring mail settings. The visual quiz checks understanding of these steps.