# Aliases:
likec4 start
likec4 dev
```

This recursively searches for `*.c4`, `*.likec4` files in current folder, parses and serves diagrams via local web server.  
Any change in the sources triggers hot update in the browser immediately.

:::tip
You can start the process in a separate terminal window and keep it running while you're editing model in editor, or even serve multiple projects at once.
:::

<Aside type="caution">
By default the web server listening localhost (127.0.0.1). If you want it to listen on all network interfaces add `--listen 0.0.0.0` to the serve command.
</Aside>

### Build static website

Build a single HTML with diagrams, ready to be deployed or embedded into your website.
When you deployed the website, you can use "Share" button and get a link to a specific diagram.

The resulting website is strictly bound to the given base path (`/` by default).
A relocatable app can be built with `--base "./"`.

```sh
likec4 build -o ./dist
```

| Option                  | Description                                                                                           |
| ----------------------- | ----------------------------------------------------------------------------------------------------- |
| `--output`              | Output directory                                                                                      |
| `--base, --base-url`    | Base URL the app is being served from, e.g. "/", "/pages/" or "./" for a relocatable app              |
| `--use-hash-history`    | Hash-based navigation, e.g. "/#/view" instead of "/view"                                              |
| `--use-dot`             | Use local binaries of Graphviz ("dot") instead of bundled WASM                                        |
| `--webcomponent-prefix` | Prefix for web components, e.g. "c4" generates `<c4-view ../>`                                        |
| `--title`               | Base title of the app pages (default is "LikeC4")                                                     |
| `--output-single-file`  | Generates a single self-contained HTML file                                                           |

:::note
Internally, CLI uses Vite to build the website, and `likec4 build` calls `vite build`.  
Vite [deploy documentation](https://vitejs.dev/guide/static-deploy.html) may also help you.

Repository [likec4/template](https://github.com/likec4/template) demonstrates how to deploy likec4 website to github pages.
:::


There is also a supplementary command to preview the build:

```sh
likec4 preview -o ./dist
```

For example, this command can be used on CI, to compare diagrams with ones from the previous/main build.

### Export to PNG

```sh
likec4 export png -o ./assets
```

This command starts local web server and uses Playwright to take screenshots.  
If you plan to use it on CI, refer to [Playwright documentation](https://playwright.dev/docs/ci) for details
or consider [LikeC4 GitHub Actions](/tooling/github)

:::note
Export to PNG requires Playwright.  
You will be prompted with a command to install if it's not found.
:::

### Export to JSON

```sh
likec4 export json -o dump.json
```

### Generate Mermaid, Dot, D2, PlantUml

Via codegen:

```sh
likec4 gen mmd
likec4 gen mermaid
likec4 gen dot
likec4 gen d2
likec4 gen plantuml
```

<LinkCard
  title="Generate components"
  description="Learn how to generate React and Web Components"
  href="/tooling/code-generation/react/"
/>

<LinkCard
  title="Custom generators"
  description="Learn how to define and use custom generators"
  href="/tooling/code-generation/custom/"
/>

### Validate

```sh
likec4 validate
```

This command checks for:
- syntax errors 
- layout drift (outdated manual layout)

If any error is found the command ends with non-zero return code.