{"id":15941691,"url":"https://github.com/codesue/io","last_synced_at":"2026-02-14T13:02:08.960Z","repository":{"id":186578683,"uuid":"675382807","full_name":"codesue/io","owner":"codesue","description":"🌑 A mini Python REPL web component","archived":false,"fork":false,"pushed_at":"2024-10-22T06:22:28.000Z","size":777,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-19T20:13:54.503Z","etag":null,"topics":["pyodide","python","repl","web-components"],"latest_commit_sha":null,"homepage":"https://codesue.github.io/io/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codesue.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-06T18:20:40.000Z","updated_at":"2024-10-22T06:22:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"9c76d018-7cf7-47fd-977f-faecda107199","html_url":"https://github.com/codesue/io","commit_stats":{"total_commits":7,"total_committers":2,"mean_commits":3.5,"dds":0.1428571428571429,"last_synced_commit":"e86f20c35e039e84435e444f1daab380a745495e"},"previous_names":["codesue/io"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesue%2Fio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesue%2Fio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesue%2Fio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesue%2Fio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codesue","download_url":"https://codeload.github.com/codesue/io/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245111952,"owners_count":20562512,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["pyodide","python","repl","web-components"],"created_at":"2024-10-07T07:20:32.696Z","updated_at":"2025-09-21T00:07:38.477Z","avatar_url":"https://github.com/codesue.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Io\n\n[![License][license_badge]][license_link]\n[![npm][npm_badge]][npm_link]\n[![Repo Size][repo_size_badge]][repo_size_link]\n[![Docs][docs_badge]][docs_link]\n\nIo is web component library for running Python codeblocks in the browser. Its\ncore element is `\u003cio-repl\u003e`, a mini Python REPL powered by [Pyodide](https://pyodide.org/en/stable/).\n\n\u003cimg src=\"assets/images/io.png\" alt=\"Screenshot of the Io demo website\" /\u003e\n\nIo is a lightweight and **highly experimental** library. It's just for fun and\nshouldn't be used for anything serious. If you're looking for a similar library\nto use in your projects, consider using [PyScript](https://pyscript.net) instead.\n\n## Quickstart\n\nAdd the `\u003cio-repl\u003e` script to the head of your HTML document:\n\n```html\n\u003cscript type='module' src='https://www.unpkg.com/io-repl/io-repl.js'\u003e\u003c/script\u003e\n```\n\nAdd the following rule to your stylesheet to prevent the component from being\ndisplayed until its ready:\n\n```css\nio-repl:not(:defined) {\n  opacity: 0;\n  transition: opacity 0.3s ease-in-out;\n}\n```\n\nUse `\u003cio-repl\u003e` in your HTML document:\n\n```html\n\u003cio-repl\u003eimport this\u003c/io-repl\u003e\n```\n\n## Installation\n\n### Linking to a CDN\n\n```html\n\u003cscript type='module' src='https://www.unpkg.com/io-repl/io-repl.js'\u003e\u003c/script\u003e\n```\n\n### Installing from npm\n\n```bash\nnpm i io-repl\n```\n\n### Building from source\n\n1. Clone this repository\n\n   ```sh\n   git clone https://github.com/codesue/io.git\n   ```\n\n2. Navigate to the project's directory\n\n   ```sh\n   cd io\n   ```\n\n3. Install dependencies\n\n   ```sh\n   npm i\n   ```\n\n## Usage\n\n### Importing the component in a module\n\n```js\nimport 'io-repl';\n```\n\n### Adding a REPL to your HTML document\n\nAdding an empty REPL:\n\n```html\n\u003cio-repl\u003e\u003c/io-repl\u003e\n```\n\nAdding default code to the REPL:\n\n```html\n\u003cio-repl\u003eprint('Hello, world!')\u003c/io-repl\u003e\n```\n\nAdding default code that relies on indentation to the REPL:\n\n```html\n\u003cio-repl\u003e\n  def greet():\n    print('Hello, there!')\n\n  greet()\n\u003cio-repl\u003e\n```\n\n### Customizing the REPL\n\nYou can customize the REPL using the following attributes:\n\n- `button-label` (string): The text to display as the run button's label.\n- `disable-button` (boolean): Whether to disable and hide the run button.\n- `disable-input` (boolean): Whether to disable editing input code.\n- `execute` (boolean): Whether to execute the code when the component is rendered.\n- `pyodide-src` (string): The path to a pyodide module to import. If not provided, defaults\n  to https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js.\n- `src` (string): The path to a file containing Python code. Its text will be\n  set as the code input of the REPL, taking precedence over any text inside the\n  `\u003cio-repl\u003e\u003c/io-repl\u003e` tags.\n\nHere's an example of how to do this:\n\n```html\n\u003cio-repl execute disable-input button-label='Play' pyodide-src='https://path/to/pyodide.js'\u003e\n\u003cio-repl\u003e\n```\n\n### Styling with CSS\n\n#### Preventing FOUC (flash of unstyled content)\n\nAdd the following rules to your stylesheet:\n\n```css\nio-repl:not(:defined) {\n  opacity: 0;\n  transition: opacity 0.3s ease-in-out;\n}\n```\n\n#### Customizing component styles\n\nYou can change the style of the `\u003cio-repl\u003e` element directly:\n\n```css\nio-repl {\n  background: #c9cdee;\n  padding: 1em;\n  border-radius: 0.25em;\n}\n```\n\nYou can change the style of its nested elements using css variables defined in the\nelements `\u003cstyle\u003e` tag:\n\n```css\nio-repl {\n  --input-border-radius: 0.25em;;\n  --button-border-radius: 0.25em;;\n  --button-font-family: monospace;\n  --button-padding: 0.25em 0.5em;\n  --button-margin: 0;\n}\n```\n\nAlternatively, you can use the elements' `part` attribute:\n\n```css\nio-repl::part(button) {\n  border-radius: 0.25em;\n}\n```\n\nParts include `label`, `button`, `input`, `input-container`, and `output`.\n\n## Developing the library\n\n### Running the local demo with `web-dev-server`\n\nTo run a local development server that serves the basic demo located in\n`index.html`, run:\n\n```bash\nnpm start\n```\n\nThe website will be available at http://localhost:8000/.\n\n### Testing with Web Test Runner\n\nTo execute a single test, run:\n\n```sh\nnpm run test\n```\n\nTo run the tests in interactive watch mode, run:\n\n```sh\nnpm run test:watch\n```\n\n### Linting and formatting\n\nTo scan the project for linting and formatting errors, run\n\n```sh\nnpm run lint\n```\n\nTo automatically fix linting and formatting errors, run\n\n```sh\nnpm run format\n```\n\n## Contributing\n\nCurrently, this project does not accept external contributions.\n\n## License\n\nCopyright \u0026copy; 2023 [Suzen Fylke](https://suzenfylke.com). Distributed under\nthe MIT License.\n\n## Acknowledgements\n\nThis project was scaffolded with [open-wc](https://github.com/open-wc/open-wc)'s\nweb component generator.\n\nIt forks PyScript's [ltrim](https://github.com/pyscript/pyscript/blob/2023.05.1/pyscriptjs/src/utils.ts#L14-L27)\nfunction to dedent code input, and parts of its design are heavily influenced by\nthe design of PyScript's web components. PyScript is licensed under the\n[Apache 2.0 License](https://github.com/pyscript/pyscript/blob/main/LICENSE).\n\n[docs_badge]: https://img.shields.io/github/actions/workflow/status/codesue/io/publish-docs.yml?label=docs\u0026colorA=363a4f\u0026colorB=b7bdf8\u0026style=flat\n[docs_link]: https://github.com/codesue/io/actions/workflows/publish-docs.yml\n\n[license_badge]: https://img.shields.io/github/license/codesue/io?colorA=363a4f\u0026colorB=b7bdf8\u0026style=flat\n[license_link]: https://github.com/codesue/io/tree/main/LICENSE\n\n[npm_badge]: https://img.shields.io/npm/v/io-repl?colorA=363a4f\u0026colorB=b7bdf8\u0026style=flat\n[npm_link]: https://www.npmjs.com/package/io-repl\n\n[repo_size_badge]: https://img.shields.io/github/repo-size/codesue/io?colorA=363a4f\u0026colorB=b7bdf8\u0026style=flat\n[repo_size_link]: https://github.com/codesue/io\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodesue%2Fio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodesue%2Fio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodesue%2Fio/lists"}