home Home build Tools bug_report Errors menu_book Guides lightbulb Tips extension Extensions folder_open Resources info About
search
Type to search
Home/ Tools/ LWC Component Builder

LWC Component Builder

Configure, build, and generate production-ready Lightning Web Components in three steps.

html HTML template javascript JavaScript class css Stylesheet settings JS-meta.xml bolt 6 templates
1
Configure
2
Build
3
Generate

Configure your component

Name your component and choose a starting template. You can customise everything in the next step.

Use camelCase — no spaces or special characters.
myComponent.html  ·  myComponent.js  ·  myComponent.css
✓
smart_button
Button
Simple action button with handler
✓
credit_card
Card
Data display card with icon
✓
edit_note
Form
Input form with submit handler
✓
table_chart
Data Table
lightning-datatable with columns
✓
open_in_new
Modal
Dialog with header/body/footer
✓
format_list_bulleted
List
Iterated list with for:each

Build your component

Drag Lightning components onto the canvas and define the properties your component will expose.

widgets Lightning Components
Drag onto canvas →
lightning-button
lightning-input
lightning-card
lightning-datatable
lightning-modal
lightning-badge
lightning-spinner
lightning-accordion
lightning-combobox
lightning-icon
lightning-tab
lightning-textarea
tune Component Properties
No properties yet — add one above.
layers Component Canvas

Components here will be added to the HTML template in addition to the base template.

drag_indicator Drop components here or use the base template as-is

Your component is ready

Copy each file into a folder named myComponent inside force-app/main/default/lwc/

folder