Examples

Interactive examples demonstrating all4one's features. Open these demos in StackBlitz to see them in action.

Basic Organization Chart

A simple org chart with default settings.

StackBlitz Demo Placeholder

Basic Organization Chart

Open in StackBlitz →

import All4One from 'all4one'

const data = {
  nodes: [
    { id: '1', data: { label: 'Sarah Chen', positionName: 'CEO' } },
    { id: '2', pid: '1', data: { label: 'Mike Johnson', positionName: 'CTO' } },
    { id: '3', pid: '1', data: { label: 'Lisa Wang', positionName: 'CFO' } },
    { id: '4', pid: '2', data: { label: 'Alex Kim', positionName: 'Engineering Lead' } },
    { id: '5', pid: '2', data: { label: 'Jordan Lee', positionName: 'Product Manager' } },
  ]
}

export default function BasicExample() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <All4One data={data} />
    </div>
  )
}

---

Interactive with Collapsing

Enable node collapsing to handle large hierarchies.

StackBlitz Demo Placeholder

Collapsible Nodes

Open in StackBlitz →

<All4One 
  data={data} 
  collapsible={true}
  layoutStyle="treeLeftOffset"
/>

---

Custom Theme

Apply the Glass theme with a gradient background.

StackBlitz Demo Placeholder

Glass Theme with Gradient

Open in StackBlitz →

<All4One 
  data={data} 
  nodeTheme="glass"
  backgroundColor="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
  edgeType="curved-edge"
  edgeAnimated={true}
/>

---

Neon Dark Theme

High-contrast dark mode with glowing edges.

StackBlitz Demo Placeholder

Neon Theme

Open in StackBlitz →

<All4One 
  data={data} 
  nodeTheme="neon"
  backgroundColor="#0a0a0a"
  edgeType="oval-edge"
  edgeColor="#06b6d4"
  edgeAnimated={true}
/>

---

Horizontal Layout

Switch to left-to-right layout direction.

StackBlitz Demo Placeholder

Horizontal Layout

Open in StackBlitz →

<All4One 
  data={data} 
  layoutDirection="LR"
  layoutStyle="treeRightOffset"
/>

---

With Photos

Display employee photos in nodes.

StackBlitz Demo Placeholder

With Photos

Open in StackBlitz →

const data = {
  nodes: [
    { 
      id: '1', 
      data: { 
        label: 'Sarah Chen', 
        positionName: 'CEO',
        photo: 'https://i.pravatar.cc/150?img=1'
      } 
    },
    { 
      id: '2', 
      pid: '1', 
      data: { 
        label: 'Mike Johnson', 
        positionName: 'CTO',
        photo: 'https://i.pravatar.cc/150?img=3'
      } 
    },
  ]
}

<All4One data={data} nodeTheme="modern" />

---

Corporate Theme

Enterprise-ready styling with professional blues.

StackBlitz Demo Placeholder

Corporate Theme

Open in StackBlitz →

<All4One 
  data={data} 
  nodeTheme="corporate"
  backgroundVariant="lines"
  backgroundColor="#f8fafc"
/>

---

Creating Your Own Demo

To create a StackBlitz demo:

1. Go to stackblitz.com
2. Create a new React + TypeScript project
3. Install all4one: npm install all4one
4. Copy an example above into your project
5. Share the URL in your documentation

Required Dependencies

Ensure these peer dependencies are installed:

npm install react react-dom @xyflow/react lucide-react zustand tailwindcss