---
schema_version: "1"
id: dc60ad21c3999a5e72c8bfca8224e76568c8b9b62e66118c8e0f2dcdfc5267c5
title: lightning dev component
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/salesforcedx/sfclireference/guides/lightning/cli_reference_lightning_dev_component.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-cli-reference/guide/cli_reference_lightning_dev_component.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 4d01d4239ba606552100ed0f3f6dbad34ada5ffd90c0d19bea6507e17da4f326
products:
  - Salesforce CLI Command Reference
  - salesforcedx
---
<!-- prettier-ignore-start -->

# 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:

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

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 |
|------------------|-------------------|-------------|
| <code>&#8209;&#8209;api&#8209;version</code> | N/A | **Type:** Value<br><br>Override the api version used for api requests made by this command |
| <code>&#8209;&#8209;client&#8209;select</code> | <code>&#8209;c</code> | **Type:** Boolean<br><br>Launch component preview without selecting a component. |
| <code>&#8209;&#8209;flags&#8209;dir</code> | N/A | **Type:** Value<br><br>Import flag values from a directory. |
| <code>&#8209;&#8209;json</code> | N/A | **Type:** Boolean<br><br>Format output as json. |
| <code>&#8209;&#8209;name</code> | <code>&#8209;n</code> | **Type:** Value<br><br>Name of a component to preview. |
| <code>&#8209;&#8209;target&#8209;org</code> | <code>&#8209;o</code> | **Type:** Value<br>**Required**<br><br>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:

```shell
sf lightning dev component
```

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

```shell
sf lightning dev component --name myComponent --target-org myscratch
```
<!-- prettier-ignore-end -->