Home > Documentation > Examples

Code Examples

Complete, working examples demonstrating ParleyJS in real-world scenarios.

Overview

This section provides full code examples you can run and learn from. Each example is complete, tested, and demonstrates best practices.

For reusable patterns, see Patterns. For use-case guides, see Guides.

Available Examples

Complete Examples Documentation

• EXAMPLES.md - Comprehensive code examples
  • Basic communication
  • iFrame communication
  • Popup communication
  • React integration
  • Vue integration
  • Authentication flows
  • State synchronization
  • Error handling
  • Analytics integration

Live Examples

Working examples in the repository:

• Basic Example - Simple parent-child communication
• Authenticated Example - Authentication flow
• React Integration - React implementation
• Window-to-Window - Popup communication

Example Categories

By Complexity

Beginner:

• Basic Communication
• Simple Request-Response

Intermediate:

• iFrame Communication
• React Integration
• Error Handling

Advanced:

• State Synchronization
• Authentication Flows
• Analytics Integration

By Use Case

Communication Type:

• iFrame: iFrame Communication
• Popup: Popup Communication
• Multiple windows: Multi-Window Guide

Framework Integration:

• React: React Integration
• Vue: Vue Integration

Application Pattern:

• Authentication: Authentication Flow
• State management: State Synchronization
• Analytics: Analytics Integration

Using These Examples

Running Live Examples

# Clone the repository
git clone https://github.com/WebDev-Guy/parley-js.git
cd parley-js

# Install dependencies
npm install

# Build ParleyJS
npm run build

# Serve examples
npx serve .

# Open http://localhost:3000/examples/basic/parent.html

Copying Code

All examples are MIT licensed. You can:

• Copy code directly into your project
• Modify examples for your needs
• Use as learning reference
• Build upon for your use case

Example Structure

Each example includes:

• README.md - What the example demonstrates
• Source code - Complete working code
• Comments - Explaining key concepts
• Setup instructions - How to run it

Learning Path

Recommended order:

1. Start with Basic Communication
2. Try Live Basic Example
3. Study use-case specific examples
4. Adapt examples to your needs

Related Sections

• EXAMPLES.md - Complete examples documentation
• Guides - Step-by-step tutorials
• Patterns - Reusable code patterns
• Live Examples - Working code in repository

Example vs Guide vs Pattern

Examples are:

• Complete working code
• End-to-end implementations
• Ready to run
• Learning-focused

Guides are:

• Step-by-step instructions
• Use-case focused
• Explanatory
• Implementation-focused

Patterns are:

• Reusable snippets
• Solution-focused
• Composable
• Best-practice focused

Use examples to learn, guides to implement, patterns to optimize.

Contributing Examples

Have an example to share? See Contributing Guide.

Good examples:

• Solve a specific problem
• Are complete and tested
• Include clear comments
• Follow best practices
• Are well-documented

---

Navigation

Documentation:

• Complete Examples
• Live Examples

Related:

• Guides
• Patterns

Back to: Documentation Home | Project Home