Interactive Examples
Explore live demonstrations of the blocks-graph library in action. Each example showcases different integration approaches and features of the library, including external block references.
🌐 Pure HTML Example
Native Web Component integration with vanilla JavaScript. Perfect for understanding the core API.
- Zero framework overhead
- Direct DOM manipulation
- ES module imports
- Custom event handling
🔗 External Blocks Demo
Demonstrates cross-repository block references with platform icons for GitHub, GitLab, and other platforms.
- Schema v0.2 external references
- Platform-specific icons
- Cross-repository dependencies
- Automatic placeholder blocks
⚛️ React Example
React integration using the Web Component with refs and hooks. Shows modern React patterns.
- React hooks (useRef, useEffect)
- TypeScript integration
- State management
- Event listeners
🟢 Vue Example
Vue 3 integration with Composition API and reactive data binding. Shows modern Vue patterns.
- Composition API with setup
- Reactive refs and watchers
- TypeScript support
- Custom event handling
🅰️ Angular Example
Angular 19 standalone component integration with two-way binding and reactive forms.
- Standalone components
- Input/Output decorators
- TypeScript integration
- Zone.js event handling
Key Features
🎨 Framework-Agnostic
Native Web Component works with any framework or vanilla JavaScript
🌍 Bilingual Support
Display content in Hebrew and English with easy switching
🔗 Relationship Visualization
Shows prerequisite and parent relationships between blocks
📐 Multiple Orientations
Support for top-to-bottom, left-to-right, right-to-left, and bottom-to-top layouts
🔀 External Block References
Link to blocks in other repositories with platform-specific icons (GitHub, GitLab)
📦 TypeScript Ready
Full TypeScript support with comprehensive type definitions