Skip to main content

Playground Guide

Welcome to the Vaultys Playground! This interactive environment lets you test and experiment with P2P features directly in your browser without writing any code.

🎮 What is the Playground?​

The Vaultys Playground is a fully-featured demo application that showcases:

  • Identity Management: Create and manage decentralized identities (DIDs)
  • P2P Chat: End-to-end encrypted messaging with file sharing
  • Collaborative Canvas: Real-time collaborative drawing
  • Document Collaboration: Shared document editing with live cursors

Access it at: /playground

🚀 Getting Started​

Step 1: Create Your Identity​

When you first open the playground, you'll need to create a decentralized identity:

  1. Navigate to /playground
  2. Enter a name for your identity (e.g., "Alice", "Bob", "Test User")
  3. Choose identity type:
    • 🔐 Software Key: Uses cryptographic keys stored locally
    • 🔑 Passkey: Uses WebAuthn/biometrics for enhanced security
  4. Click "Create Identity"

Your identity will be saved locally and can be reused across sessions.

Step 2: Select an Identity​

Once you have identities created:

  1. Click on any identity from the list to select it
  2. The selected identity will be highlighted in blue
  3. You can manage multiple identities and switch between them

Step 3: Choose a Feature​

With an identity selected, you can access two main features:

💬 P2P Chat​

Real-time encrypted messaging with:

  • Contact management
  • File and image sharing
  • Read receipts
  • Typing indicators
  • Message history

🎨 Collaborative Canvas & Docs​

Real-time collaboration with:

  • Shared drawing canvas
  • Rich text document editing
  • Live cursor tracking
  • Auto-save functionality

💬 Using P2P Chat​

Opening the Chat​

  1. Select an identity in the playground
  2. Click "Open →" next to P2P Chat
  3. The chat interface will open with your identity loaded

Adding Contacts​

To chat with someone, you need to add them as a contact:

  1. Click the "➕" button in the contacts section
  2. Enter their DID (starts with did:vaultys:)
  3. Optionally add a nickname
  4. Click "Add Contact"

Tip: To test between two identities, open the playground in two different browser windows or tabs!

Sending Messages​

  1. Select a contact from your contact list
  2. Type your message in the input field
  3. Press Enter or click Send

Features:

  • Text Messages: Regular text communication
  • File Sharing: Click 📎 to attach files
  • Images: Paste or upload images directly
  • Emojis: Full emoji support 😊

Message Features​

  • Read Receipts: See when messages are delivered and read
  • Typing Indicators: See when contacts are typing
  • Timestamps: Hover over messages for exact time
  • Status Indicators:
    • 🟢 Contact online
    • 🟡 Message pending
    • ✓ Message delivered
    • ✓✓ Message read

File Sharing​

To share files:

  1. Click the 📎 attachment button
  2. Select file(s) to share
  3. Files are encrypted and sent directly P2P

Supported:

  • Documents (PDF, Word, Excel)
  • Images (JPEG, PNG, GIF, WebP)
  • Videos (MP4, WebM)
  • Any file type up to 10MB

🎨 Using Collaborative Features​

Creating/Joining a Room​

  1. Select an identity in the playground
  2. Click "Open →" next to Collaborative Canvas & Docs
  3. Enter a room name or use the generated one
  4. Click "Connect"

Share the room name with others to collaborate!

Canvas Drawing​

The collaborative canvas allows real-time drawing with multiple users:

Tools:

  • Color Picker: Choose from 8 colors
  • Brush Sizes: Small, medium, large
  • Clear Canvas: Reset the drawing (owner only)

How to Draw:

  1. Select a color and brush size
  2. Click and drag to draw
  3. All participants see changes in real-time
  4. Live cursors show where others are drawing

Document Collaboration​

Switch to "Document" mode for rich text editing:

Features:

  • Rich Formatting: Bold, italic, underline
  • Lists: Bullet points and numbered lists
  • Headers: Multiple heading levels
  • Colors: Text and background colors
  • Live Cursors: See where others are typing
  • Auto-save: Changes saved automatically

Collaborative Editing:

  1. Multiple users can edit simultaneously
  2. Each user has a unique cursor color
  3. Names appear above cursors
  4. Changes sync in real-time

Room Management​

As Room Owner:

  • Clear the canvas
  • Remove participants
  • Control room settings

As Participant:

  • View and edit content
  • See other participants
  • Leave room anytime

🔧 Advanced Features​

Identity Management​

Creating Multiple Identities:

