Skip to main content

How to Turn a Flask Web App into a Desktop App with Tkinter and PyWebView?


This Python script creates a simple desktop launcher using Tkinter with ttkbootstrap for modern styling. The application displays a window with a button that, when clicked, opens a Flask-based web application in a native window using pywebview. This approach combines a lightweight desktop interface with a web-powered backend, making it easy to deploy existing web apps as desktop applications.

Prerequisite:

This tutorial is part of the Flask CKEditor Project Series.

📚 View the Complete Flask CKEditor Series

⬅ Previous Part                                                                                                                   ➡ Next Part

Preliminary 
Before I begin, please activate the virtual environment and install the required dependencies.
python -m venv venv
venv\Scripts\activate
pip install ttkbootstrap pywebview pyinstaller
Then all I need to do is create a Python file below.

What is PyWebView?

In fact, PyWebView is a lightweight Python library that lets me display web content (HTML, CSS, JavaScript, or even a full Flask app) inside a native desktop window. Since I have deployed Flask on PythonAnywhere in the previous tutorial. Therefore, all I need for this project is to embed the entire browser into the window.

Step 1: Set up a desktop launcher window
Before I set up the webview window, I created a launcher window as follows.


I chose "ttkBootstrap" as my GUI. My theme is "darkly," and the window dimensions are 400x200.
import ttkbootstrap as ttk
from ttkbootstrap.constants import *

# Create TTKbootstrap window
root = ttk.Window(themename="darkly")
root.geometry("400x200")
root.title("Launcher")

# Create a button with open_app function
btn = ttk.Button(root, text="Open Web App", bootstyle=SUCCESS, command=open_app)
btn.pack(pady=50)
Here, I only create a button, "Open Web App," and when I click the button, it will pop up the webview window in step 2 below.


Step 2: Embed the webview within the desktop window
Now I will embed the browser window with an HTML link "https://howapp.pythonanywhere.com/" inside the webview window, and here is my code:
import webview

def open_app():
    # Create a new window titled "How App"
    # and load the web application URL inside it
    webview.create_window('How App', 'https://howapp.pythonanywhere.com/')
    
    # Start the pywebview event loop (opens and runs the window)
    webview.start()
Next, when the function is called, it will pop up a new webview window as shown below:


---------------------------------------------------------------------------------------------------------------------------------------------------

🎁 Get Your FREE Flask Cheat Sheet

Get more Flask, Python automation, Docker, and HTMX tutorials delivered to your inbox.

✓ Practical coding tutorials
✓ Automation tips for SMEs
✓ New project ideas and templates

Download my FREE Flask Cheat Sheet (PDF)


---------------------------------------------------------------------------------------------------------------------------------------------------

