This page looks best with JavaScript enabled

Python in browser - Brython

 ·   ·  β˜• 2 min read

How to run python code in browser with brython

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="" integrity="sha256-rA89wPrTJJQFWJaZveKW8jpdmC3t5F9rRkPyBjz8G04=" crossorigin="anonymous"></script>

    <script src="" integrity="sha256-Gnrw9tIjrsXcZSCh/wos5Jrpn0bNVNFJuNJI9d71TDs=" crossorigin="anonymous"></script>

        * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;

      body {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 25px;
          padding: 30px;
          line-height: 1.6;

      h1 {
        text-align: center;
        margin-bottom: 30px;
        border-bottom: 1px #ccc solid;

      h2 {
        margin-top: 20px;

      button {
        cursor: pointer;
        display: block;
        background: #333;
        color: #fff;
        border: 0;
        border-radius: 5px;
        padding: 10px 20px;
        margin: 20px 0;

      input[type="text"] {
        border: 1px #ccc solid;
        width: 300px;
        padding: 4px;
        height: 35px;
        margin-top: 20px;

      .card {
        margin: 20px 0;
        border: #ccc 1px solid;
        padding: 20px;

      .box {
          background: steelblue;
          width: 1.6em;
          height: 1.6em;
    <title>Brython Demo</title>
<body onload="brython()">
    <h1>Brython Crash Course</h1>

    <h2 id="hello"></h2>
    <button id="alert-btn">Alert & Insert</button>

    <input type="text" id="text" placeholder="Enter something">
    <span id="output"></span>

    <h2 id="greet">Hello {name}</h2>

    <button id="joke-btn">Get Joke</button>
    <div id="joke" class="card">Click the "get joke" button</div>

    <input type="file" id="file-upload">
    <textarea id="file-text" cols="60" rows="10"></textarea>

    <div class="card">
        <button id="rotate-btn">Rotate</button>
        <div id="rotate-box" class="box"></div>

    <h2>Saved Item: <span id="item"></span></h2>
    <input type="text" id="item-input" placeholder="Add to local storage">
    <button id="add-btn" style="display: inline;">Add</button>
    <button id="remove-btn" style="display: inline;">Remove</button>

    <!-- Alert & DOM insert -->
    <script type="text/python" id="script0">
        from browser import document, console, alert

        def show(e):
            alert('Hello World')
            document['hello'] <= 'Hello World'

        document['alert-btn'].bind('click', show)

    <!-- Text bind -->
    <script type="text/python" id="script1">
        from browser import document

        def show_text(e):
            document['output'].textContent =;

        document['text'].bind('input', show_text)

    <!-- Template and variable -->
    <script type="text/python" id="script2">
        from browser import document
        from browser.template import Template


    <!-- Ajax call -->
    <script type="text/python" id="script3">
        from browser import document, ajax

        url = ''

        def on_complete(req):
            import json
            data = json.loads(req.responseText)
            joke = data['value']
            document['joke'].text = joke

        def get_joke(e):
            req = ajax.ajax()
  'GET', url, True)
            req.bind('complete', on_complete)
            document['joke'].text = 'Loading...'

        document['joke-btn'].bind('click', get_joke)

    <!-- Load file data -->
    <script type="text/python" id="script4">
        from browser import document, window

        def file_read(e):
            def onload(e):
                document['file-text'].value = 
            file = document['file-upload'].files[0]
            reader =
            reader.bind('load', onload)
        document['file-upload'].bind('input', file_read)

    <!-- Rotate - manipulate style -->
    <script type="text/python" id="script5">
        from browser import document, html

        box = document['rotate-box']
        angle = 10

        def change(e):
            global angle
   = f"rotate({angle}deg)"
            angle += 10

        document['rotate-btn'].bind('click', change)

    <!-- Local storage -->
    <script type="text/python" id="script6">
        from browser import document, html, window, console

        storage = window.localStorage

        if storage.getItem('item'):
            document['item'] <= storage.getItem('item')

        def add_item(e):
            item = document['item-input'].value
            storage.setItem('item', item)
            document['item'].textContent = item

        def remove_item(e):
            document['item'].textContent = ''

        document['add-btn'].bind('click', add_item)
        document['remove-btn'].bind('click', remove_item)

Ohidur Rahman Bappy
Ohidur Rahman Bappy
πŸ“šLearner 🐍 Developer