// Each identity has:
{
  did: "did:vaultys:5GrwvaEF...",  // Unique identifier
  name: "Alice",                    // Display name
  type: "software" | "webauthn",   // Key type
  createdAt: "2024-01-15T10:30:00Z", // Creation time
  secret: "..."                     // Private key (encrypted)
}

Switching Identities:

  1. Click on any identity in the list
  2. The selected identity becomes active
  3. Open features with that identity

Deleting Identities:

  1. Click the 🗑️ icon next to an identity
  2. Confirm deletion
  3. Identity and associated data are removed

Network Configuration​

The playground uses default settings, but in your own implementation you can configure:

{
  relay: {
    host: 'peerjs.92k.de',  // Signaling server
    secure: true,            // Use HTTPS/WSS
    port: 443,              // Server port
    path: '/'               // Server path
  },
  storage: {
    provider: 'browser',     // Storage type
    encryption: true        // Encrypt stored data
  }
}

Testing Scenarios​

Single User Testing:

  1. Create two identities
  2. Open playground in two tabs
  3. Select different identity in each
  4. Test features between them

Multi-User Testing:

  1. Share your DID with others
  2. Have them add you as contact
  3. Test real P2P communication
  4. Try collaborative features

Network Testing:

  1. Test on different networks
  2. Test with mobile devices
  3. Test with VPNs
  4. Test offline/online scenarios

📊 Understanding the Display​

Status Indicators​

  • 🟢 Connected: Successfully connected to relay server
  • 🟡 Connecting: Establishing connection
  • 🔴 Disconnected: No connection to relay
  • 🔄 Reconnecting: Attempting to reconnect

Contact States​

  • Online: Contact is currently connected
  • Offline: Contact is not connected
  • Away: Contact is idle (future feature)
  • Busy: Do not disturb (future feature)

Message States​

  • Sending: Message being transmitted
  • Sent: Message left your device
  • Delivered: Message reached recipient
  • Read: Recipient viewed message
  • Failed: Message couldn't be sent

🎯 Use Cases​

Personal Chat​

  • Private conversations
  • File sharing between devices
  • Secure messaging

Team Collaboration​

  • Brainstorming on canvas
  • Document collaboration
  • Quick file transfers

Education​

  • Interactive whiteboards
  • Shared note-taking
  • Real-time tutoring

Development​

  • Testing P2P features
  • Debugging connections
  • API exploration

🐛 Troubleshooting​

Can't Connect​

  • Check internet connection
  • Verify browser supports WebRTC
  • Try refreshing the page
  • Check browser console for errors

Can't See Contact Online​

  • Ensure both users are connected
  • Verify correct DIDs are used
  • Check if contact was added properly
  • Try reconnecting both clients

Messages Not Sending​

  • Verify recipient is online
  • Check connection status
  • Ensure proper contact setup
  • Look for error messages

Canvas Not Syncing​

  • Verify room name matches
  • Check all users are connected
  • Try rejoining the room
  • Clear browser cache

Identity Issues​

  • Backup identity secrets
  • Don't clear browser data
  • Export identities regularly
  • Use consistent identity

💡 Tips & Tricks​

Performance​

  • Close unused tabs
  • Use modern browsers
  • Clear old messages periodically
  • Limit file sizes to < 10MB

Security​

  • Never share your secret key
  • Use passkeys when possible
  • Verify contact DIDs
  • Backup important identities

Collaboration​

  • Use descriptive room names
  • Coordinate colors in canvas
  • Take turns in documents
  • Use chat for coordination

🔗 Integration Examples​

Embedding in Your App​

<!-- Add to your HTML -->
<iframe 
  src="/playground/chat#did:vaultys:yourDID"
  width="100%"
  height="600px"
  frameborder="0">
</iframe>

Programmatic Access​

// Use the same libraries
import { setupVaultysPeerSDK } from '@vaultys/peer-sdk';
import { VaultysId } from '@vaultys/id';

// Implement similar features
const identity = await VaultysId.generatePerson();
const peer = setupVaultysPeerSDK({
  vaultysId: identity,
  // ... configuration
});

API Compatibility​

The playground uses the same SDK APIs:

  • peerService.sendMessage()
  • peerService.addContact()
  • space.getArray()
  • space.awareness

🚀 Next Steps​

After exploring the playground:

  1. Build Your Own: Use the Quick Start Guide to build similar features
  2. Study the Code: Review the playground source code
  3. API Deep Dive: Explore the API Reference
  4. Deploy: Follow the Production Guide

🤝 Community​

  • Share your playground creations
  • Report bugs or issues
  • Suggest new features
  • Join our Discord

Happy experimenting! 🎉

Edit this page
Last updated on by François-Xavier Thoorens