LWC Basics – Structure, HTML, JS, Meta File

Lightning Web Components are built with a consistent folder structure and a small set of core files. This post explains the role of each file and how they work together.

1. Basic Component Structure

Every component lives in its own folder and contains at least these files:

• componentName.html – template markup
• componentName.js – component logic
• componentName.js-meta.xml – metadata configuration
• componentName.css – optional styling

Example folder layout

myComponent/
  myComponent.html
  myComponent.js
  myComponent.js-meta.xml
  myComponent.css
  

2. HTML Template

The HTML file defines the component UI and binds data from JavaScript. Use standard HTML plus LWC directives.

<template>
    <lightning-card title="Account Info" icon-name="standard:account">
        <div class="slds-m-around_medium">
            <p>Name: {accountName}</p>
            <lightning-button
                label="Refresh"
                onclick={handleRefresh}
                variant="brand"
            ></lightning-button>
        </div>
    </lightning-card>
</template>
  

Key HTML features

• {property} for one-way binding
• if:true / if:false for conditional rendering
• for:each for list iteration
• onclick, onchange, and other event handlers

3. JavaScript File

The JavaScript file defines component state, methods, and decorators that control reactivity.

import { LightningElement, api, track } from 'lwc';

export default class MyComponent extends LightningElement {
    @api recordId;    // Public property from parent
    @track isLoading = false;  // Reactive property

    accountName = 'Acme Corp';  // Private property

    handleRefresh() {
        this.isLoading = true;
        setTimeout(() => {
            this.isLoading = false;
        }, 500);
    }
}
  

Common decorators

• @api – expose public properties and methods
• @track – track nested property changes (less needed with simple fields)
• @wire – connect to data services or Apex

4. Meta XML File

The .js-meta.xml file configures component visibility, targets, and API version.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Account</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
  

What you can configure

• isExposed – make it available in App Builder
• targets – specify pages where it can be used
• targetConfigs – configure properties and object context

5. Additional Files

Optionally add these files for richer functionality:

• componentName.css – component-specific styling
• componentName.svg – custom icon support
• componentName.js-meta.xml – set property types and targets

6. How the Files Work Together

The framework compiles and bundles these files. The JS file handles state and behavior, the HTML file renders markup, and the meta file controls deployment and visibility.

Key Takeaways

• LWC components use HTML, JS, and meta XML files together
• Use @api for public data and methods
• Use {property} binding to display JS values
• The meta file enables App Builder and page targets
• Keep component folders clean and focused