Embeddables CLI

A CLI for authoring and managing Embeddables locally using TypeScript/TSX.

Features

• Pull existing Embeddables from the cloud and reverse-compile to TSX
• Build TSX pages into the canonical Embeddable JSON format
• Dev mode with hot reload and proxy to a live Engine instance
• Full TypeScript support with autocomplete for all component primitives

Installation

npm install @embeddables/cli

Quick Start

# Login to your Embeddables account
npx embeddables login

# Pull an existing embeddable
npx embeddables pull --id <embeddable-id>

# Start dev server with hot reload
npx embeddables dev --id <embeddable-id>

This creates the following structure in your repo:

embeddables/
  <embeddable-id>/
    pages/           # TSX page files
    styles/          # CSS styles
    computed-fields/ # Custom computed field logic
    actions/         # Data output actions
    config.json      # Embeddable configuration
    .generated/      # Compiled JSON output

Commands

embeddables login

Authenticate with your Embeddables account.

embeddables logout

Clear stored authentication.

embeddables pull --id <id>

Fetch an embeddable from the cloud and reverse-compile it into local TSX files.

Options:

• --id <id> (required): Embeddable ID to pull
• --branch <branch_id>: Pull a specific branch version
• --fix: Remove components with missing required props instead of erroring

embeddables build --id <id>

Compile TSX pages into the canonical JSON format.

Options:

• --id <id> (required): Embeddable ID
• --pages <glob>: Custom pages glob pattern
• --out <path>: Custom output path

embeddables dev

Start a dev server with hot reload.

Options:

• --id <id>: Embeddable ID (will prompt if not provided)
• --engine <url>: Engine origin (default: http://localhost:8787)
• --remote: Use production engine (https://engine.embeddables.com)
• --port <n>: Dev proxy port (default: 3000)

Authoring with TypeScript

Import component primitives for full autocomplete:

import { Container, InputBox, PlainText, CustomButton } from '@embeddables/cli/components'

export default function MyPage() {
  return (
    <Container id="main" key="main">
      <PlainText id="title" key="title" text="Welcome!" />
      <InputBox
        id="email"
        key="email"
        input_type="email"
        label="Email"
        placeholder="[email protected]"
        isRequired
      />
      <CustomButton id="submit" key="submit" text="Continue" action="next-page" />
    </Container>
  )
}

Development (Contributing)

# Install dependencies
npm install

# Build the CLI
npm run build

# Link for local testing
npm link

# Run tests
npm test