Skip to content

ptkl component

Build and live-reload component templates during development.

Overview

ptkl component provides two workflows for component template development:

  • builder — starts a WebSocket server that watches source files and compiles templates on every change, delivering instant feedback in the dashboard editor
  • build — one-shot compilation and upload of a component template from ptkl.config.js

The builder supports Lit (with decorator stripping) and web components engines.

Subcommands

Subcommand Description
builder Start a live-reload WebSocket server for template compilation
build Build and upload a component template

ptkl component builder

Start a WebSocket server that watches template source files. Each time a file changes, the template is recompiled and pushed to the connected dashboard editor.

ptkl component builder [options]

Options

Option Description
-v, --version <version> SDK version to target (default: 6)
-e, --engine <engine> Template engine — webcomponents or lit (default: webcomponents)
-p, --port <port> WebSocket server port (default: 11403)

Example

# start the builder with defaults (SDK 6, web components, port 11403)
ptkl component builder

# use Lit engine on a custom port
ptkl component builder --engine lit --port 9000

The dashboard connects to the WebSocket server automatically when component builder mode is enabled. Changes are reflected in the editor without a page reload.

Tip

Keep the builder running in a separate terminal while working on component templates. Every save triggers an automatic recompile and push.

ptkl component build

Build a component template from a ptkl.config.js file and upload the compiled templates to the platform via the SDK.

ptkl component build [options]

Options

Option Description
-p, --path <path> Path to the component project directory (must contain ptkl.config.js)

Example

ptkl component build --path ./my-component

The build uses Rollup with Babel (SDK 6+) to compile and bundle the template source. The resulting output is uploaded to the component as a template.

Supported Engines

Engine Description
webcomponents Standard Web Components — custom elements with Shadow DOM
lit Lit components with automatic decorator stripping for production builds

The engine is specified via --engine on the builder command. The build command infers the engine from the ptkl.config.js file.

See Also