Copyleaks Web Report for Angular

The drop-in plagiarism & AI-detection report your users will love.

Quick Start · What's Inside · API · Customization · Real-Time · Docs ↗ · Help Center ↗

✨ Why Copyleaks Web Report?

Stop building a plagiarism/AI report UI from scratch. @copyleaks/ng-web-report is a battle-tested Angular module that drops into your app and renders a complete, polished, accessible report — backed by the same engine that powers copyleaks.com.

Wire up three endpoints. Drop in one component. Ship.

<copyleaks-web-report [reportEndpointConfig]="endpointConfig"></copyleaks-web-report>

That's it. Everything below is for when you want to go further.

🚀 Quick Start

1. Install

npm install @copyleaks/ng-web-report --save

📦 Pick the right version for your Angular: Angular 19 → ^2.0.0 · Angular 13 → ^1.9.99 · full version matrix ↓

🔑 Don't have API keys yet? Grab them from the Copyleaks API docs.

2. Import the module

import { CopyleaksWebReportModule } from '@copyleaks/ng-web-report';

@NgModule({
	imports: [CopyleaksWebReportModule /* …your other imports */],
})
export class AppModule {}

3. Render the component

<copyleaks-web-report
	[reportEndpointConfig]="endpointConfig"
	(onReportRequestError)="handleError($event)"
	(onCompleteResultUpdate)="handleUpdate($event)">
</copyleaks-web-report>

endpointConfig: IClsReportEndpointConfigModel = {
	crawledVersion:  { url: 'https://api.yoursite.com/scans/{SCAN_ID}/crawled-version', headers: { Authorization: 'Bearer …' } },
	completeResults: { url: 'https://api.yoursite.com/scans/{SCAN_ID}/results',         headers: { Authorization: 'Bearer …' } },
	result:          { url: 'https://api.yoursite.com/scans/{SCAN_ID}/results/{RESULT_ID}', headers: { Authorization: 'Bearer …' } },
};

Done. You now have a full plagiarism + AI report in your app.

🌟 Features

| | Feature | What you get | |---|---|---| | 🎨 | Flexible Layouts | One-to-One, One-to-Many, AI-only, and Writing-Feedback — desktop & mobile variants ship out of the box. | | 📱 | Fully Responsive | Adapts cleanly across desktop, tablet, and mobile breakpoints. | | 🔌 | Pluggable Endpoints | Bring your own API — just point the component at three URLs. | | 🧩 | Deep Customization | Inject your own actions, tabs, results, empty states, and locked-result templates. | | ⚡ | Real-Time Streaming | Push new results into the view as they arrive — perfect for incremental scans. | | ♿ | Accessibility-First | Designed against WCAG and audited via VPAT. | | 🛡 | Robust Error Handling | Every failed request is surfaced through a single typed event. | | 🌍 | i18n Ready | Works in any locale via @angular/localize. |

📊 What's in the Report?

A complete, production-ready report UI — every piece below is rendered for you out of the box.

🔍 Plagiarism Detection

• One-to-Many view — source document side-by-side with a ranked list of matching results from across the web, your repository, and internal databases.
• One-to-One comparison — full side-by-side compare against a single suspect document with synchronized scrolling and match navigation.
• Match highlighting — color-coded identical / minor-changes / related-meaning matches, in both text and HTML views.
• Per-result drill-down — click any match to jump straight to the matching passage in the suspect, with character-level precision.
• Result filtering — filter by category, exclude self-matches, omit quotes/citations, and more.
• Locked & premium results — built-in support for paywalled / restricted matches with a fully customizable template.

🤖 AI Content Detection

• AI phrases highlighting — every AI-detected sentence is highlighted inline with a confidence indicator.
• AI Logic banner — explains why a passage was flagged (the "explainable AI" video / rationale).
• AI source matches — when an AI-generated passage matches a known source, it's surfaced as a dedicated match entry.
• AI-only layout — when plagiarism is disabled, the report cleanly renders an AI-focused view.
• AI disclaimer — built-in disclaimer block to set the right expectations with end users.

✍️ Writing Feedback & Assessment

• Corrections — grammar, spelling, and style corrections rendered inline with one-click accept/reject actions.
• Readability score — surfaces readability metrics alongside the content.
• Categories analysis panel — breakdown by category (grammar, spelling, mechanics, etc.) for assessment workflows.
• Assessment Tool score panel — dedicated scoring view for the Assessment Tool report mode.

📑 Content Viewer

