Create Mockups with Lightning Web Components
So you want to create mockups, but want it to live within the Salesforce platform so you can seamlessly move from today’s components into the future. You can do just that, with a few clicks and some simple lines of code using Lightning Web Components.
I wont be going over the setup of SFDX or VS Code or begin with Lightning Web Component- there are trailheads which do a much better job.
Once we have our LWC development environment, we are all set to create our mock up component. This is going to be the simplest of web components using the lowly img tag. Remember, with LWC we can expand this mockup with all the power of html, css and javascript — so the possibilities are endless.
Create the Mock Lightning Web Component
Now lets go ahead and create a new lightning web component (as in the trailhead above) and give it a name, e.g. myMocker.
This will create three files in the LWC project — myMocker.html, myMocker.js and myMocker.js-meta.xml.
Update the html, js and meta files as below:
- myMocker.html: This is a simple img tag which takes three attributes to setup a simple mock page — image url, height and width.
<template>
<img src={imgUrl} height={imgHeight} width={imgWidth}/>
</template>2. myMocker.js: We define the attributes within the javascript to initialize our mock image. These would be exposed to be configurable using design resources.
import { LightningElement, api } from 'lwc';
export default class MyMocker extends LightningElement {
@api imgUrl = '/resource/Mock_One';
@api imgWidth = '1139';
@api imgHeight = '573';
}3. myMocker.js-meta.xml: Define the design attributes in the targetConfig section. The rest are pretty standard.
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>47.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__AppPage,lightning__HomePage,lightning__RecordPage">
<property name="imgUrl" type="String" default="" label="Image URL"/>
<property name="imgWidth" type="String" default="" label="Width"/>
<property name="imgHeight" type="String" default="" label="Height"/>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>That’s about it!
Deploy the Component
Deploy the LWC component to your org through VS Code. The component would now be available on any App, Record of Home page ( as defined by the target tags in the component meta). The design resource is in the targetConfig and available for all three drop points. Set the design parameters. i.e. the image width, height and image url — and you are all set to demo.
e.g. If your image is a static resource named “Mock_One” — the image url to use would be “/resource/Mock_One” and you can use “100%” for height and width.
Here I have a mocked up the Contact record view using three instances of our “myMocker” component with mocks replacing the contact header, details and activity views:

Preview/Test using the Dev Console
In order to test the LWC component through a lightning app — create a wrapper aura component and call the LWC with attribute as below:
<aura:component>
<c:myMocker imgWidth="50%" imgHeight="100%"></c:myMocker>
</aura:component>You can enhance the LWC component to include mock buttons which fire off other mock components and build a complete mockforce application.