Cellpy

Developer Tools

VSCode Extension

Author Cellpy blocks in your editor with live Shadow DOM preview and one-command push to Workspace.

The Cellpy VS Code extension integrates block authoring directly into your development workflow. Write HTML and CSS in a .cellpy.html file, see changes rendered live in a split Shadow DOM preview, then push the finished block to your Workspace with a single command — without leaving your editor.

Live preview

Instant Shadow DOM preview that mirrors your editor in real time.

Push to Workspace

Send blocks to your Cellpy Workspace with Ctrl+Shift+P.

Zero config

No build step, no bundler. Just HTML, CSS, and your API token.

Installation

Install from the VS Code Marketplace or via the command line.

From the Marketplace

Open VS Code → Extensions (Ctrl+Shift+X) → search Cellpy → click Install.

Or install from the command line:

bash

code --install-extension cellpy.cellpy-vscode

Verify the installation

After installation the Cellpy icon appears in the Activity Bar. You should also see a Cellpy status bar item in the bottom-left. It will show Cellpy — not signed in until you authenticate.

Authentication

Create an API token

In the Cellpy dashboard go to Account → API Tokens → New token. Give it a descriptive name (e.g. vscode-local). Copy the token — it is shown only once.

Store the token in a password manager. Never commit it to source control.

Open the Command Palette (Ctrl+Shift+P) → Cellpy: Sign in → paste your API token → press Enter.

The status bar updates to Cellpy ✓ your-org when connected. The token is stored in VS Code's encrypted secret storage — not in settings files.

Block files

Blocks are single .cellpy.html files with an optional embedded style tag.

A block file is a standard HTML document. The extension extracts the <style> content and body content separately when pushing to the Workspace — so keep your CSS inside <style> and your markup inside <body>.

Scaffold a new block

Open the Command Palette → Cellpy: New Block. You'll be prompted for a block name. The extension creates a .cellpy.html file with the recommended structure:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    /* :host targets the shadow host — use it for top-level layout */
    :host {
      display: block;
      font-family: var(--cellpy-font, system-ui, sans-serif);
      color: var(--cellpy-fg, #111);
    }

    .card {
      background: var(--cellpy-surface, #fff);
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 32px;
    }

    h2 {
      margin: 0 0 12px;
      font-size: 22px;
      font-weight: 700;
      color: var(--cellpy-primary, #6366f1);
    }

    p { margin: 0; color: #6b7280; line-height: 1.6; }
  </style>
</head>
<body>
  <div class="card">
    <h2>Your block heading</h2>
    <p>Edit this file and see the live preview update instantly.</p>
  </div>
</body>
</html>

CSS conventions

Two conventions keep blocks portable:

Use :host for top-level layout styles. Everything is scoped to Shadow DOM automatically.
Expose themeable values as CSS custom properties with sensible defaults: var(--cellpy-primary, #6366f1).

JavaScript is not allowed in Cellpy blocks. The runtime strips all <script> tags before rendering. Blocks are declarative HTML + CSS only.

Live preview

A split-panel Shadow DOM preview that updates as you type.

Open the preview panel

With a .cellpy.html file active, click the Cellpy Preview icon in the editor toolbar (top-right) — or open the Command Palette → Cellpy: Open Preview. The preview opens in a split pane to the right.

Real-time rendering

Every keystroke is reflected in the preview within ~50ms. The block renders inside an actual Shadow DOM — the same isolation your users will see on their website. The preview panel also shows the computed final width so you can check how the block looks at different container widths.

Resize the preview

Use the width dropdown in the preview toolbar to simulate common breakpoints (320px, 640px, 1280px, full) or type a custom width.

Push to Workspace

Send the current block to your Cellpy Workspace for review and publishing.

Push with the command palette

Open the Command Palette → Cellpy: Push to Workspace (or use the keyboard shortcut below). You'll be prompted to give the block a name if it doesn't already have one.

bash

# Keyboard shortcut
Ctrl+Shift+U  (Windows / Linux)
Cmd+Shift+U   (macOS)

Review in the dashboard

Open Workspace in the Cellpy dashboard. The block appears with status pending. Preview it, then click Save Block when satisfied. Assign it to a container to publish it live.

Push as many iterations as you like. Each push creates a new Workspace entry — previous versions are preserved in history.

Commands

All commands available in the Command Palette (Ctrl+Shift+P).

Name	Type	Description
`Cellpy: Sign in`		Authenticate with your API token.
`Cellpy: Sign out`		Remove stored credentials.
`Cellpy: New Block`		Scaffold a new .cellpy.html file with the recommended structure.
`Cellpy: Open Preview`		Open the live Shadow DOM preview panel for the active block file.
`Cellpy: Push to Workspace`	`Ctrl+Shift+U`	Push the current block to your Cellpy Workspace.
`Cellpy: List Blocks`		Show all blocks in your Workspace in the sidebar panel.
`Cellpy: Pull Block`		Download a block from your Workspace into a local .cellpy.html file.

Settings

Configure the extension in VS Code settings (Ctrl+,).

Name	Type	Description
`cellpy.org`	`string`	Your organization slug. Set automatically on sign-in; override for multi-org setups.
`cellpy.previewWidth`	`number`	Default preview width in pixels. Default: 800.
`cellpy.autoPreview`	`boolean`	Automatically open the preview panel when a .cellpy.html file is activated. Default: true.
`cellpy.pushOnSave`	`boolean`	Push to Workspace on every save (Ctrl+S). Useful for rapid iteration. Default: false.
`cellpy.environment`	`string`	'staging' \| 'production'. Controls which environment blocks are pushed to. Default: 'staging'.