npm package: @graphty/graphty-element
Description: A Web Component library for 3D/2D graph visualization built with Lit and Babylon.js
Author: Adam Powers
Latest version: 1.9.3

# @graphty/graphty-element

[![npm version](https://img.shields.io/npm/v/@graphty/graphty-element.svg)](https://www.npmjs.com/package/@graphty/graphty-element)
[![CI/CD](https://github.com/graphty-org/graphty-element/actions/workflows/ci.yml/badge.svg)](https://github.com/graphty-org/graphty-element/actions/workflows/ci.yml)
[![Coverage Status](https://coveralls.io/repos/github/graphty-org/graphty-element/badge.svg?branch=master)](https://coveralls.io/github/graphty-org/graphty-element?branch=master)
[![Documentation](https://img.shields.io/badge/docs-vitepress-blue)](https://graphty.app/docs/graphty/)
[![Storybook](https://img.shields.io/badge/storybook-examples-ff4785)](https://graphty.app/storybook/element/)

A Web Component for 3D/2D graph visualization built with Lit and Babylon.js.

## Quick Start

```bash
npm install @graphty/graphty-element @babylonjs/core lit
```

```html
<!DOCTYPE html>
<html>
    <head>
        <style>
            graphty-element {
                width: 100vw;
                height: 100vh;
                display: block;
            }
        </style>
    </head>
    <body>
        <graphty-element id="graph"></graphty-element>
        <script type="module">
            import "@graphty/graphty-element";

            const graph = document.getElementById("graph");
            graph.nodeData = [
                { id: 1, label: "Node 1" },
                { id: 2, label: "Node 2" },
                { id: 3, label: "Node 3" },
            ];
            graph.edgeData = [
                { src: 1, dst: 2 },
                { src: 2, dst: 3 },
                { src: 3, dst: 1 },
            ];
        </script>
    </body>
</html>
```

## Documentation

- [Getting Started Guide](https://graphty.app/docs/graphty/guide/getting-started)
- [Installation](https://graphty.app/docs/graphty/guide/installation)
- [API Reference](https://graphty.app/docs/graphty/api/)
- [Interactive Examples (Storybook)](https://graphty.app/storybook/element/)

## Features

- **3D and 2D Rendering** - Full 3D graph visualization with camera controls, or simplified 2D mode ([Camera Guide](https://graphty.app/docs/graphty/guide/camera))
- **Multiple Layout Algorithms** - Force-directed, circular, hierarchical, and more ([Layouts Guide](https://graphty.app/docs/graphty/guide/layouts))
- **Rich Styling System** - CSS-like styling with layers, selectors, and dynamic properties ([Styling Guide](https://graphty.app/docs/graphty/guide/styling))
- **Interactive** - Node dragging, hover effects, selection, and custom behaviors ([Events Guide](https://graphty.app/docs/graphty/guide/events))
- **Extensible** - Plugin architecture for custom layouts, algorithms, and data sources ([Extending Guide](https://graphty.app/docs/graphty/guide/extending/))
- **Graph Algorithms** - Built-in algorithms for analysis ([Algorithms Guide](https://graphty.app/docs/graphty/guide/algorithms))
- **VR/AR Support** - WebXR integration for immersive visualization ([VR/AR Guide](https://graphty.app/docs/graphty/guide/vr-ar))

## Browser Support

Graphty works in all modern browsers that support Web Components:

- Chrome/Edge 88+
- Firefox 78+
- Safari 14+

## License

MIT

Inspired by [three-forcegraph](https://github.com/vasturiano/three-forcegraph).