Build a Markdown Editor and Live Preview Tool

Level: Real World

Your task for today is to create a desktop markdown editor with a live preview window that instantly shows the rendered HTML output as you type.

Project Task

Create a markdown editor and preview tool that:

• Uses PySide6 to create a split-window GUI application

• Provides a text editor on the left side for writing markdown

• Displays a live HTML preview on the right side

• Uses the markdown library to convert markdown to HTML

• Updates the preview automatically as you type

• Creates a clean, minimal interface with just the essentials

• Works seamlessly on both Windows and Mac

This project gives you hands-on practice with GUI layouts, text processing, real-time updates, and markdown rendering — essential skills for building content creation tools.

Expected Output

Here’s how the app will look like. The user can type in or paste raw markdown on the left panel and the preview will show in real time on the right panel:

Join the Python & AI Builders Skool Community

Got questions to ask the author about this project? Join our Python & AI Builders community for weekly Python & AI videos and discussions:

https://skool.com/automateit

Skeleton and Solution

Below you will find both a downloadable skeleton.py file to help you code the project with comment guides and the downloadable solution.py file containing the correct solution.

Get the code skeleton here: