How to create a simple python code runner with Brython

Question

I'm creating simple code editor which can run python code in & show the output & error messages. Currently I'm able to run a python code but the problem is the output is showing in the developer tools' console. I want to get that output & error messages to DOM element or pass as a string to a JS script

<script type="text/python">
from browser import document, window 
import tb as traceback

def run(event): 
    
    try: 
        exec(document['code'].value) 
    except Exception:
        print(traceback.format_exc()) 

document['run'].bind('click',run)

</script>

This is my code. 'code' is the id of text box which use to enter the code. 'run' is the id of run button. I want to get the output to a another text box or get as a string to my js script instead of displaying in developer tools' console

Answer 1

Use brython-runner. You can run Python code in a string and handle standard output and error with custom callback functions. It runs the code with a Brython instance in the web worker.

<script src="https://cdn.jsdelivr.net/gh/pythonpad/brython-runner/lib/brython-runner.bundle.js"></script>
<script>
const runner = new BrythonRunner({
    stdout: {
        write(content) {
            // Show output messages here.
            console.log('StdOut: ' + content);
        },
        flush() {},
    },
    stderr: {
        write(content) {
            // Show error messages here.
            console.error('StdErr: ' + content);
        },
        flush() {},
    },
    stdin: {
        async readline() {
            var userInput = prompt();
            console.log('Received StdIn: ' + userInput);
            return userInput;
        },
    }
});
runner.runCode('print("hello world")');
</script>

Disclaimer: I'm the author of this module. ;)