Web components

A web component renders a LikeC4 view as a custom HTML element, like <likec4-view view-id="index">. It works in any HTML page or framework, no React code needed. You get one either from the CLI, which generates a standalone script, or from the Vite plugin, if your site is built with Vite.

With the CLI

Install

Add likec4 to your dev dependencies:

npm

npm i -D likec4

pnpm

pnpm add -D likec4

yarn

yarn add -D likec4

bun

bun add -d likec4

The command needs react and react-dom to build the script, and offers to install them if they are missing. The generated script bundles everything, so your page needs nothing else at runtime.

Generate the script

Generate a JavaScript bundle with the web component:

npm

npx likec4 gen webcomponent -o ./src/likec4-webcomponent.js

pnpm

pnpx likec4 gen webcomponent -o ./src/likec4-webcomponent.js

yarn

yarn dlx likec4 gen webcomponent -o ./src/likec4-webcomponent.js

bun

bunx likec4 gen webcomponent -o ./src/likec4-webcomponent.js

Use it:

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

By default, the CLI generates a likec4-view web component.
You can change the likec4 prefix with -w, --webcomponent-prefix.

For example:

npm

npx likec4 gen webcomponent -w custom-c4 -o ./src/likec4-webcomponent.js

pnpm

pnpx likec4 gen webcomponent -w custom-c4 -o ./src/likec4-webcomponent.js

yarn

yarn dlx likec4 gen webcomponent -w custom-c4 -o ./src/likec4-webcomponent.js

bun

bunx likec4 gen webcomponent -w custom-c4 -o ./src/likec4-webcomponent.js

And in HTML:

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

With --customization <file>, the UI customization is bundled into the generated web components (experimental). The command also reads the app config (webcomponentPrefix, customization); use --app-config <file> to point to it, or --no-app-config to ignore it.

Note

CLI command build always generates javascript with web components.
Check Share button on the top at this example

With the Vite plugin

If your site is built with Vite, the LikeC4 Vite plugin provides web components through the likec4:webcomponents/<project> virtual module, with no generation step and with HMR. Import defineWebcomponent from it and register the custom element under a name of your choice:

src/main.ts

import { defineWebcomponent } from 'likec4:webcomponents/project-a'

defineWebcomponent('likec4-view-project-a')

Then use it in HTML:

<likec4-view-project-a
  view-id="index"
  browser="true"
  dynamic-variant="sequence"
  color-scheme="dark">
</likec4-view-project-a>

• The module is always project-scoped: project-a must match a project from your LikeC4 workspace. A workspace without a project config has a single project with the id default.
• The element name is the one you pass, so the plugin webcomponentPrefix option does not apply here. It must follow the custom element naming rules, including at least one hyphen.
• The element renders the LikeC4View from likec4:react/<project>, so the plugin customization option applies to it.
• With TypeScript, add the plugin type references.

Attributes

Both kinds of web components support the same attributes:

Attribute	Description
view-id	Your view id (default index)
browser	Whether to show views browser popup (default true)
dynamic-variant	How dynamic view should be rendered Possible values: diagram or sequence (default diagram)
color-scheme	Force light or dark color scheme Possible values: light or dark (default: follows system)