Salesforce Markup Builder

Salesforce Markup Builder is a UI design tool that helps developers, admins and designers quickly create Lightning Web Components.

𝐏𝐮𝐫𝐩𝐨𝐬𝐞 Users can visually create Salesforce user interfaces by simply dragging and dropping components onto the canvas. This makes it easy for anyone, even without coding experience, to build fully functional UI layouts. 𝐊𝐞𝐲 𝐟𝐞𝐚𝐭𝐮𝐫𝐞𝐬 ● 𝘿𝙧𝙖𝙜 𝙖𝙣𝙙 𝘿𝙧𝙤𝙥 𝙐𝙄 𝘽𝙪𝙞𝙡𝙙𝙚𝙧 : Users simply drag and drop the components and create the UI easily. ● 𝙉𝙤-𝘾𝙤𝙙𝙚 𝙐𝙄 𝘾𝙧𝙚𝙖𝙩𝙞𝙤𝙣 : The app empowers users to build Salesforce interfaces without writing any code. ● 𝙀𝙭𝙥𝙤𝙧𝙩 𝙘𝙤𝙢𝙥𝙤𝙣𝙚𝙣𝙩𝙨 𝙩𝙤 𝙇𝙒𝘾 𝙤𝙧 𝙃𝙏𝙈𝙇 𝙬𝙞𝙩𝙝 𝙎𝙇𝘿𝙎 : Once the UI is designed, users can instantly export clean and structured Lightning Web Component (LWC) code. All components come styled with Salesforce Lightning Design System (SLDS) classes to ensure consistency. ● 𝘿𝙤𝙬𝙣𝙡𝙤𝙖𝙙 𝙁𝙪𝙡𝙡 𝘾𝙤𝙢𝙥𝙤𝙣𝙚𝙣𝙩 𝘾𝙤𝙙𝙚 : The generated UI code can be downloaded as a complete package, including .html, .js, .css and .xml files—ready to deploy in Salesforce. ● 𝙍𝙚𝙨𝙥𝙤𝙣𝙨𝙞𝙫𝙚 𝙋𝙧𝙚𝙫𝙞𝙚𝙬 𝙛𝙤𝙧 𝘼𝙡𝙡 𝘿𝙚𝙫𝙞𝙘𝙚𝙨 : Users can preview the UI layout in real time across different screen sizes, including mobile phones, tablets, and desktops. This ensures the design looks great and functions well on every device. ● 𝘾𝙪𝙨𝙩𝙤𝙢 𝘾𝙎𝙎 𝙎𝙪𝙥𝙥𝙤𝙧𝙩 : The app allows users to add their own CSS rules directly within the builder. This gives designers full flexibility to enhance styling for more customized interfaces. 𝐖𝐡𝐨 𝐢𝐭’𝐬 𝐟𝐨𝐫 It's perfect for admins, business users, and developers looking to prototype or create deployable UI quickly. 𝐁𝐞𝐧𝐞𝐟𝐢𝐭𝐬 Users simply drag and drop the components and create the UI easily and see the output visually. no need to deploy code and refresh the page on every change to see the output so it's saving the user's time and improving productivity. 𝐇𝐨𝐰 𝐭𝐨 𝐮𝐬𝐞 Salesforce Markup Builder is located on the top right corner on the browser. Click on the icon and the builder screen is opening and you see on the left side the list of components and on the right side you will see the canvas where you can drag and drop the components from the left sidebar component list. On the builder header right side you will see some buttons (Custom CSS, View Code, Download Code, Preview). ● 𝘾𝙪𝙨𝙩𝙤𝙢 𝘾𝙎𝙎 : On click of this button you will see an editor and in that editor you will write your custom CSS code. ● 𝙑𝙞𝙚𝙬 𝘾𝙤𝙙𝙚 : On click of this button you will see your component code. In the LWC tab you will see your code in lwc components, In the SLDS tab you will see your code in Core SLDS and in the CSS tab you will see your custom CSS. ● 𝘿𝙤𝙬𝙣𝙡𝙤𝙖𝙙 𝘾𝙤𝙙𝙚 : On click of this button you will be able to download your component code in a zip file and in that zip you will see two components one is with LWC code and another one is with SLDS code. And these components will have the .html, .Js, .CSS and .xml files. ● 𝙋𝙧𝙚𝙫𝙞𝙚𝙬 : On click of this button you will see your component preview on Desktop, Tablet and Mobile view. And On click of the component which you drop on canvas you will able to see the property bar in the right side of the app and this property bar is floatable so we are able to move it anywhere in the app and in this bar you will see the properties of the components like if we click on button so we are able to see the button label and variant. 𝐏𝐫𝐢𝐯𝐚𝐜𝐲 ● 𝙉𝙤 𝘿𝙖𝙩𝙖 𝘾𝙤𝙡𝙡𝙚𝙘𝙩𝙞𝙤𝙣 : We do not collect any personal or sensitive user data. ● 𝘾𝙤𝙙𝙚 𝙖𝙣𝙙 𝘾𝙤𝙣𝙩𝙚𝙣𝙩 𝙎𝙚𝙘𝙪𝙧𝙞𝙩𝙮 : Any code exported or downloaded through the app is generated locally and not stored or accessed by us. ● 𝘾𝙤𝙤𝙠𝙞𝙚𝙨 & 𝘼𝙣𝙖𝙡𝙮𝙩𝙞𝙘𝙨 : We do not use cookies or third-party analytics tools within the app. ● 𝙏𝙝𝙞𝙧𝙙-𝙋𝙖𝙧𝙩𝙮 𝘼𝙘𝙘𝙚𝙨𝙨 : We do not share or transfer any data to third parties. Your designs and code remain fully private.