dodona-edu / papyros

📜 Scratchpad for Python and JS, running in the browser.
https://papyros.dodona.be/
MIT License
18 stars 8 forks source link
dodona pyodide

Papyros

Version of the npm package GitHub checks status Source code license

Papyros is a programming scratchpad in the browser. It allows running code directly in your browser, no installation required. Right now, the focus is on providing a great experience for Python, while also supporting JavaScript. By taking away obstacles between students and coding, the learning experience becomes smoother and less error-prone.

Currently, Papyros provides support for the following programming languages:

Using Papyros in your own project

You can add Papyros to your project as follows:

Papyros currently supports two modes of operation: stand-alone and embedded.

In stand-alone mode, Papyros runs as a full application in the browser. This includes extra UI elements to allow selecting a locale, a programming language, ...

In embedded mode, the layout is reduced to the minimum. Dynamic selections are not displayed, as the user knows for what purpose Papyros is being used. For example, when used in the scope of a Python exercise in Dodona, there is no need to support other programming languages. The locale should also match that of the actual application.

Using Papyros in your project is done by following a few steps. First, you create a new Papyros instance with a PapyrosConfig object. The following options are supported:

Furthermore, 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. You can also specify attributes, such as style, data-attributes or classNames to be used. The components you can style like this are the following:

User input

Important to note is that handling asynchronous input in a synchronous way is not straightforward. This requires advanced features which are not available by default in your browser. We support two options based on sync-message.

The most efficient and practical way is using SharedArrayBuffers, which requires the presence of certain HTTP headers. The following headers must be set on resources using Papyros.

{
  "Cross-Origin-Opener-Policy": "same-origin",
  "Cross-Origin-Embedder-Policy": "require-corp"
}

If 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.

If you would like to use this project without enabling these HTTP headers, we provide a solution using a service worker. If your application does not use a service worker yet, you can create one based on the service worker used in stand-alone mode). If you already use a service worker, simply include our InputWorker 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.

Code editor

The editor used in Papyros is powered by CodeMirror 6. It is accessible in code via an instance of Papyros and by default allows configuring many options:

If you need more specific functionality, this can be added in your own code by accessing the internal CodeMirror editorView.

Documentation

Visit our documentation page at https://docs.dodona.be/papyros/.

Building and developing

Clone the repository using git.

git@github.com:dodona-edu/papyros.git

Install the required dependencies.

yarn install

Start the local dev-server, powered by webpack.

yarn start

You can now develop with live-reloading. You can view the results in your browser by visting http://localhost:8080.

Try it online

Start coding immediately in your browser.