Cytoscape Web App Examples

Introduction

Cytoscape Web hosts third-party apps via Module Federation. Apps add panels, menu items, and context menu actions to the host without recompiling it. This site hosts the live builds of four reference apps that cover the full cyweb/* API surface, plus a starter template you can copy when building your own app.

Open Cytoscape Web View on GitHub @cytoscape-web/api-types

Trying these examples

Each example below is deployed as a Module Federation remote on this site, and the sources are the reference implementations to read and copy. They are not installable into web.cytoscape.org directly from here, for two independent reasons:

The host's install form takes a single-entry manifest URL, not a remoteEntry.js URL.
App installs are restricted to an allowlist of origins (apps.cytoscape.org and its staging counterpart), which does not include cytoscape.org — where this site is served from.

To run them, use the repository. Clone it, start the host and the app's dev server side by side, and the host picks the app up from its local registry:

# Terminal 1 — the host, reading apps.local.json
cd cytoscape-web && npm run dev:local

# Terminal 2 — the app you want to try
cd cytoscape-web-app-examples && npm run dev:hello-world

Then open localhost:5500 and enable the app under Apps → Manage Apps…. See the getting-started guide for the full walkthrough.

Example Apps

project-template

Federation: template Start here

The minimal starter app — one panel, one menu action, and one context menu item. Fork the repository and copy this directory to scaffold your own app.

App URL: https://cytoscape.org/cytoscape-web-app-examples/project-template/remoteEntry.js

Source Open remoteEntry.js

hello-world

Federation: hello Full API tour

12 self-contained examples covering every domain API (WorkspaceApi, ElementApi, NetworkApi, SelectionApi, ViewportApi, TableApi, VisualStyleApi, LayoutApi, ExportApi), plus the EventBus, lifecycle, and per-app context menu patterns.

App URL: https://cytoscape.org/cytoscape-web-app-examples/hello-world/remoteEntry.js

Source Open remoteEntry.js

network-statistics

Federation: networkStatistics Non-React

A pure TypeScript app — no React, no UI — that logs topology statistics to the console on network:switched and selection:changed events. Useful as a template for browser extensions, Jupyter bridges, headless analytics, and LLM agent integrations that talk to window.CyWebApi.

App URL: https://cytoscape.org/cytoscape-web-app-examples/network-statistics/remoteEntry.js

Source Open remoteEntry.js

network-workflows

Federation: networkWorkflows Real-world workflows

Higher-level workflows: create a sample network from a menu item, import a network from a remote CX2 file, and receive CX2 payloads from Jupyter Lab via postMessage.

App URL: https://cytoscape.org/cytoscape-web-app-examples/network-workflows/remoteEntry.js

Source Open remoteEntry.js

App API Overview

Every API method returns a discriminated union ApiResult<T> — always check result.success before reading result.data. Plugins import host modules with the cyweb/ prefix.

Import	Purpose
`cyweb/WorkspaceApi`	Current network ID, workspace info, switch network
`cyweb/ElementApi`	Create / delete nodes and edges, graph traversal
`cyweb/NetworkApi`	Create / delete networks, import CX2
`cyweb/SelectionApi`	Read and mutate the current selection
`cyweb/ViewportApi`	Pan, zoom, fit, read/write node positions
`cyweb/TableApi`	Read and write node/edge attribute tables
`cyweb/VisualStyleApi`	Set defaults, bypasses, and mappings
`cyweb/LayoutApi`	Run layout algorithms
`cyweb/ExportApi`	Export the network as CX2
`cyweb/EventBus`	Subscribe to host events via `useCyWebEvent`
`cyweb/AppIdContext`	Per-app resource & context menu APIs
`cyweb/ApiTypes`	TypeScript types for all of the above

EventBus Events

Event	Fires when
`network:created`	A new network is added to the workspace
`network:deleted`	A network is removed
`network:switched`	The user navigates to a different network
`selection:changed`	Node or edge selection changes
`layout:started`	A layout algorithm begins
`layout:completed`	A layout algorithm finishes
`style:changed`	A visual style property changes
`data:changed`	Node or edge attribute data changes

Build Your Own App

To build a new app, fork the repository and start from project-template/. The README walks through running the host and the example apps locally, registering your local remoteEntry.js with Cytoscape Web via apps.local.json, and publishing your finished app.

Developer README Developer Guides project-template Source

Documentation

App API Reference — complete reference for all domain APIs, ResourceApi, EventBus, error codes, and lifecycle
App API Specification — full design document for the 10 domain APIs
Resource Registration Specification — slot model, lifecycle, cleanup, error boundaries
Developer Guides — getting started, architecture, registration patterns, lifecycle, troubleshooting
@cytoscape-web/api-types CHANGELOG — version history for the types package