• Text & HTML modes — switch between plain-text and rendered HTML, with the report intelligently disabling modes that aren't available.
• Pagination — page-level navigation for long documents (URL-preserved via sourcePage / suspectPage query params).
• RTL support — automatic right-to-left layout for Arabic, Hebrew, and other RTL languages.

⚡ Real-Time & Performance

• Real-time results streaming — push new matches into the live view via ReportRealtimeResultsService.pushNewResults().
• Section animations — newly arriving real-time results are gracefully animated into the list.
• Skeleton loaders — every async section has a polished loading state — no layout shift, no janky spinners.

🚨 Alerts & Errors

• Built-in alerts container — surfaces suspicious content, sensitive-data, and policy alerts with deep-linkable alertCodes.
• Typed error events — every failed API call comes back through a single onReportRequestError event with the request context attached.

🎛 Custom Slots

• <cr-actions> — your own action bar (download, share, custom workflows).
• <cr-custom-tabs> — extra tabs alongside the AI/Plagiarism tabs.
• <cr-custom-results> — append to or fully replace the results list.
• <cr-custom-empty-results> — branded empty state.
• [lockedResultTemplateRef] — fully custom locked-result template (great for upgrade prompts).

📱 Layouts & Responsiveness

• Desktop, tablet, and mobile variants for every layout — including a dedicated mobile AI-phrases header.
• Four layout types: OneToMany, OneToOne, OnlyAi, WritingFeedback.

💡 Want a deeper walkthrough of what each section means? See the Copyleaks Help Center.

🅰️ Angular Version Support

| Angular | Library | Install | | ------- | ------- | ------- | | 19 | 2.x.x (current) | npm install @copyleaks/ng-web-report@^2.0.0 --save | | 13 | 1.x.x (maintenance) | npm install @copyleaks/ng-web-report@^1.9.99 --save |

Angular 19 (v2.x)

| Package | Version | | ---------------------------- | -------- | | @angular/common | ^19.2.14 | | @angular/core | ^19.2.14 | | @angular/localize | ^19.2.14 | | @angular/material | ^19.2.19 | | ngx-flexible-layout | ^19.0.0 | | ngx-skeleton-loader | ^6.0.0 | | @swimlane/ngx-charts | ^22.0.0 | | scroll-into-view-if-needed | ^2.2.28 |

Angular 13 (v1.x)

| Package | Version | | ---------------------------- | --------------- | | @angular/common | ^13.1.1 | | @angular/core | ^13.1.1 | | @angular/localize | ^13.1.1 | | @angular/material | ^13.1.1 | | @angular/flex-layout | ^13.0.0-beta.36 | | ngx-skeleton-loader | ^5.0.0 | | scroll-into-view-if-needed | ^2.2.28 |

📚 API Reference

Inputs

| Input | Type | Required | Description | | ----- | ---- | :------: | ----------- | | reportEndpointConfig | IClsReportEndpointConfigModel | ✅ | Endpoints + headers for fetching report data. | | showDisabledProducts | boolean | — | Show products that are disabled for the scan. Default false. | | lockedResultTemplateRef | TemplateRef<any> | — | Custom template for locked results. Falls back to the default view if omitted. |

Outputs

| Output | Payload | When it fires | | ------ | ------- | ------------- | | onReportRequestError | ReportHttpRequestErrorModel | Any HTTP request the component made failed. | | onCompleteResultUpdate | ICompleteResults | Complete results were fetched, or the filter options changed. |

Query parameters the component reads & writes

The report keeps its state in the URL so deep links Just Work™.

| Param | Type | Purpose | | ----- | ---- | ------- | | contentMode | 'text' \| 'html' | Switches content view (if that mode is available). | | sourcePage / suspectPage | number | Page number in text-view pagination (1-indexed). | | suspectId | string | The selected matching result. | | alertCode | string | The currently open alert. | | viewMode, selectedCustomTabId, selectedResultsCategory, showAIPhrases | various | Preserve UI state across reloads. |

🔧 Configuring Endpoints

📘 For the full request/response shape of each endpoint, see the Copyleaks API documentation.

IClsReportEndpointConfigModel

| Field | Description | | ----- | ----------- | | crawledVersion | Endpoint for the crawled version of the scanned content. | | completeResults | Endpoint for the full scan results. | | result | Per-result endpoint. Must include the {RESULT_ID} placeholder. | | progress (optional) | Enables the real-time view. See Real-Time Results ↓. |

IEndpointDetails

