convex-mini

Convex Mini

A lightweight, developer-friendly dashboard for monitoring and managing your Convex application during development.

Features

• 🔍 Real-time data monitoring
• 📊 Development environment dashboard
• 🚀 Easy integration with Next.js and React applications
• ⚡ Zero-config setup

Installation

npm install convex-mini
# or
yarn add convex-mini
# or
pnpm add convex-mini

Quick Start

• Wrap your application with the ConvexMiniProvider:

import { ConvexMiniProvider } from 'convex-mini';
import { ConvexProvider } from 'convex/react';

function App() {
  return (
    <ConvexProvider client={convex}>
      <ConvexMiniProvider>
        <YourApp />
      </ConvexMiniProvider>
    </ConvexProvider>
  );
}

• The dashboard will automatically appear in development mode. You can access it by pressing Cmd/Ctrl + Shift + D or by adding the ?debug=true query parameter to your URL.

Configuration

The ConvexMiniProvider accepts the following props:

interface ConvexMiniProviderProps {
  // Whether to enable the dashboard (defaults to process.env.NODE_ENV === 'development')
  enabled?: boolean;
  // Custom keyboard shortcut to toggle the dashboard
  shortcut?: string;
  // Initial position of the dashboard ('left' | 'right' | 'bottom')
  position?: string;
}

Development Mode Only

Convex Mini is designed to work exclusively in development mode. It will automatically disable itself in production builds to ensure zero impact on your production application.

Contributing

We welcome contributions! Please feel free to submit a Pull Request.

License

MIT © [Robert Alvarez]