{"id":23685844,"url":"https://github.com/dodona-edu/papyros","last_synced_at":"2025-09-02T12:32:50.849Z","repository":{"id":37966361,"uuid":"416242248","full_name":"dodona-edu/papyros","owner":"dodona-edu","description":"📜 Scratchpad for Python and JS, running in the browser.","archived":false,"fork":false,"pushed_at":"2024-04-22T12:25:12.000Z","size":1731854,"stargazers_count":16,"open_issues_count":35,"forks_count":7,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-04-22T12:29:28.770Z","etag":null,"topics":["dodona","pyodide"],"latest_commit_sha":null,"homepage":"https://papyros.dodona.be/","language":"TypeScript","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/dodona-edu.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}},"created_at":"2021-10-12T08:06:47.000Z","updated_at":"2024-04-22T12:29:32.694Z","dependencies_parsed_at":"2023-02-19T07:15:36.082Z","dependency_job_id":"9620742b-c0da-4845-b2ff-7ba4511c6198","html_url":"https://github.com/dodona-edu/papyros","commit_stats":{"total_commits":725,"total_committers":7,"mean_commits":"103.57142857142857","dds":0.1875862068965517,"last_synced_commit":"756b35a649767dbed11be3e89aa34f6f1097be58"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dodona-edu%2Fpapyros","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dodona-edu%2Fpapyros/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dodona-edu%2Fpapyros/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dodona-edu%2Fpapyros/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dodona-edu","download_url":"https://codeload.github.com/dodona-edu/papyros/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231785229,"owners_count":18426289,"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":["dodona","pyodide"],"created_at":"2024-12-29T21:15:53.394Z","updated_at":"2024-12-29T21:15:53.863Z","avatar_url":"https://github.com/dodona-edu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Papyros\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@dodona/papyros\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@dodona/papyros.svg\" alt=\"Version of the npm package\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/dodona-edu/papyros/actions?query=branch%3Amain\"\u003e\n    \u003cimg src=\"https://github.com/dodona-edu/papyros/actions/workflows/deploy-pages.yaml/badge.svg\" alt=\"GitHub checks status\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/dodona-edu/papyros/blob/main/LICENSE\"\u003e\n    \u003cimg alt=\"Source code license\" src=\"https://img.shields.io/github/license/dodona-edu/papyros\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nPapyros is a programming scratchpad in the browser. It allows running code\ndirectly in your browser, no installation required. Right now, the focus is on providing a great experience for Python, while also supporting JavaScript.\nBy taking away obstacles between students and coding, the learning experience becomes\nsmoother and less error-prone.\n\nCurrently, Papyros provides support for the following programming languages:\n- Python, powered by [Pyodide](https://pyodide.org/en/stable/)\n- JavaScript, powered by your browser\n\n## Using Papyros in your own project\n\nYou can add Papyros to your project as follows:\n- npm:\n```shell\nnpm install @dodona/papyros\n```\n- yarn:\n```shell\nyarn add @dodona/papyros\n```\n\nPapyros currently supports two modes of operation: stand-alone and embedded.\n\nIn stand-alone mode, Papyros runs as a full application in the browser. \nThis includes extra UI elements to allow selecting a locale, a programming language, ...\n\nIn embedded mode, the layout is reduced to the minimum. Dynamic selections are not displayed,\nas the user knows for what purpose Papyros is being used. For example, when used in the\nscope of a Python exercise in Dodona, there is no need to support other programming languages.\nThe locale should also match that of the actual application.\n\nUsing Papyros in your project is done by following a few steps. First, you create a new\nPapyros instance with a `PapyrosConfig` object.\nThe following options are supported:\n\n- `standAlone`: Whether to operate in stand-alone or embedded mode as described above.\n- `programmingLanguage`: The [programming language](/src/ProgrammingLanguage.ts) to use in the CodeEditor and Backend.\n- `locale`: The locale to use, currently English and Dutch translations are provided.\n- `inputMode`: How the users can provide input, according to the [InputMode enum](/src/InputManager.ts)\n- `example`: Optional name of the selected example, only appliccable in standAlone-mode\n- `channelOptions`: Optional options to provide to the [sync-message](https://github.com/alexmojaki/sync-message) channel. Extra is the serviceWorkerName, which is the relative pathname to the service worker script\n\nFurthermore, you can provide fine-grained configuration by providing `RenderOptions` to each main component in the application when rendering Papyros. You minimally need to specify the ID of the parent element.\nYou can also specify attributes, such as `style`, `data`-attributes or `classNames` to be used.\nThe components you can style like this are the following:\n- `standAloneOptions`: for the global application in standAlone mode\n- `codeEditorOptions`: for the CodeEditor.\n- `statusPanelOptions`: for the StatusPanel in the CodeEditor\n- `inputOptions`: for the field that handles the user input\n- `outputOptions`: for the panel that displays the output of the code\n\n### User input\n\nImportant to note is that handling asynchronous input in a synchronous way is not straightforward.\nThis requires advanced features which are not available by default in your browser. We support two options based on [sync-message](https://github.com/alexmojaki/sync-message).\n\nThe most efficient and practical way is using SharedArrayBuffers, which requires the presence of certain HTTP headers.\nThe following headers must be set on resources using Papyros.\n```yaml\n{\n  \"Cross-Origin-Opener-Policy\": \"same-origin\",\n  \"Cross-Origin-Embedder-Policy\": \"require-corp\"\n}\n```\nIf you are also embedding other components (such as iframes, videos or images) in those pages, you will also need to set the `Cross-Origin-Resource-Policy`-header to `cross-origin` to make them work correctly. If these elements come from external URLs, it will likely not be possible to keep using them. An alternative is described below.\n\nIf you would like to use this project without enabling these HTTP headers, we provide a solution using a service worker.\nIf your application does not use a service worker yet, you can create one based on the [service worker used in stand-alone mode](src/InputServiceWorker.ts)).\nIf you already use a service worker, simply include our [InputWorker](src/workers/input/InputWorker.ts) in your existing service worker using imports (you can import it separately from /dist/workers/input/InputWorker). An example of how to use it can be found in our described service worker. Afterwards, inform Papyros of the location using the channelOptions described earlier.\n\n### Code editor\n\nThe editor used in Papyros is powered by [CodeMirror 6](https://codemirror.net/6/). It is accessible in code via an instance of Papyros and by default allows configuring many options:\n- the [programming language](/src/ProgrammingLanguage.ts) of the contents (for e.g. syntax higlighting)\n- the displayed placeholder\n- the indentation unit\n- the shown panel\n- the autocompletion source\n- the linting source\n- the theme used to style the editor\n\nIf you need more specific functionality, this can be added in your own code by accessing the internal CodeMirror editorView.\n\n## Documentation\n\nVisit our documentation page at \u003chttps://docs.dodona.be/papyros/\u003e.\n\n## Building and developing\n\nClone the repository using git.\n```shell\ngit@github.com:dodona-edu/papyros.git\n```\n\nInstall the required dependencies.\n```shell\nyarn install\n```\n\nStart the local dev-server, powered by webpack.\n```shell\nyarn start\n```\n\nYou can now develop with live-reloading.\nYou can view the results in your browser by visting http://localhost:8080.\n\n## Try it online\n\nStart coding immediately in your [browser](https://papyros.dodona.be/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdodona-edu%2Fpapyros","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdodona-edu%2Fpapyros","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdodona-edu%2Fpapyros/lists"}