Render Multiple Templates in Salesforce Lightning Web Components (LWC)

In Salesforce Lightning Web Components (LWC), developers often need to show different UI layouts based on user actions or conditions.

For example, you may want to display a login form, a registration form, or a dashboard depending on the user’s selection. Instead of writing all UI code in a single HTML file, Salesforce provides a powerful feature that allows you to render multiple templates in a single component.

Rendering multiple templates means creating multiple HTML files within a Lightning Web Component and dynamically switching between them using JavaScript logic.

This approach helps developers keep code clean, reusable, and easy to maintain. It is especially useful when you have completely different layouts and do not want to mix them in a single template file.

While working on an authentication component in our Salesforce org, I was asked to build a UI that could switch between a Sign In and a Sign Up form.

The form needed to be displayed based on the user’s button click. For example, if the user clicked “Sign Up,” a sign-up form should be rendered, and if the user clicked “Sign In,” the login form should be shown.

To implement this, I created multiple templates and rendered them conditionally using Lightning Web Components (LWC).

Each form (sign-in and sign-up) was defined in a separate HTML file, and the logic for switching between these views was handled in the component’s JavaScript controller.

In this Salesforce tutorial, I will explain how to render multiple templates in Salesforce Lightning Web Components.

What is Rendering Multiple Templates in LWC?

Rendering multiple templates means displaying different HTML layouts dynamically within a single Lightning Web Component. Instead of using a single HTML file, we create multiple HTML template files and control which one is shown using JavaScript logic.

In LWC, this is achieved using the render() method. The render() method determines which template to display based on a condition. The method must return a valid template reference imported into the JavaScript file.

This concept is similar to switching views in modern web applications, where different UI screens are shown based on user interaction.

Render Multiple Templates in Salesforce Lightning Web Components (LWC)

For better understanding, I’ll first explain with a basic rendering of multiple templates with a button switch. With this, you will know how the switch logic works to render templates.

In the example below, we will create a Lightning web component that renders multiple HTML templates. These templates will switch based on the button-click logic we define.

Now, open the VS Code IDE connected to the Salesforce org, and follow the steps below.

1. To create a Lightning web component, press “Ctrl+Shift+p” and select SFDX: Create Lightning Web Component in the command palette.
2. In the Lightning web component, you will get one default HTML file along with the JS and meta.xml files.

To render multiple templates, we will create two more HTML templates in the same LWC component. I have created the HTML files templateOne.html and templateTwo.html in the component.

The file structure should look as follows:

3. Enter the code below in the templateOne.html file.

<template>
    <lightning-card title="Template One">
        <div>
            This is text is from Template One.
        </div>
        <p class="margin-vertical-small">
            <lightning-button label="Switch Templates" onclick={switchTemplate}>
            </lightning-button>
        </p>
    </lightning-card>
</template>

In the above code, we have defined a button action labeled “Switch Templates”. When the user clicks this button, it triggers the switchTemplate method, which we will define in the JavaScript file.

4. For the second HTML template, “templateTwo“, enter the code below.

<template>
    <lightning-card title="Template Two">
        <div>
            This text is from Template Two.
        </div>
        <p class="margin-vertical-small">
            <lightning-button label="Switch Templates" onclick={switchTemplate}>
            </lightning-button>
        </p>
    </lightning-card>
</template>

5. Now, we need to define the logic for the buttons to switch the templates in the Lightning Web Component. Before that, we need to import the HTML templates into the LWC using the code below in the JS file.

import { LightningElement } from 'lwc';
import templateOne from './templateOne.html';
import templateTwo from './templateTwo.html';

After this, enter the code below in the JS file to define the logic for switching the template on a button click.

export default class MultiTemplatesLwc extends LightningElement {
    templateOne = true;

    render() {
        return this.templateOne ? templateOne : templateTwo;
    }

    switchTemplate() {
        this.templateOne = this.templateOne === true ? false : true;
    }
}

In the code above, we have defined the logic to switch templates in the switchTemplate() method.

This method changes the value of the templateOne property between true and false. This boolean value decides which template should be rendered.

When the method is called by clicking the “Switch Templates” button, it checks if templateOne is currently true and sets it to false if so; otherwise, it sets it back to true.

This allows the render() method to display the template based on the switch conditions.

6. After this, enter the code below in the meta.xml file to make this component visible to the Lightning pages.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

7. To test the Lightning web component, we will deploy it on the Lightning record page. To do this, navigate to the record page, click the settings icon, and select Edit page.
8. In the components tab, add the Lightning Web Component to the page region, then save the changes.

Now, in the Lighting web component, you will see templateOne by default. As we click on the button “Switch Templates,” it will render the templateTwo.

Output:

This way, we can render multiple HTML templates in a Salesforce Lightning web component using conditional statements.

Real-Time Example for Rendering Multiple Templates in Lightning Web Component

Let’s take the real-time example I mentioned earlier in the scenario: building a custom authentication component that conditionally renders a Sign-in or Sign-up form based on user interaction.

