🔄 Real-Time Text Sharing Between LWC Components Using Lightning Message Service (LMS)

Lightning Web Components (LWC) make it easy to build modular, reactive apps. But when components are not directly related (not nested), how do they communicate?

Enter: Lightning Message Service (LMS).

In this blog, we'll explore how to communicate between LWC components using LMS, even when they aren’t in a parent-child relationship.

📚 Use Case
You have two components:

• Component A (Publisher) – accepts user input
• Component B (Subscriber) – listens and updates live

They are not nested and live on the same page (like App Page or Home Page).

📌 When to Use What

🧱 Step 1: Create a Message Channel
📁 File Path

force-app/main/default/messageChannels/TextMessageChannel.messageChannel-meta.xml

📄 XML Code:

59.0
    true
    
        messageText

💡 Make sure the messageChannels folder exists before you add this file.

🛠️ Step 2: Publisher Component (e.g. ParentComponent)
🔹 parentComponent.js

import { LightningElement } from 'lwc';
import { publish, MessageContext } from 'lightning/messageService';
import TEXT_MESSAGE from '@salesforce/messageChannel/TextMessageChannel__c';

export default class ParentComponent extends LightningElement {
    textInput = '';

    // Inject MessageContext
    @wire(MessageContext) messageContext;

    handleChange(event) {
        this.textInput = event.target.value;

        // Publish message
        publish(this.messageContext, TEXT_MESSAGE, {
            messageText: this.textInput
        });
    }
}

🔹 parentComponent.html

🎧 Step 3: Subscriber Component (e.g. ChildComponent)
🔹 childComponent.js

import { LightningElement, wire } from 'lwc';
import { subscribe, MessageContext } from 'lightning/messageService';
import TEXT_MESSAGE from '@salesforce/messageChannel/TextMessageChannel__c';

export default class ChildComponent extends LightningElement {
    receivedText = '';

    @wire(MessageContext) messageContext;

    connectedCallback() {
        // Subscribe to the channel
        subscribe(this.messageContext, TEXT_MESSAGE, (message) => {
            this.handleMessage(message);
        });
    }

    handleMessage(message) {
        this.receivedText = message.messageText;
    }
}

🔹 childComponent.html

Message Received: {receivedText}

🚀 Step 4: Deploy and Add to Lightning Page

• Deploy both components and message channel.
• Open Lightning App Builder.
• Drag both components to a Lightning Page (e.g., App Page).
• Save and activate the page.

✅ Now type in the parent component — your child component will receive updates in real-time!

🧠 Key Takeaways

• Use LMS when components are not related.
• It’s a declarative way to broadcast and subscribe to messages.
• Clean, decoupled communication without passing props or events.

💬 Wrap Up
Lightning Message Service is a game-changer for scalable, maintainable component communication. It works beyond just LWC — even Aura and Visualforce can join the party!

Got questions or want the code? Drop a comment below!