Io

[![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.

Quickasrt

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
import this
`

Installation

$3

`html

`

$3

`bash
npm i io-repl
`

$3

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
`

Usage

$3

`js
import 'io-repl';
`

$3

Adding an empty REPL:

`html

`

Adding default code to the REPL:

`html
print('Hello, world!')
`

Adding default code that relies on indentation to the REPL:

`html

def greet():
print('Hello, there!')

greet()

`

$3

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, defaults
to https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js.
- src (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


`

$3

#### 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