Step 3: Package the ttkbootstrap desktop app
Before it can be distributed to the user to use, I need to package the desktop app. Therefore, in PowerShell, I will input the following code: 
pyinstaller --onefile --noconsole `
--hidden-import=webview.platforms.edgechromium `
--hidden-import=webview.platforms.winforms `
webview_tkinter.py
Why do I need to hide the above files? 
This is because in PyInstaller, a hidden import is a module that my app uses, but PyInstaller cannot detect automatically. Therefore, I will tell PyInstaller, “Hey, include these modules even if you didn’t detect them.”

The code above uses PyInstaller to pack everything into a single executable and hides the terminal and relevant imports, as mentioned above.

Bonus
FlaskWebGui vs Pywebview

Both Flaskwebgui and pywebview are popular choices for wrapping a Flask application into a desktop-like experience, but they achieve this in fundamentally different ways.

FlaskWebGui

Flaskwebgui is designed specifically for "converting" an existing web application into a desktop application with minimal changes to your code.

  • Core Approach: It works by starting your Flask server in a background thread and then launching a standard browser (usually Chrome in "app mode") to point to your local Flask URL.

  • Best For: Developers who want their web app to look and behave like a desktop app with the least amount of effort. If it works in your web browser, it will work in FlaskWebGui.

  • Key Pros:

    • Ease of Use: You can often "convert" an app with just a few extra lines of code.

    • Compatibility: Because it uses a real browser, you won't encounter issues where specific JavaScript or CSS features fail to render, which can sometimes happen in embedded webview engines.

    • No New Logic: You don't need to learn any specific API for window management or bridging Python and JavaScript.

  • Key Cons:

    • External Dependency: It relies on the user having a compatible browser (like Chrome/Edge) installed on their system.

    • Browser-like Behavior: It provides a browser-in-app experience rather than a "native" desktop window.

Pywebview

Pywebview is a more robust, framework-agnostic wrapper that creates a native GUI window using the OS's native webview engine (e.g., Edge/WebView2 on Windows, WebKit on macOS).

  • Core Approach: It creates an actual native window and embeds a lightweight web renderer inside it. It doesn't rely on an external browser like Chrome; it uses the system’s built-in web component.

  • Best For: Developers who want a "native" desktop feel, tighter integration between Python and the frontend, and smaller distribution sizes.

  • Key Pros:

    • Native Integration: It provides a true native window and supports native features like menus, file dialogs, and message boxes.

    • Two-Way Bridge: It features a built-in bridge that allows for direct communication between Python and your frontend (JavaScript) without needing HTTP requests.

    • Standalone Feel: The user doesn't need to have Chrome or another browser installed; the app uses the system's native engine.

  • Key Cons:

    • Complexity: It may require more configuration to get right, especially regarding cross-platform engine dependencies (e.g., ensuring the right WebKit or WebView2 components are present).

    • Renderer Differences: Since it uses the OS's native webview, you might occasionally encounter inconsistencies where complex JavaScript or modern CSS features render slightly differently than they do in Chrome.

Which should you choose?

  • Choose FlaskWebGui if you already have a Flask app and simply want it to open in its own window without worrying about compatibility issues or learning new APIs.

  • Choose Pywebview if you want a more professional, standalone desktop application that feels integrated into the OS or if you need to use the powerful Python-to-JavaScript bridge to interact deeply between your backend and frontend.

Final wrap-up:
In summary, PyWebview provides a simple way to turn your web-based application into a desktop experience by displaying it inside a native window. When combined with ttkbootstrap, you can create a clean Tkinter interface that acts as a launcher while your main application runs as a web app. This setup is especially useful if you already have a Flask project, allowing you to reuse your existing code while delivering it in a desktop-friendly format.

Published: May 2026
Last Updated: May 2026

Related posts
How to Create Flask Forms with CKEditor and Flask-WTF?
How to Build a Modern Flask Sign-In & Sign-Up Page with HTMX? 
 ---------------------------------------------------------------------------------------------------------------------------------------------------
Thanks for reading! 

If you haven't subscribed yet, join my newsletter to receive future Python and Flask tutorials.

-----------------------------------------------------------------------------------------------------------------------------
Need a similar system for your business? 
I build custom Flask web applications and Python automation solutions for SMEs and solopreneurs. 


-----------------------------------------------------------------------------------------------------------------------------

About the Author

Kelvin Loh is a Python developer focused on Flask, desktop applications, and business automation solutions. He shares practical tutorials and real-world coding projects to help developers and small businesses build useful applications.

Labels:

Comments

Post a Comment

Popular Posts

How to Build an Audiobook Workflow Desktop System with Python?

In this tutorial, we will build a simple audiobook player using Python and CustomTkinter. You will learn how to convert text into speech using gTTS and play it with PyGame. We will also implement play, pause, and stop controls, like those in a real audio player. By the end, you will have a clean and functional desktop audiobook app. Prerequisite: This tutorial is part of the standalone tutorial. 📚 View the standalone tutorial Preliminary   Before I begin, it is recommended to activate the virtual environment before installing the relevant dependencies. python -m venv venv venv\Scripts\activate pip install customtkinter pillow gTTS pygame CTkMessagebox pypdf Then, the following steps include setting up the file structure, app.py, and two additional folders: the uploads and media folders. The media folder contains the icons necessary to build the app; there are read, pause, and stop icons, as shown on the diagram. Step 1: Build up the app interface I have 4 sections here: the...
Post a Comment
Read more

How to Set Up PgAdmin and Adminer Using Docker Compose?

If you are new to database management with Docker, this tutorial will guide you through setting up both PgAdmin and Adminer using Docker containers. By containerising these tools, you can quickly launch lightweight and portable database management environments without installing them directly on your operating system. This approach also makes it easier to manage configurations, updates, and multiple projects across different devices.
Post a Comment
Read more