# Build Lightning Web Components visually, with AI beside you. > The SyncOnAI 360 LWC Builder is a visual builder for Lightning Web Components with AI alongside. It configures properties on a library of more than 700 components generated from Salesforce's own source, wires event handlers and Apex methods together, sets App Builder targets and properties, and proposes the component with its controller and test. Source: https://synconai360.com/features/lwc-builder ## Key facts - **700+**: Components generated from Salesforce's own source - **1**: Proposal for component, controller and test together - **0**: Half-wired buttons: Call Apex writes both sides or neither - **75%**: Apex coverage tested on production deploys ## Why Lightning Web Components are slow to build and review A simple component means an HTML template, a JavaScript controller, a metadata file, an Apex class and a test, all kept in step by hand. Admins cannot review it and developers spend their time on boilerplate. - **Boilerplate everywhere.** Most of a new component is wiring, configuration and metadata, not the logic that matters. - **Properties nobody remembers.** Base components have dozens of attributes; finding the right one means searching documentation. - **Two sides that drift.** A button and the Apex method it calls change separately, and break at runtime. - **Hard to review.** Without a visual view, nobody outside the development team can check what a component does. ## How do you build a Lightning Web Component visually? Configure any property on any element the builder understands, with an inspector that explains what each property does. The library of more than 700 components is generated from Salesforce's own source, so properties match the real components rather than an approximation. Start a component from nothing or open one from the org; every file of each component is synced, so existing components open as they are. Every edit is recorded as a version you can step back through and restore. - Every understood property configurable - Inspector explains each property - 700+ components from Salesforce's source - Open existing components from the org ## How are LWC events and Apex wired together? Wire real event handlers in the builder. Call Apex connects a button in a component to an Apex method by writing both sides together, the component call and the method, and undoes both if either fails, so the two can never drift apart. Apex Logic sits inside the Component Builder, so the Apex behind a component can be read and edited as logic or as code, with edits that would not compile refused. - Real event handlers - Call Apex writes both sides or neither - Apex Logic in the same builder ## How do you control where a component can be used? Decide who may use the component: where it can be placed and which properties an admin can set in Lightning App Builder. Those choices are written into the component's metadata, so admins get exactly the configuration you intended. The LWC Developer agent can draft and adjust components with you, with its changes shown as previews you accept or reject. - Placement targets - Admin-settable properties in App Builder - LWC Developer agent ## How does a Lightning Web Component get deployed? A component can be proposed together with its Apex controller and its test, as one change. The proposal carries named pre-flight checks, its blast radius, and a before and after of every file, and is validated against the org first. Production deploys with Apex run its tests at Salesforce's 75% coverage bar, and production needs an admin other than the author to approve. Every deploy leaves a receipt with rollback. - Component, controller and test as one proposal - Validated before approval - Second-admin approval for production ## Can the AI build a Lightning Web Component for you? Yes. Describe the component in the chat or ask the LWC Developer agent, and it drafts the files against the org's real objects and fields. Its changes appear in the builder as previews you accept or reject, so nothing is applied without you seeing it. Drafted components open in the same builder as hand-built ones, with the same inspector, versions and proposal path, so AI-built and hand-built components are reviewed the same way. - Drafted against the org's real fields - Previews you accept or reject - Same review path as hand-built work ## Building a component 1. **Start.** Begin from nothing or open a component from the org. 2. **Configure.** Set properties from the library, with explanations. 3. **Wire.** Connect events and Call Apex, both sides together. 4. **Place.** Choose targets and App Builder properties. 5. **Ship.** Propose with controller and test; approve and deploy. ## Building LWC, by hand versus in the builder | Without | With SyncOnAI 360 | |---|---| | Boilerplate in four files | Visual configuration with AI drafting | | Searching docs for attributes | An inspector that explains each property | | Buttons and Apex that drift | Both sides written together, or neither | | Components only developers can review | A visual view anyone can check | | Tests added at the last minute | Controller and test in the same proposal | ## Who uses the LWC Builder - **Salesforce developers.** Build and adjust components with a property inspector generated from Salesforce's own component source, wire event handlers and Apex calls that cannot drift, and still edit the code directly. - **Salesforce admins.** Use components exactly as intended: where they can be placed and which properties can be set in Lightning App Builder are decided by the component's builder and written into its metadata. - **Consultancies.** Deliver client components faster, with every version kept and each component proposed with its controller and its test, so the client's release review sees one complete change. - **Reviewers and approvers.** Review a component change file by file in a before and after view, validated against the org first, with the blast radius of what it touches listed on the proposal. ## Frequently asked questions ### Can AI build Lightning Web Components? Yes. The LWC Developer agent drafts and edits components in the visual builder, with changes shown as previews you accept. ### Where do the 700+ components come from? They are generated from Salesforce's own source, so their properties match the real components. ### Can we edit existing components? Yes. Every file of each Lightning Web Component in the org is synced, so you can open and edit existing components. ### What does Call Apex do? It wires a component button to an Apex method by writing both sides together, and undoes both if either fails. ### Can we set App Builder properties? Yes. Decide where the component can be placed and which properties an admin can set in Lightning App Builder. ### Are tests included? A component can be proposed with its Apex controller and its test as one change. ### Does it replace VS Code? No. Developers can keep their editor and Git; the builder adds visual configuration, AI and governed deployment. ### Is the LWC Builder on every plan? Yes. Every plan includes every feature.