# Generate Web Components

import { PackageManagers } from 'starlight-package-managers'

<p style={{display: 'flex', gap: '10px'}}>
<a href="https://www.npmjs.com/package/likec4" target="_blank">![NPM Version](https://img.shields.io/npm/v/likec4)</a>
<a href="https://www.npmjs.com/package/likec4" target="_blank">![NPM Downloads](https://img.shields.io/npm/dm/likec4)</a>
</p>

## Install

Ensure you have [`likec4`](https://www.npmjs.com/package/likec4) in your dependencies:

<PackageManagers
    pkg="likec4"
    pkgManagers={['npm', 'pnpm', 'yarn', 'bun']}
    frame="none"
  />
<br />


## Web Component

Generate javascript bundle with web component:

<PackageManagers
   type="dlx"
   pkg="likec4"
   args="codegen webcomponent -o ./src/likec4-webcomponent.js"
   pkgManagers={['npm', 'pnpm', 'yarn', 'bun']}
   frame="none"
   />

<br />   

Use it:

```html
<script src="./src/likec4-webcomponent.js"></script>
<likec4-view view-id="index"></likec4-view>
```

By default, cli generates a `likec4-view` web component.  
You can change the `likec4` prefix by `-w, --webcomponent-prefix`.

For example:

<PackageManagers
   type="dlx"
   pkg="likec4"
   args="codegen webcomponent -w custom-c4 -o ./src/likec4-webcomponent.js"
   pkgManagers={['npm', 'pnpm', 'yarn', 'bun']}
   frame="none"
   />

And in HTML:

```html
<custom-c4-view view-id="index" browser="true" dynamic-variant="sequence"></custom-c4-view>
```

| Property          | Description                                                                                           |
| ----------------- | ----------------------------------------------------------------------------------------------------- |
| `view-id`         | Your view id                                                                                          |
| `browser`         | Whether to show views browser popup (default `true`)                                                  |
| `dynamic-variant` | How dynamic view should be rendered<br />Possible values: `diagram` or `sequence` (default `diagram`) |

:::note
CLI command [build](/tooling/cli/#build-static-website) always generates javascript with web components.  
Check `Share` button on the top at <a href="https://template.likec4.dev/view/index" target="_blank">this example</a>
:::