How to Create Records in LWC Without Apex: A Step-by-Step Guide

In Salesforce Lightning Web Components (LWC), creating new records doesn't always require server-side controller logic. By leveraging the Lightning Data Service (LDS) wire adapter function createRecord, you can insert new records directly from client-side JavaScript, reducing boilerplate code and boosting UI responsiveness.

In plain words: createRecord is an LWC function from lightning/uiRecordApi that lets you create a new Salesforce record directly using JavaScript without writing any Apex code.

Prerequisites

Before diving into the implementation, make sure you have:

• A basic understanding of modern JavaScript (ES6 Promises and modules) and LWC structure.
• An active Salesforce developer org or scratch org with necessary Object Create permissions.

Step 1: Set Up Your Component

Create a new Lightning Web Component in your project workspace using Visual Studio Code or the Salesforce Developer Console, or open an existing LWC where you want to add creation capabilities.

Step 2: Import the Required Modules

To use createRecord, import the wire function along with the target Object schema definitions in your JavaScript controller:

import { LightningElement } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';

Step 3: Implement the JavaScript Controller Logic

Construct a field-value pair object, bundle it inside a recordInput object, and call createRecord:

Step-by-Step Implementation: Define target field API names, format the record payload, and handle asynchronous promise resolutions using .then() and .catch().

import { LightningElement } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';

export default class CreateRecordLWC extends LightningElement {
    accountName = '';

    handleNameChange(event) {
        this.accountName = event.target.value;
    }

    createNewRecord() {
        const fields = {};
        fields[NAME_FIELD.fieldApiName] = this.accountName;

        const recordInput = { apiName: ACCOUNT_OBJECT.objectApiName, fields };

        createRecord(recordInput)
            .then(account => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Account created with ID: ' + account.id,
                        variant: 'success'
                    })
                );
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error creating record',
                        message: error.body.message,
                        variant: 'error'
                    })
                );
            });
    }
}

Developer Trap: Avoid hardcoding field or object API names as plain strings (e.g., 'Account' or 'Name'). Always import schema references via @salesforce/schema to ensure referential integrity and prevent silent runtime breakages if schema names change.

Step 4: Add the UI Elements to Your Template

In your HTML file, render input fields to capture user data and a button to initiate the creation process:

<template>
    <lightning-card title="Create Account" icon-name="standard:account">
        <div class="slds-m-around_medium">
            <lightning-input 
                label="Account Name" 
                value={accountName} 
                onchange={handleNameChange}>
            </lightning-input>
            
            <div class="slds-m-top_medium">
                <lightning-button 
                    variant="brand" 
                    label="Create Record" 
                    onclick={createNewRecord}>
                </lightning-button>
            </div>
        </div>
    </lightning-card>
</template>

Key Summary: createRecord

• Module: lightning/uiRecordApi
• Input Payload: Requires an object containing apiName and a key-value fields map.
• Return Value: Returns a Promise resolving to the created Record object (including generated id).
• Core Advantage: Enforces standard object permissions and validation rules on client execution without needing Apex code.

Conclusion

Using createRecord in Lightning Web Components provides an efficient, standard-compliant way to construct records on the platform. By leveraging client-side LDS adapters, you write cleaner code, avoid maintenance overhead from unnecessary Apex classes, and deliver a smooth user experience.