| Field | Type | | | ----- | ---- | -- | | url | string | The API endpoint URL. | | headers | Record<string, string> | Headers sent on every request. |

Full example

import { IClsReportEndpointConfigModel } from '@copyleaks/ng-web-report';

const headers = {
	Authorization: 'Bearer your-auth-token',
	'Content-Type': 'application/json',
};

const reportEndpointConfig: IClsReportEndpointConfigModel = {
	crawledVersion:  { url: 'https://api.yourservice.com/crawled-version',     headers },
	completeResults: { url: 'https://api.yourservice.com/complete-results',    headers },
	result:          { url: 'https://api.yourservice.com/result/{RESULT_ID}',  headers },
};

🛎 Event Handling

import { ICompleteResults, ReportHttpRequestErrorModel } from '@copyleaks/ng-web-report';

handleError(error: ReportHttpRequestErrorModel): void {
	// Surface a toast, retry, log to Sentry, etc.
}

handleUpdate(results: ICompleteResults): void {
	// React to new complete results or filter changes.
}

🎨 Customization

The report ships with sensible defaults and first-class extension points so you can inject your own UI without forking the library.

Replace the default action bar with your own buttons, menus, or logic.

<copyleaks-web-report ...>
	<cr-actions>
		<button (click)="download()">Download PDF</button>
		<button (click)="share()">Share</button>
	</cr-actions>
</copyleaks-web-report>

Add as many custom tabs as you like. The [flexGrow] input controls the tab's width relative to the others (e.g. 0.3 means it claims 30% of the row).

<copyleaks-web-report ...>
	<cr-custom-tabs>
		<cr-custom-tab-item [flexGrow]="0.3">
			<cr-custom-tab-item-title>Insights</cr-custom-tab-item-title>
			<cr-custom-tab-item-content>
				<app-insights-panel></app-insights-panel>
			</cr-custom-tab-item-content>
		</cr-custom-tab-item>
	</cr-custom-tabs>
</copyleaks-web-report>

Use the [reportView] input to control whether your content appends to or replaces the standard results.

| Mode | Behavior | | ---- | -------- | | ECustomResultsReportView.Partial (0) | Renders beneath the default results. | | ECustomResultsReportView.Full (1) | Replaces the default results entirely. |

<copyleaks-web-report ...>
	<cr-custom-results [reportView]="reportView">
		<cr-custom-results-box-content>
			<app-my-results></app-my-results>
		</cr-custom-results-box-content>
	</cr-custom-results>
</copyleaks-web-report>

<copyleaks-web-report ...>
	<cr-custom-empty-results>
		<div class="empty">
			<h3>No matches found 🎉</h3>
			<p>This document looks original.</p>
		</div>
	</cr-custom-empty-results>
</copyleaks-web-report>

Useful for paywalls, upgrade prompts, or permission gates. Omit the input to use the default locked view.

<ng-template #lockedResultTemplateRef let-result="result">
	<app-upgrade-card [result]="result"></app-upgrade-card>
</ng-template>

<copyleaks-web-report
	...
	[lockedResultTemplateRef]="lockedResultTemplateRef">
</copyleaks-web-report>

⚡ Real-Time Results

For incremental scans, push new results into the live view as they arrive.

ℹ️ Prerequisite: the real-time view is only enabled when you include the progress endpoint in your reportEndpointConfig.

import { ReportRealtimeResultsService, ResultPreview } from '@copyleaks/ng-web-report';

@Component({ /* … */ })
export class YourComponent {
	constructor(private realtime: ReportRealtimeResultsService) {}

	onNewBatch(results: ResultPreview[]): void {
		this.realtime.pushNewResults(results);
	}
}

The component handles ordering, deduping, and rendering for you.

♿ Accessibility

Copyleaks Web Report is built with accessibility as a first-class concern — keyboard navigation, ARIA semantics, focus management, and high-contrast support are all baked in.

📄 Download the VPAT report (PDF) from the Copyleaks Commitment to Accessibility page.

💬 Resources & Support

| | Resource | Link | |---|----------|------| | 📘 | API Documentation — endpoints, auth, payload shapes | docs.copyleaks.com | | 🛟 | Help Center — how the report is interpreted, end-user guides, FAQs | help.copyleaks.com | | 🐛 | Bug reports & feature requests | GitHub Issues | | 📦 | npm package | @copyleaks/ng-web-report | | 🌐 | Copyleaks product site | copyleaks.com |

📄 License

MIT © Copyleaks

Built with ❤️ by the Copyleaks team.