ccslide

ccslide is a local CLI editor and presenter for self-contained HTML slide decks.

Install

Run without installing:

npx --yes @igness/ccslide deck

This creates deck.src.html if needed and opens it in your browser.

Or install globally:

npm install -g @igness/ccslide
ccslide deck

Requirements

• Node.js 20 or newer
• Python 3 (python3 or python; Windows also supports py -3)
• Claude editing: an Anthropic API key
• Codex or Blaze editing: the corresponding authenticated CLI on PATH

PDF export also requires Chromium. Install it with the same execution method you use for ccslide:

npx --yes @igness/ccslide install-chromium
# or, after a global install:
ccslide install-chromium

You may instead set CCSLIDE_CHROME_PATH to a Chrome or Chromium executable.

Usage

ccslide deck
ccslide edit deck.src.html
ccslide present deck.html

• Click an element to select it.
• Double-click text to edit it.
• Drag or resize selected elements.
• Use Cmd+Z (macOS) or Ctrl+Z (Windows/Linux) to undo.
• Use the arrow keys to change slides.

Animation

CSS animations and transitions in a deck run normally in the browser. To make an element move smoothly between slides, give the corresponding element on both slides the same data-ccslide-magic value:

<section class="slide active">
  <div data-ccslide-magic="product-card" style="position:absolute;left:80px;top:120px">...</div>
</section>
<section class="slide">
  <div data-ccslide-magic="product-card" style="position:absolute;left:720px;top:260px">...</div>
</section>

Self-contained HTML built with the bundled runtime animates the matched element's position, size, and visual state during presentation. Each non-empty magic-move value must be unique within one slide. Raw templates, browsers without View Transitions support, and reduced-motion preferences fall back to an immediate slide change. Existing decks and custom user templates are not automatically migrated to the bundled runtime.

Templates

ccslide stores user templates and reference files under:

~/.ccslide/templates
~/.ccslide/references

Optional branded assets in ~/.ccslide/templates:

• logo.svg or logo.png
• cover.png, cover.jpg, or cover.webp
• divider.png, divider.jpg, or divider.webp
• closing.png, closing.jpg, or closing.webp

Environment overrides:

• CCSLIDE_TEMPLATE_DIR: template directory containing templates/ and scripts/build.py
• CCSLIDE_ASSET_DIR: directory containing branded assets

License

ccslide is proprietary software. Your content and output remain yours, and the bundled templates may be modified and redistributed. See LICENSE.