@webwriter/network

Network (@webwriter/network@2.0.7)

License: MIT | Version: 2.0.7

Visualization of network topologies. Can represent different kinds of networks.

Snippets

Snippets are examples and templates using the package's widgets.

Name	Import Path
Simple Network	@webwriter/network/snippets/simple-network.html
Complex Network	@webwriter/network/snippets/complex-network.html
Triple Network	@webwriter/network/snippets/triple-network.html

NetworkComponent (<ww-network>)

Usage

Use with a CDN (e.g. jsdelivr):

<link href="https://cdn.jsdelivr.net/npm/@webwriter/network/widgets/ww-network.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/network/widgets/ww-network.js"></script>
<ww-network></ww-network>

Or use with a bundler (e.g. Vite):

npm install @webwriter/network

<link href="@webwriter/network/widgets/ww-network.css" rel="stylesheet">
<script type="module" src="@webwriter/network/widgets/ww-network.js"></script>
<ww-network></ww-network>

Fields

Name (Attribute Name)	Type	Description	Default	Reflects
automate (automate)	boolean	Enables automation-related UI.	false	✓
screen (screen)	'small' | 'medium'	Controls the default size of Shoelace controls within this widget.	'medium'	✓
selectedObject (selectedObject)	any	The currently selected Cytoscape element (node or edge).	-	✗
components (components)	Array<Component>	Serialized node list.	[]	✓
connections (connections)	Array<Connection>	Serialized edges between components.	[]	✓
networks (networks)	Array<Network>	Serialized logical networks.	[]	✓
net_mode	SubnettingMode	-	'MANUAL'	✗
NetworkComponent.shadowRootOptions	object	Shadow root options.	{ ...LitElement.shadowRootOptions, delegatesFocus: true }	✗
NetworkComponent.scopedElements	-	Scoped element registry for Shoelace components used in the template.	-	✗

Fields including properties and attributes define the current state of the widget and offer customization options.

CSS parts

Name	Description
options	Sidebar container for import/export and controllers.

CSS parts allow freely styling internals of the widget with CSS.

Editing config

Name	Value

The editing config defines how explorable authoring tools such as WebWriter treat the widget.

No public methods, slots, events, or custom CSS properties.

Generated with @webwriter/build@1.9.0