In this Lightning Web Component, we will create two HTML templates, one to display a login form and another to display a signup form. These templates will be displayed when the user clicks the login or signup button in LWC.

In this Lighting web component, we will render templates conditionally.

Now, follow the steps below to create a Lightning Web Component.

1. To create the lightning web component, press “Ctrl+shift+p”, and then select SFDX: Create Lightning Web Component in the command palette.
2. In the Lightning web component, there will be default files: HTML, JS, and meta.xml. In addition to these files, I have added two more HTML files: signupTemplate.html and signinTemplate.html.

These templates will be displayed with the signup and sign-in buttons, respectively. With this, the LWC folder structure will look as mentioned in the image below.

3. To define the sign-in form template, enter the code below in the signintemplate.html file.

<template>
    <h2>Sign In Form</h2>
    <lightning-input type="text" label="Enter Username"></lightning-input>
    <lightning-input type="password" label="Enter Password"></lightning-input>

    <lightning-button variant="success" label="Sign In" onclick ={submitHandler}></lightning-button>
    <lightning-button variant="destructive" label="Back" onclick ={handleClick}></lightning-button>
</template>

4. After this, enter the code below in the signuptemplate.html file to define the signup form.

<template>
    <lightning-card>
        <div>
            <h2>Sign Up Form</h2>
            <lightning-input type="text" label="Enter first name : "></lightning-input>
            <lightning-input type="text" label="Enter last name : "></lightning-input>
            <lightning-input type="email" label="Enter Email : "></lightning-input>
            <lightning-input type="password" label="Enter Password : "></lightning-input>

            <lightning-button variant="success" label="Sign Up" onclick={submitHandler}></lightning-button>
            <lightning-button variant="destructive" label="Back" onclick={handleClick}></lightning-button>
        </div>
    </lightning-card>
</template>

5. The above template will be rendered using the Signup and Sign-In buttons, which will be displayed in the LWC’s default HTML file.

Enter the code below in the default HTML file to render the template on button click.

<template>
    
    <lightning-card title="Multiple template render in LWC">

        <div>
            <h2>Select your option</h2>
            <lightning-button label="Sign Up" onclick={handleClick}></lightning-button>
            <lightning-button label="Sign In" onclick={handleClick}></lightning-button>
        </div>
    </lightning-card>

</template>

6. Now we need to define the JS logic to render the templates. Before that, import the created HTML files using the code below.

import { LightningElement } from 'lwc';
import signinTemplate from './signintemplate.html'
import signupTemplate from './signuptemplate.html'
import defaulttemplate from './multipletemprenderdemo.html'

7. To render the templates on button click, enter the code below after the import method in the JS file.

export default class Multipletemprenderdemo extends LightningElement {

    selected=null;

    render(){

        return this.selected === 'Sign Up' ? signupTemplate:
        this.selected === 'Sign In' ? signinTemplate:
        defaulttemplate
    }
    handleClick(event){
        this.selected = event.target.label
    }
    submitHandler(event){
        if(event.target.label === 'Sign In'){
            console.log('sign in successfully');
        }
        else if(event.target.label === 'Sign Up'){
            console.log('sign up successfully');
        }else{}
    }
}

8. Make the component visible on the Lightning page by adding the code below to the meta.xml file.

<isExposed>true</isExposed>
      <targets>
          <target>lightning__AppPage</target>
          <target>lightning__RecordPage</target>
          <target>lightning__HomePage</target>
      </targets>

Now, navigate to the Lightning page and deploy the Lightning web component. Here, in the UI, there will be two buttons: SignIn and SignUp.

These buttons will use the handleclick method to display the templates signuptemplate and signintemplate.

This way, we can render multiple templates in Salesforce Lightning web components by defining the conditions.

Multiple Templates vs Conditional Rendering

Salesforce recommends using lwc:if for simple conditions and multiple templates for complex UI.

Conclusion

Rendering multiple templates in Salesforce Lightning Web Components is a powerful feature that enables developers to efficiently manage complex UI scenarios.

It allows you to split layouts into separate templates and dynamically switch between them using JavaScript logic.

However, this approach should be used carefully. For simple UI conditions, using lwc:if directives is a better option. But when your component requires completely different designs, multiple templates provide a clean and scalable solution.

By understanding when and how to use this feature, you can build better, more maintainable Lightning Web Components in Salesforce.

You may also like to read:

• Implement Conditional Rendering in Lightning Web Component
• Use Lightning Message Service (LMS) in Salesforce LWC
• Upload a File Using Lightning Web Component in Salesforce
• Get Record ID in Salesforce Lightning Web Component
• Component Composition in Salesforce Lightning Web Components
• LWC vs Aura Components in Salesforce (Complete Guide)

Bijay Kumar

I am Bijay Kumar, the founder of SalesforceFAQs.com. Having over 10 years of experience working in salesforce technologies for clients across the world (Canada, Australia, United States, United Kingdom, New Zealand, etc.). I am a certified salesforce administrator and expert with experience in developing salesforce applications and projects. My goal is to make it easy for people to learn and use salesforce technologies by providing simple and easy-to-understand solutions. Check out the complete profile on About us.