Run Python code in a browser without a server

Run Python code in browser

Python is a great language to code in — it’s concise, versatile, all-purpose and has a thriving community. However, even with all of its popularity, Python hasn’t really found its way into the sphere of front-end web development. Since it is heavily used on server and backend environments, often times there are many nice snippets of general purpose code that would be great to bring into a front-end environment.

Here’s a quick way to execute some Python code from a browser using only Javascript.

Setup


In order to execute our Python code, we’ll need to create a pipe in Flex.io. You’ll need to sign in to your Flex.io account, or you can sign up for a free account to get started. Once you’re signed in, you’ll need to create a new pipe.

Try It


Run Python Code in your Browser


Enter the message you'd like echoed back to you:

Set up the Flex.io Pipe


We set up a very simple pipe using Flex.io that has only one step.

  1. Add Execute Step

    This step adds a code editor to the pipe where you can add Python code to be executed when the pipe is run. To do this, we simply use the execute command and save the step:

    execute lang: python
    
  2. Add Python Code

    Once you save the step, the code editor will be displayed where you can edit your Python code. Add the following code and save the step:

    def flexio_handler(input, output):
        writer = output.create(name='Hello')
        if 'message' in input.env:
            writer.write(input.env['message'])
        else:
            writer.write('Hello, World!')
    

Create a basic HTML form to submit a message to the Flex.io API


Here’s the very basic HTML form and output markup we created (if you’re wondering about the classes on the elements, we’re using the Tachyons CSS toolkit):

<form class="flex flex-row">
  <input type="text" name="message" value="Hello, World!" class="flex-fill input-reset lh-copy pa2 bt bb bl b--black-20 focus-b--blue input-python-message">
  <button type="button" class="b ttu border-box no-select pv2 ph3 br1 br--right white bg-blue b--blue darken-10 btn-run-code">Run Code</button>
</form>
<div class="dn pa2 bl br bb b--black-20 bg-white lh-title overflow-auto message-result" style="max-height: 400px"></div>

To call this pipe from your code, all that is needed to run your Python code is a simple AJAX call to Flex.io:

$.ajax({
  type: 'POST',
  url: 'https://www.flex.io/api/v1/pipes/python-in-browser/run?stream=0',
  data: $('#example-python-in-browser form').serialize(),
  success: function(content) {
    // grab the result of the pipe from Flex.io and output it in the browser
    $('#example-python-in-browser .message-result').removeClass('dn').text(content)
  }
})

Get started with Flex.io


Using the Flex.io API to do the heavy lifting of actually executing the python code is simple and allows you to offload your Python scripts to the cloud for use in your web apps through a single call to the Flex.io API.

We hope you’ve enjoyed this quick example of the Flex.io API and find it useful.

Get started with Flex.io