{"id":13791150,"url":"https://github.com/quarto-ext/shinylive","last_synced_at":"2025-04-05T10:08:40.914Z","repository":{"id":52009303,"uuid":"520687103","full_name":"quarto-ext/shinylive","owner":"quarto-ext","description":"Quarto extension to embed Shinylive for Python applications","archived":false,"fork":false,"pushed_at":"2024-11-07T14:39:46.000Z","size":396,"stargazers_count":153,"open_issues_count":34,"forks_count":9,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-03-29T09:09:55.394Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://quarto-ext.github.io/shinylive/","language":"Lua","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/quarto-ext.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":"2022-08-03T00:22:15.000Z","updated_at":"2025-03-05T01:02:31.000Z","dependencies_parsed_at":"2024-01-05T23:47:27.371Z","dependency_job_id":"10b1c759-1002-4395-bb0d-5d23db74362a","html_url":"https://github.com/quarto-ext/shinylive","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quarto-ext%2Fshinylive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quarto-ext%2Fshinylive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quarto-ext%2Fshinylive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quarto-ext%2Fshinylive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quarto-ext","download_url":"https://codeload.github.com/quarto-ext/shinylive/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247318744,"owners_count":20919484,"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":[],"created_at":"2024-08-03T22:00:56.545Z","updated_at":"2025-04-05T10:08:40.894Z","avatar_url":"https://github.com/quarto-ext.png","language":"Lua","funding_links":[],"categories":["Extensions","Development"],"sub_categories":["Resources"],"readme":"Shinylive Quarto extension\n==========================\n\nThis extension lets you embed [Shinylive](https://shiny.rstudio.com/py/docs/shinylive.html) applications in a Quarto document. These are [Shiny for Python](https://shiny.rstudio.com/py/) applications which run completely in the browser, using [Pyodide](https://pyodide.org/) (Python compiled to WebAssembly).\n\nScreenshot:\n\n[![Embedded Shinylive application](embedded-app.png)](https://quarto-ext.github.io/shinylive/sine.html)\n\nThis repository contains an example Quarto document which uses this extension:\n\n* Usage example: [source](index.qmd) | [rendered web page](https://quarto-ext.github.io/shinylive/)\n* Sine wave example: [source](sine.qmd) | [rendered web page](https://quarto-ext.github.io/shinylive/sine.html)\n* File-loading example: [source](load_file.qmd) | [rendered web page](https://quarto-ext.github.io/shinylive/load_file.html)\n\n## Installation\n\nPrerequisites:\n* Quarto. You can download it [here](https://quarto.org/docs/download/).\n* Python 3.8 or above.\n* A recent version of [`shinylive`](https://github.com/rstudio/py-shinylive) Python package, which can be installed with:\n    ```\n    pip install shinylive --upgrade\n    ```\n\nTo use this extension in your Quarto project, run this in the top level of your Quarto project:\n\n```bash\nquarto add quarto-ext/shinylive\n```\n\nThis will install the extension under the `_extensions/` subdirectory. If you're using version control, you will want to check in this directory.\n\n\n## Usage\n\nPut this in the header of your document, or in the `_quarto.yml` file:\n\n```yaml\nfilters:\n  - shinylive\n```\n\nThen you can put the code for a Shiny application in a code block marked with `{shinylive-python}`.\n\n\n````markdown\n---\ntitle: Shinylive in Quarto example\nformat: html\nfilters:\n  - shinylive\n---\n\nThis is a Shinylive application embedded in a Quarto doc.\n\n```{shinylive-python}\n#| standalone: true\n\nfrom shiny import *\n\napp_ui = ui.page_fluid(\n    ui.input_slider(\"n\", \"N\", 0, 100, 40),\n    ui.output_text_verbatim(\"txt\"),\n)\n\ndef server(input, output, session):\n    @output\n    @render.text\n    def txt():\n        return f\"The value of n*2 is {input.n() * 2}\"\n\napp = App(app_ui, server)\n\n```\n````\n\nNote that the code block currently must have `#| standalone: true`, which indicates that the code represents a complete Shiny application, as opposed to one which has parts spread throughout the document (which will be supported in the future).\n\n\n### Other options\n\n\nBy default, a Shinylive code block will run the application by itself. It is also possible to also display the code in an editor. The editor is \"live\" -- it allows the user can make changes to the code and re-run the application.\n\nTo do this, you need to tell it which `components` to display:\n\n```\n#| components: [editor, viewer]\n```\n\n ![Editor and viewer](editor-viewer.png)\n\n\nBy default, it will just display the app `viewer`, without the code `editor`.\n\n\n******\n\nWhen showing the editor and viewer, the default is to display the editor panel on the left and the application viewer panel on the right. They can be arranged vertically, with the editor above the app viewer, with:\n\n```\n#| layout: vertical\n```\n\n ![Editor and viewer, vertical arrangement](editor-viewer-vertical.png)\n\n\n******\n\nYou can control the height of the panel by setting `viewerHeight`:\n\n```\n#| viewerHeight: 420\n```\n\n******\n\nIf you want to have multiple files in your application, you can use `## file: filename` to indicate the start of each file. This can be used for any type of file, including `.py`, `.csv`, `requirements.txt`, or even binary files.\n\n````markdown\n```{shinylive-python}\n#| standalone: true\n#| components: [editor, viewer]\n## file: app.py\nfrom shiny import App, ui render\nfrom utils import square\n\n# [App code here...]\n\n## file: utils.py\n\ndef square(x, n):\n    row = ui.div([x] * n)\n    return ui.div([row] * n)\n\n## file: requirements.txt\nshinyswatch\n\n## file: www/logo.png\n## type: binary\niVBORw0KGgoAAAANSUhEUgAAACgAAA ...\n```\n\n````\n\n******\n\nIf you want an application which loads data files, you can either embed them in the application with `## file: xyz.dat`, or you can add the file as a separate file in the web site, and load it via a URL. See the [file-loading example](https://quarto-ext.github.io/shinylive/load_file.html) ([source](load_file.qmd)) for an example of how to do this.\n\n\n******\n\nThe default width in a Quarto document is somewhat narrow for showing the editor and viewer next to each other. It can be made wider with [Quarto layout containers](https://quarto.org/docs/authoring/article-layout.html). For example, `column-screen-inset` will the app take up almost the whole window width:\n\n````markdown\n:::{.column-screen-inset}\n```{shinylive-python}\n\n## App code here\n\n```\n:::\n````\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquarto-ext%2Fshinylive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquarto-ext%2Fshinylive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquarto-ext%2Fshinylive/lists"}