Build Interactive Web Apps in Python Without HTML or JavaScript Using PyWebIO

When we first learn programming, we interact with the terminal using functions like input(), scanf() and print. In web applications, additional code is required for a front‑end UI, session handling due to HTTP's statelessness, and polling for pseudo‑real‑time output.

Installation

pip3 install -U pywebio

Hello World – BMI Calculator

The following script uses PyWebIO to collect height and weight, compute the BMI, and display the result in a browser.

from pywebio.input import input, FLOAT
from pywebio.output import put_text

def bmi(height, weight):
    # calculate BMI
    bmi_value = weight / (height / 100) ** 2
    top_status = [
        (14.9, '极瘦'), (18.4, '偏瘦'), (22.9, '正常'),
        (27.5, '过重'), (40.0, '肥胖'), (float('inf'), '非常肥胖')
    ]
    for top, status in top_status:
        if bmi_value <= top:
            return bmi_value, status

def main():
    height = input("请输入你的身高(cm)：", type=FLOAT)
    weight = input("请输入你的体重(kg)：", type=FLOAT)
    bmi_value, status = bmi(height, weight)
    put_text('你的 BMI 值: %.1f，身体状态：%s' % (bmi_value, status))

if __name__ == '__main__':
    main()

Running the script automatically opens a browser window where users can interact with the form. By replacing the direct call to main() with pywebio.start_server(main, port=80), the application can be served as a web service.

Basic Input Functions

PyWebIO provides many blocking input functions that display forms in the browser until the user submits them.

from pywebio.input import *

# Text input
input("What's your name?")

# Dropdown selection
select('Select', ['A', 'B'])

# Multiple choice
checkbox('Checkbox', options=['Check me'])

# Radio button
radio('Radio', options=['A', 'B', 'C'])

# Multi‑line text
textarea('Text', placeholder='Some text')

# File upload
file_upload('Select a file:')

# Code editor
textarea('Code Edit', code={
    'mode': 'python',
    'theme': 'darcula',
}, value='import ...')

# Input group
input_group('Basic info', [
    input('Name', name='name'),
    input('Age', name='age'),
])

# Validation example
def check(p):
    if p != 2:
        return 'Wrong!'
input('1+1=?', type=NUMBER, validate=check)

Output Functions

PyWebIO also offers a rich set of output functions for displaying text, tables, images, markdown, notifications, files, HTML, pop‑ups, buttons, layouts, and progress bars.

from pywebio.output import *

# Text output
put_text("Hello world!")

# Table output
put_table([
    ['Product', 'Price'],
    ['Apple', '$5.5'],
    ['Banner', '$7'],
])

# Image output
put_image(open('python-logo.png', 'rb').read())

# Markdown output
put_markdown('**Bold text**')

# Toast notification
toast('Awesome PyWebIO!!')

# File download
put_file('hello_word.txt', b'hello word!')

# Raw HTML output
put_html('E = mc<sup>2</sup>')

# Popup window
with popup('Popup title'):
    put_text('Hello world!')
    put_table([
        ['Product', 'Price'],
        ['Apple', '$5.5'],
        ['Banner', '$7'],
    ])

# Buttons with click handler
def on_click(btn):
    put_markdown("You click `%s` button" % btn)
put_buttons(['A', 'B', 'C'], onclick=on_click)

# Row layout
put_row([put_code('A'), None, put_code('B')])

# Progress bar
import time
put_processbar('bar1')
for i in range(1, 11):
    set_processbar('bar1', i / 10)
    time.sleep(0.1)

Beyond input and output, PyWebIO supports layout management, coroutine integration, and data visualization with third‑party libraries, enabling the creation of sophisticated web‑based GUIs directly from Python.

The above provides a concise introduction to PyWebIO and its capabilities for building browser‑based GUI applications with Python.