Design SLDS components
visually. Ship the code.
LWC Studio is the one-stop design bench for Salesforce developers: pick a component, drag every color, border, shadow, hover and animation control, and copy production-ready lightning-* markup, CSS and JavaScript straight into your org.
- 50
- component generators
- 100%
- copy-ready SLDS code
- $0
- to use, forever
50 generators, one consistent workbench
Every generator shares the same three-pane layout: pick a preset, tune every visual control, and copy the HTML, CSS, JS and meta.xml it produces. Need a full page instead of one component? Try the drag-and-drop canvas.
Actions
Button generator
Design lightning-button markup with custom color, shape, shadow, hover and animation.
Open generatorButton Group generator
Style lightning-button-group clusters — shared radius, dividers and hover state across grouped actions.
Open generatorButton Menu generator
Style lightning-button-menu dropdowns — trigger button, menu panel and item hover.
Open generatorButton Icon generator
Style lightning-button-icon — icon-only action buttons for toolbars, rows and cards.
Open generatorButton Stateful generator
Style lightning-button-stateful — two-state toggle buttons like Follow/Following or Join/Joined.
Open generatorButton Icon Stateful generator
Style lightning-button-icon-stateful — icon-only toggles for bookmark, star, like and pin actions.
Open generatorContainers
Card generator
Generate lightning-card and dashboard card markup with custom color, radius and hover lift.
Open generatorData Table generator
Style SLDS tables — striped rows, sticky header and hover highlight for lightning-datatable.
Open generatorAccordion generator
Style lightning-accordion sections — header color, active indicator and expand icon.
Open generatorTab Set generator
Style lightning-tabset — active underline color, tab spacing and hover state.
Open generatorTile generator
Style lightning-tile — media icon, title, hover lift for list and grid item summaries.
Open generatorCarousel generator
Style lightning-carousel — slide overlay, indicator dots and corner radius for banner rotations.
Open generatorRich Text generator
Style lightning-formatted-rich-text / lightning-input-rich-text — link color, spacing and blockquote accent.
Open generatorLayout / Layout Item generator
Style lightning-layout and lightning-layout-item — responsive column grids for page sections and forms.
Open generatorForms
Input Field generator
Style lightning-input text fields — floating labels, focus rings, borders and states.
Open generatorCheckbox Group generator
Style lightning-checkbox-group options — check color, label spacing and layout direction.
Open generatorRadio Group generator
Style lightning-radio-group — selected color, button-style variant and spacing.
Open generatorSelect / Combobox generator
Style lightning-combobox dropdowns — border, focus ring, radius and option list appearance.
Open generatorTextarea generator
Style lightning-textarea — border, focus ring, radius and resize behaviour.
Open generatorSlider generator
Style lightning-slider — track, fill and thumb color for range inputs.
Open generatorFile Upload generator
Style lightning-file-upload dropzones — dashed border, hover state and accepted-file hint.
Open generatorCheckbox generator
Style a single lightning-input checkbox — check color, label position and size.
Open generatorToggle Switch generator
Style a lightning-input toggle — on/off track color, thumb size and label placement.
Open generatorDual Listbox generator
Style lightning-dual-listbox — the two-pane picker used for permission sets and multi-select fields.
Open generatorDate Picker generator
Style a lightning-input date field — border, focus ring, calendar icon accent and radius.
Open generatorCombobox (Search Dropdown) generator
Style lightning-combobox in its open, searchable state — input, highlighted option and listbox.
Open generatorFeedback
Badge generator
Generate lightning-badge status pills — rounded, gradient, outline or soft-tinted.
Open generatorSpinner / Loader generator
Generate lightning-spinner and custom loading indicators — ring, dots, pulse or wave.
Open generatorToast Notification generator
Design success, error and warning toast banners, plus the ShowToastEvent JS to fire them.
Open generatorProgress Bar generator
Generate lightning-progress-bar and ring indicators with custom color, thickness and glow.
Open generatorPath (Progress Indicator) generator
Style lightning-progress-indicator as a sales-path stage tracker — completed, current and upcoming colors.
Open generatorAlert Banner generator
Style persistent SLDS alert banners — info, warning, error and offline states.
Open generatorHelp Text Tooltip generator
Style lightning-helptext — the small "i" tooltip icon used next to form field labels.
Open generatorEmpty State generator
Style an lightning-empty-state / illustration panel for empty lists, zero search results and first-run screens.
Open generatorNavigation
Breadcrumbs generator
Style lightning-breadcrumbs — link color, separator and current-page emphasis.
Open generatorVertical Navigation generator
Style lightning-vertical-navigation — active item highlight, icons and section spacing.
Open generatorTree generator
Style lightning-tree — expandable hierarchy for folder structures, org charts and category trees.
Open generatorVisual
Avatar generator
Style lightning-avatar — initials fallback, shape, size and border for user/record photos.
Open generatorPill generator
Style lightning-pill and pill containers — removable tags for multi-select and filter chips.
Open generatorIcon generator
Style lightning-icon — size, background variant and container shape for SLDS utility icons.
Open generatorFormatted Number generator
Style lightning-formatted-number — currency, percent and decimal display for KPI tiles and record fields.
Open generatorDynamic Icon generator
Style lightning-dynamic-icon — animated score, strength, trend and status indicators.
Open generatorPill Container generator
Style lightning-pill-container — multi-select chip lists for tags, recipients and multi-picklists.
Open generatorFormatted Address generator
Style lightning-formatted-address — mailing addresses with an optional map link, for record pages and cards.
Open generatorFormatted URL generator
Style lightning-formatted-url — clickable links for website fields, external references and record data.
Open generatorFormatted Date Time generator
Style lightning-formatted-date-time — locale-aware date and time display for record fields and activity feeds.
Open generatorRelative Date Time generator
Style lightning-relative-date-time — "3 days ago" / "in 2 hours" labels for activity timelines and feeds.
Open generatorData display
Tree Grid generator
Style lightning-tree-grid — a hierarchy where every row also carries its own column data, like an org chart with headcount or a bill-of-materials with quantity and cost.
Open generatorMap generator
Style lightning-map — a styled, illustrative placeholder for location markers on record and app pages (the generator can’t render live map tiles; it previews the surrounding UI: markers list, footer and border treatment).
Open generatorWhich component do I need?
Salesforce ships several components that look similar but solve different problems. Pick the question closest to yours to see the distinction and jump straight to the right generator.
From blank canvas to pasted code in three steps
Pick a component
Choose from buttons, cards, forms, tables, modals, toasts, spinners, badges and progress bars — each backed by real SLDS markup.
Tune every control
Color, border, radius, padding, shadow, hover behaviour and animation — every field updates the preview instantly.
Copy the code
Get lightning-* HTML, scoped CSS, a working JS controller and a ready js-meta.xml — copy individually or download a zip.
The design step Salesforce developers usually skip
Real lightning-* markup
Every generator outputs actual lightning-button, lightning-card, lightning-input and SLDS class names — not generic divs.
Full visual control
Color, border, radius, padding, typography, shadow, hover state and animation are all editable, live.
Copy or download
Copy HTML, CSS, JS and meta.xml individually, or download the whole bundle as a ready-to-drop LWC folder.
Instant preview
A sandboxed live preview reflects every change immediately, so you can see hover and animation states before you paste anything.
No sign-up, no lock-in
Nothing to install, no account, no watermark. The code is yours the moment you copy it.
Consistent design system
Reuse the same colors and radii across every generator so your whole app feels like one product.
Frequently asked questions
- Is the generated code real Lightning Web Component markup?
- Yes. Every generator outputs actual lightning-* tags (lightning-button, lightning-card, lightning-input, lightning-accordion, lightning-tabset and so on) alongside the SLDS classes Salesforce ships, plus the CSS and JS controller needed to wire it up.
- How many components does LWC Studio support?
- 50 generators spanning Salesforce’s own component categories: actions (buttons, button groups, button icons, stateful buttons, menus), containers (cards, tiles, accordions, tabs, carousels, rich text, layout grids), forms (inputs, selects, comboboxes, checkboxes, toggles, radios, sliders, date pickers, dual listboxes, file upload), navigation (breadcrumbs, vertical navigation, trees), and feedback/visual (toasts, alerts, empty states, spinners, progress bars, path, icons, dynamic icons, pills, help text tooltips, formatted numbers/addresses/URLs/dates).
- Can I build a whole page, not just one component?
- Yes — the Canvas lets you drag any component onto an open canvas, drop it anywhere, position it freely, and style each instance individually. Exporting gives you one LWC bundle per component plus a composite page component that places them all.
- Can I use this for free?
- Yes. LWC Studio has no account, paywall or watermark. Design a component (or a whole page), copy the code, and use it in your org or app.
- Do I need to know CSS to use it?
- No. Every visual property — color, border, radius, padding, shadow, hover and animation — is a control you drag or pick, and the CSS is generated for you.
- Does the generated JavaScript actually work?
- Each component ships a minimal, working LWC controller (an @track/@api field and the relevant event handlers) so you can drop it straight into a component bundle and wire your own logic on top.