In this tutorial we will show you, step-by-step, how to create a ToDo web app in Python using Pglet framework and then share it on the internet. The app is a single-file console program of just 100 lines of Python code, yet it is a multi-session, modern single-page application with rich, responsive UI.
You can play with the live demo below:
We chose a ToDo app for the tutorial, because it covers all of the basic concepts you would need to create any web app: building a page layout, adding controls, handling events, displaying and editing lists, making reusable UI components, and deploy options.
The tutorial consists of the following steps:
- Getting started with Pglet
- Pglet app structure
- Adding page controls and handling events
- View, edit and delete list items
- Filtering list items
- Final touches
- Deploying the app
Pglet requires Python 3.7 or above. To create a web app in Python with Pglet, you need to install
pglet module first:
To start, let's create a simple hello-world app.
hello.py with the following contents:
Run this app and you will see a new browser window with a greeting:
In this example, the page URL is a random string, because we didn't specify it in
pglet.page() call. Try changing it to
In the previous step, we learned how to create a simple Pglet page. On that page, all users work with the same contents ("shared app").
Textbox control instead of
Run the app and open its URL in multiple browser tabs. You'll see that changing Textbox contents in one tab is instantly reflected in others.
A shared page may be useful for certain types of apps, such as dashboards, status pages, or reports. But for a ToDo app, we want every user to see their own set of tasks. To achieve this, we need to create a "multi-user app".
hello-app.py with the following contents:
While the application is running, for every new user session Pglet calls
main function with unique page contents.
To see multiple sessions in action, open the application URL in a new "incognito" browser window.
Now we're ready to create a multi-user ToDo app.
To start, we'll need a Textbox for entering a task name, and an "Add" button with an event handler that will display a checkbox with a new task.
todo.py with the following contents:
Run the app and you should see a page like this:
Now let's make the app look nice! We want the entire app to be at the top center of the page, stretched over 70% of the page width. The textbox and the button should be aligned horizontally, and take up full app width:
Stack is a container control that is used to lay other controls out on a page.
Stack can be vertical (default) or horizontal, and can contain other stacks.
todo.py contents with the following:
Run the app and you should see a page like this:
While we could continue writing our app in the
main function, the best practice would be to create a reusable UI component. Imagine you are working on an app header, a side menu, or UI that will be a part of a larger project. Even if you can't think of such uses right now, we still recommend creating all your web apps with composability and reusability in mind.
To make a reusable ToDo app component, we are going to encapsulate its state and presentation logic in a separate class:
Try adding two
TodoApp components to the page:
In the previous step, we created a basic ToDo app with task items shown as checkboxes. Let's improve the app by adding "Edit" and "Delete" buttons next to a task name. The "Edit" button will switch a task item to edit mode.
Each task item is represented by two stacks:
display_view stack with Checkbox, "Edit" and "Delete" buttons and
edit_view stack with Textbox and "Save" button.
view stack serves as a container for both
Before this step, the code was short enough to be fully included in the tutorial. Going forward, we will be highlighting only the changes introduced in a step.
Copy the entire code for this step from here. Below we will explain the changes we've done to implement view, edit, and delete tasks.
To encapsulate task item views and actions, we introduced a new
Additionally, we changed
TodoApp class to create and hold
Task instances when the "Add" button is clicked:
For "Delete" task operation, we implemented
delete_task() method in
TodoApp class which accepts task instance as a parameter:
Then, we passed a reference to
TodoApp into Task constructor and called
TodoApp.delete_task() in "Delete" button event handler:
Run the app and try to edit and delete tasks:
We already have a functional ToDo app where we can create, edit, and delete tasks. To be even more productive, we want to be able to filter tasks by their status.
Copy the entire code for this step from here. Below we will explain the changes we've done to implement filtering.
Tabs control is used to display filter:
To display different lists of tasks depending on their statuses, we could maintain three lists with "All", "Active" and "Completed" tasks. We, however, chose an easier approach where we maintain the same list and only change a task's visibility depending on the status.
TodoApp class we introduced
update() method which iterates through all the tasks and updates their
visible property depending on the status of the task:
Filtering should occur when we click on a tab or change a task status.
TodoApp.update() method is called when Tabs selected value is changed or Task item checkbox is clicked:
Run the app and try filtering tasks by clicking on the tabs:
Our Todo app is almost complete now. As a final touch, we will add a footer (
Stack control) displaying the number of incomplete tasks (
Text control) and a "Clear completed" button.
Copy the entire code for this step from here. Below we highlighted the changes we've done to implement the footer:
Run the app:
Congratulations! You have created your first Python web app with Pglet, and it looks awesome!
Now it's time to share your app with the world!
Pglet is not only a framework for building web apps, but it is also a service for hosting apps' UI. You can have the application running on your computer while its UI is streaming to Pglet service in real-time.
To make the app instantly available on the Internet, just add
web=True parameter to
pglet.app() call at the very end of the program:
A new browser windows will be opened with the URL like this:
Pglet Service is in technical preview now and you are sharing the app in a public namespace.
Please note that we have removed the name of the page from the call above, so it's generated randomly to avoid name collision on public Pglet service with other users.
Instant sharing is a great option to quickly share an app on the web, but it requires your computer to be on all the time.
Replit is an online IDE and hosting platform for web apps written in any language. Their free tier allows running any number of apps with some limitations.
To run your ToDo app on Replit:
- Sign up on Replit.
- Click "New repl" button.
- Select "Python" language from a list and provide repl name, e.g.
- Click "Packages" tab and search for
pgletpackage; select its latest version.
- Switch back to "Files" tab and copy-paste the code of Todo app into
pglet.app()call (at the very end of the program) to:
- Run the app. Now both the application code and UI are running on Replit service as a "standalone" app.
We are not affiliated with Replit - we just love the service. Todo app demo for this tutorial is hosted on Replit and you can just "fork" it there and play.
In this tutorial you have learned how to:
- Create a shared page and a multi-user web app;
- Work with Reusable UI components;
- Design UI layout using
- Work with lists: view, edit and delete items, filtering;
- Deploy your app two ways: Pglet Service and Replit;