@reactslides/cli

Command-line interface for ReactSlides - scaffolding and development tools.

Installation

npm install -g @reactslides/cli
# or
npx @reactslides/cli

Commands

Create a new presentation

# Interactive mode
npx create-reactslides

# With project name
npx create-reactslides my-presentation

# With template
npx create-reactslides my-presentation --template corporate

Available templates:

• minimal - Simple starter template
• corporate - Professional business presentations
• developer - Code-heavy technical presentations
• creative - Bold, visually rich presentations

Generate template from screenshots (AI-Powered)

Create custom templates automatically from presentation screenshots:

# Interactive mode
npx reactslides create-template-from-screenshots

# With screenshots
npx reactslides create-template-from-screenshots my-template \
  --screenshots slide1.png slide2.png slide3.png

# Using Claude instead of OpenAI
npx reactslides create-template-from-screenshots my-template \
  --screenshots slide.png \
  --provider claude

Requirements:

• API key: OPENAI_API_KEY or ANTHROPIC_API_KEY
• Screenshot images (PNG/JPG, 1920x1080+ recommended)

The command will analyze your screenshots and generate:

• Color palette extraction
• Typography sizing (Tailwind classes)
• Layout structure detection
• SVG placeholder assets
• Complete template package

See Template Generator README for detailed usage.

Development server

reactslides dev              # Start dev server on port 3000
reactslides dev --port 5000  # Custom port
reactslides dev --host       # Expose to network
reactslides dev --open       # Open browser on startup

Build for production

reactslides build              # Build to ./dist
reactslides build --outDir out # Custom output directory
reactslides build --base /app/ # Custom base path for deployment

Import presentations

Import from PowerPoint or Google Slides:

# Import from PowerPoint
reactslides import --from pptx presentation.pptx

# Import with custom output directory
reactslides import --from pptx presentation.pptx --output-dir my-presentation

# Import from Google Slides (requires Google API credentials)
reactslides import --from google-slides <presentation-id>
reactslides import --from google-slides https://docs.google.com/presentation/d/...

# With style preservation
reactslides import --from pptx presentation.pptx --preserve-styles

The import command will:

1. Parse the presentation file
2. Extract slides, content, and media
3. Generate a ReactSlides project with exact dependencies
4. Create positioned elements matching the original layout

Export presentation

reactslides export         # Export to static HTML
reactslides export --pdf   # Export to PDF (requires Playwright)
reactslides export --png   # Export slides as PNG (requires Playwright)

Preview built presentation

reactslides preview              # Preview on port 4173
reactslides preview --port 5000  # Custom port
reactslides preview --host       # Expose to network

Testing Unpublished Packages

When testing changes from a PR without publishing to npm:

Option 1: Using pnpm link (Recommended for monorepo)

# In the monorepo root (after building)
cd /path/to/reactslides-monorepo
pnpm build

# Link the packages globally
cd packages/reactslides
pnpm link --global

cd ../shared-ui
pnpm link --global

cd ../../apps/cli
pnpm link --global

# In your test project
cd /path/to/test-project
pnpm link --global @reactslides/core
pnpm link --global @reactslides/shared-ui
pnpm link --global @reactslides/cli

Option 2: Using local file dependencies

# In your test project's package.json
{
  "dependencies": {
    "@reactslides/core": "file:../monorepo/packages/reactslides",
    "@reactslides/shared-ui": "file:../monorepo/packages/shared-ui"
  }
}

Option 3: Testing CLI directly

# In the monorepo root
cd /path/to/reactslides-monorepo
pnpm build

# Run CLI commands directly
node apps/cli/dist/index.js import --from pptx presentation.pptx

# Or make it executable
chmod +x apps/cli/dist/index.js
./apps/cli/dist/index.js import --from pptx presentation.pptx

Option 4: Using the import generated project

After importing a presentation:

# The generated project will have exact version dependencies
cd imported-presentation

# Update package.json to use local packages
# Replace version numbers with file paths:
# "@reactslides/core": "file:../monorepo/packages/reactslides"

# Then install and run
pnpm install
pnpm dev

Template Structure

Each template includes:

my-presentation/
├── src/
│   ├── App.tsx        # Main presentation component
│   ├── main.tsx       # Entry point
│   └── index.css      # Styles with Tailwind
├── public/            # Static assets
├── index.html         # HTML entry
├── package.json
├── tsconfig.json
└── vite.config.ts

License

MIT