A mini Python REPL for the browser
npm install io-repl[![License][license_badge]][license_link]
[![npm][npm_badge]][npm_link]
[![Repo Size][repo_size_badge]][repo_size_link]
[![Docs][docs_badge]][docs_link]
Io is web component library for running Python codeblocks in the browser. Its
core element is , a mini Python REPL powered by Pyodide.

Io is a lightweight and highly experimental library. It's just for fun and
shouldn't be used for anything serious. If you're looking for a similar library
to use in your projects, consider using PyScript instead.
Add the script to the head of your HTML document:
``html`
Add the following rule to your stylesheet to prevent the component from being
displayed until its ready:
`css`
io-repl:not(:defined) {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
Use in your HTML document:
`html`
`html`
`bash`
npm i io-repl
1. Clone this repository
`sh`
git clone https://github.com/codesue/io.git
2. Navigate to the project's directory
`sh`
cd io
3. Install dependencies
`sh`
npm i
`js`
import 'io-repl';
Adding an empty REPL:
`html`
Adding default code to the REPL:
`html`
Adding default code that relies on indentation to the REPL:
`html
def greet():
print('Hello, there!')
greet()
`
You can customize the REPL using the following attributes:
- button-label (string): The text to display as the run button's label.disable-button
- (boolean): Whether to disable and hide the run button.disable-input
- (boolean): Whether to disable editing input code.execute
- (boolean): Whether to execute the code when the component is rendered.pyodide-src
- (string): The path to a pyodide module to import. If not provided, defaultssrc
to https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js.
- (string): The path to a file containing Python code. Its text will be
set as the code input of the REPL, taking precedent over any text inside the
tags.
Here's an example of how to do this:
`html`
#### Preventing FOUC (flash of unstyled content)
Add the following rules to your stylesheet:
`css`
io-repl:not(:defined) {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
#### Customizing component styles
You can change the style of the element directly:
`css`
io-repl {
background: #c9cdee;
padding: 1em;
border-radius: 0.25em;
}
You can change the style of its nested elements using css variables defined in the
elements