lightning dev component

Preview LWC components in isolation.

Description for lightning dev component

Component preview launches an isolated development environment for Lightning Web Components, enabling rapid iteration without needing to deploy changes. The server provides real-time previews of your components through hot module replacement (HMR), automatically refreshing the view when source files are modified.

When running the development server, these changes are immediately reflected:

Component template (HTML) modifications
Styling updates in component CSS files
JavaScript logic changes that don't modify the component's API
Adding or updating internal component dependencies
Modifying static resources used by the component

If you run the command without flags, it displays a list of components that it found in your local DX project for you to choose to preview. Use the –name flag to bypass the question. The command also asks if you want to enable Local Dev in your org if it isn’t already.

See the LWC Developer Guide for more information about component development best practices and limitations (https://developer.salesforce.com/docs/platform/lwc/guide/get-started-best-practices.html).

Flags

Flag Name (Long)	Flag Name (Short)	Description
`‑‑api‑version`	N/A	Type: Value Override the api version used for api requests made by this command
`‑‑client‑select`	`‑c`	Type: Boolean Launch component preview without selecting a component.
`‑‑flags‑dir`	N/A	Type: Value Import flag values from a directory.
`‑‑json`	N/A	Type: Boolean Format output as json.
`‑‑name`	`‑n`	Type: Value Name of a component to preview.
`‑‑target‑org`	`‑o`	Type: Value Required Username or alias of the target org. Not required if the `target-org` configuration variable is already set.

Examples for lightning dev component

Select a component interactively and launch the component preview; use your default org:

1sf lightning dev component

Launch component preview for “myComponent”; use the org with alias “myscratch”:

1sf lightning dev component --name myComponent --target-org myscratch