Reportly

A simple JavaScript plugin that enables QA teams to report UI issues directly from any webpage with screenshots and annotations.

Features

• 🐛 Floating Action Button - Always accessible, non-intrusive
• 📸 Auto Screenshot - Captures the current page instantly
• ✏️ Annotation Tools - Draw, add arrows, and rectangles
• 📱 Device Context - Auto-captures browser, OS, and screen info
• 📥 JSON Export - Download complete issue reports locally

Quick Start

1. Install Dependencies

npm install @uxbertlabs/reportly

2. Build the Plugin

npm run build

This creates dist/reportly.js and dist/reportly.min.js

3. Try the Demo

Open demo.html in your browser to see it in action!

Installation

Method 1: React/TypeScript (Recommended)

npm install @uxbertlabs/reportly

Then in your React app:

import Reportly from '@uxbertlabs/reportly';

function App() {
  return (
    <div>
      {/* Your app content */}
      <Reportly
        config={{
          ui: {
            position: "bottom-right",
            theme: "light",
          },
        }}
      />
    </div>
  );
}

Important: The CSS is automatically imported when you import the component. If you need to import styles separately, use:

import '@uxbertlabs/reportly/styles';

Method 2: Script Tag (Vanilla JS)

<!-- Via CDN -->
<script src="https://cdn.jsdelivr.net/npm/@uxbertlabs/reportly/dist/reportly.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uxbertlabs/reportly/dist/index.css">

<script>
  // For vanilla JS, use window.Reportly if available
  Reportly.init({
    ui: {
      position: "bottom-right",
      theme: "light",
    },
  });
</script>

Configuration

Reportly.init({
  ui: {
    position: "bottom-right", // 'bottom-left', 'top-right', 'top-left'
    theme: "light", // or 'dark'
  },
  features: {
    annotation: true,
    deviceInfo: true,
  },
});

API Reference

// Open issue reporter manually
Reportly.open();

// Close issue reporter
Reportly.close();

// Update configuration
Reportly.updateConfig({ ui: { theme: "dark" } });

// Get saved issues
const issues = Reportly.getSavedIssues();

// Clear saved issues
Reportly.clearSavedIssues();

// Export all saved issues
Reportly.exportAllIssues();

// Listen to events
Reportly.on("issue:created", (issue) => {
  console.log("New issue:", issue);
});

// Destroy instance
Reportly.destroy();

Exported JSON Format

{
  "title": "Button alignment issue",
  "description": "The submit button is cut off on mobile",
  "priority": "High",
  "screenshot": "data:image/png;base64,...",
  "deviceInfo": {
    "browser": "Chrome 120.0",
    "os": "macOS",
    "screenResolution": "1920x1080",
    "viewport": "1440x900",
    "url": "https://example.com",
    "timestamp": "2025-10-12T10:30:00Z",
    "userAgent": "Mozilla/5.0..."
  },
  "createdAt": "2025-10-12T10:30:00Z"
}

Development

Project Structure

reportly/
├── src/
│   ├── core/           # Core functionality
│   ├── ui/             # UI components
│   ├── features/       # Features (screenshot, annotation, etc.)
│   └── utils/          # Utility functions
├── dist/               # Built files
├── demo.html           # Demo page
└── package.json

Build Commands

# Development mode (watch for changes)
npm run dev

# Production build
npm run build

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.