https://github.com/oeway/hypha-core
Hypha Server in the browser
https://github.com/oeway/hypha-core
Last synced: about 1 year ago
JSON representation
Hypha Server in the browser
- Host: GitHub
- URL: https://github.com/oeway/hypha-core
- Owner: oeway
- License: mit
- Created: 2024-02-11T20:38:59.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-01T18:35:35.000Z (over 1 year ago)
- Last Synced: 2025-03-27T08:22:07.688Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://oeway.github.io/hypha-core/
- Size: 8.61 MB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hypha Core
Hypha Core for running Hypha App and ImJoy Plugins in the browser.
## Usage
Hypha core is available as a ES module, you can import it in your HTML file like this:
```html
import { HyphaCore } from "https://cdn.jsdelivr.net/npm/hypha-core@0.20.48/dist/hypha-core.mjs";
const hyphaCore = new HyphaCore();
hyphaCore.on("add_window", (config) => {
const wb = new WinBox(config.name || config.src.slice(0, 128), {
background: "#448aff",
});
wb.body.innerHTML = `<iframe src="${config.src}" id="${config.window_id}" style="width: 100%; height: 100%; border: none;"></iframe>`;
});
const api = await hyphaCore.start();
// use api to interact with the server
// you can also create new connections to the server by calling:
// const api2 = await hyphaCore.connect();
```
In the above example we use the `WinBox` library to create a window for each Hypha App or ImJoy Plugin. You can use any other window library or create your own window.
Importantly, you need to serve the 3 template files under the root of your server, you can find the template files in the `public` folder of this repository:
- [hypha-app-iframe.html](./public/hypha-app-iframe.html)
- [hypha-app-webpython.js](./public/hypha-app-webpython.js)
- [hypha-app-webworker.js](./public/hypha-app-webworker.js)
You can also configure the base url by passing {base_url: "your_base_url"} to the `HyphaCore` constructor.
See [lite.html](./public/lite.html) for an example of how to use Hypha Core in the browser.