npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

ccanywhere

v0.1.17

Published

Claude Code Anywhere - A TypeScript CI/CD tool for mobile-friendly development workflows

Downloads

13

Readme

CCanywhere

npm version License: MIT

English | 简体中文

Mobile-friendly CI/CD tool for viewing code diffs when developing via SSH with Claude Code. Automatically captures changes, generates HTML diffs, uploads to cloud storage, and sends notifications.

🎯 Why CCanywhere?

Problem: Can't view code diffs on mobile devices when using Claude Code via SSH.

Solution: Auto-capture changes → Generate mobile HTML diffs → Upload to cloud → Send notification links.

✨ Features

  • 📱 Mobile-optimized diff viewing
  • 🔗 Claude Code hook integration
  • ☁️ Cloud storage (R2, S3, OSS)
  • 📬 Multi-channel notifications (Telegram, DingTalk, WeChat Work, Email)
  • 🧪 Playwright testing support
  • 🚀 Deployment webhooks

🚀 Quick Start

Install

# Global install (recommended)
npm install -g ccanywhere
ccanywhere init

# Or project-specific
npm install -D ccanywhere

Configure

Create ccanywhere.config.json:

{
  "artifacts": {
    "baseUrl": "https://artifacts.example.com",
    "storage": {
      "provider": "r2",
      "r2": {
        "accountId": "YOUR_ACCOUNT_ID",
        "accessKeyId": "YOUR_ACCESS_KEY",
        "secretAccessKey": "YOUR_SECRET_KEY",
        "bucket": "my-bucket"
      }
    }
  },
  "notifications": {
    "channels": ["telegram"],
    "telegram": {
      "botToken": "YOUR_BOT_TOKEN",
      "chatId": "YOUR_CHAT_ID"
    }
  }
}

Test & Run

# Test configuration
ccanywhere test --all

# Run pipeline
ccanywhere run

📖 Commands

ccanywhere init          # Initialize configuration
ccanywhere run           # Run build pipeline
ccanywhere test          # Test configuration
ccanywhere register      # Manage Claude Code hooks
ccanywhere cleanup       # Clean old artifacts
ccanywhere info          # Show configuration info

Test Options

ccanywhere test --all              # Test everything
ccanywhere test --notifications    # Test notifications only
ccanywhere test --deployment       # Test deployment only
ccanywhere test --notifications --send --title "Test" --message "Hello"

Claude Code Integration

ccanywhere register         # Register Stop hook
ccanywhere register --status  # Check hook status
ccanywhere register --remove  # Remove hooks

⚙️ Configuration

Configuration Hierarchy

  1. Environment variables (highest priority)
  2. Project config (ccanywhere.config.json)
  3. User config (~/.claude/ccanywhere.config.json)
  4. Defaults

User Configuration

Store common settings in ~/.claude/ccanywhere.config.json:

{
  "notifications": {
    "channels": ["telegram"],
    "telegram": {
      "botToken": "YOUR_BOT_TOKEN",
      "chatId": "YOUR_CHAT_ID"
    }
  }
}

Environment Variables

Set system environment variables to override configuration:

# Storage
export STORAGE_PROVIDER=r2
export R2_ACCOUNT_ID=your-account-id
export R2_ACCESS_KEY_ID=your-key
export R2_SECRET_ACCESS_KEY=your-secret
export R2_BUCKET=my-bucket

# Notifications
export BOT_TOKEN_TELEGRAM=your-token
export CHAT_ID_TELEGRAM=your-chat-id

# Optional
export DEPLOYMENT_WEBHOOK_URL=https://deploy.example.com/webhook

📬 Notifications

Telegram

  1. Create bot via @BotFather
  2. Get bot token
  3. Add bot to chat and get chat ID

Email

{
  "email": {
    "to": "[email protected]",
    "smtp": {
      "host": "smtp.gmail.com",
      "port": 587,
      "user": "[email protected]",
      "pass": "your-app-password"
    }
  }
}

DingTalk / WeChat Work

{
  "dingtalk": "https://oapi.dingtalk.com/robot/send?access_token=TOKEN",
  "wecom": "https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=KEY"
}

🧪 Playwright Testing

# Install Playwright
npm install -D @playwright/test
npx playwright install

# Configure in ccanywhere.config.json
{
  "test": {
    "enabled": true,
    "configFile": "./playwright.config.ts"
  }
}

📁 Storage Structure

Files are organized as: {folder}/{project-name}/{filename}

  • GitHub repo: https://github.com/owner/repo
  • Storage path: diffs/owner/repo/diff-123.html

🚀 Deployment

{
  "deployment": "https://deploy.example.com/webhook"
}

Webhook receives:

  • ref: Git commit hash
  • branch: Current branch
  • trigger: "ccanywhere"
  • timestamp: Unix timestamp

🔧 Development

# Setup
git clone https://github.com/mylukin/ccanywhere.git
cd ccanywhere
npm install

# Development
npm run dev

# Test
npm test

# Build
npm run build

# Lint & Format
npm run lint
npm run format

📝 License

MIT

🆘 Support


Made with ❤️ for developers who code anywhere 📱💻🌍