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`

📑 Peer dependencies

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.

<cr-actions> — custom action buttons

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>

<cr-custom-tabs> — extra tabs alongside AI / Plagiarism

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>

<cr-custom-results> — augment or replace the results list

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>

<cr-custom-empty-results> — branded empty state

<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>

[lockedResultTemplateRef] — customize locked results

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

Built with ❤️ by the Copyleaks team.

Name		Name	Last commit message	Last commit date
Latest commit History 1,147 Commits
images		images
projects/copyleaks-web-report		projects/copyleaks-web-report
scripts		scripts
.editorconfig		.editorconfig
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
LICENSE		LICENSE
README.md		README.md
angular.json		angular.json
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

Copyleaks Web Report for Angular

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

✨ Why Copyleaks Web Report?

🚀 Quick Start

1. Install

2. Import the module

3. Render the component

🌟 Features

📊 What's in the Report?

🔍 Plagiarism Detection

🤖 AI Content Detection

✍️ Writing Feedback & Assessment

📑 Content Viewer

⚡ Real-Time & Performance

🚨 Alerts & Errors

🎛 Custom Slots

📱 Layouts & Responsiveness

🅰️ Angular Version Support

📚 API Reference

Inputs

Outputs

Query parameters the component reads & writes

🔧 Configuring Endpoints

IClsReportEndpointConfigModel

IEndpointDetails

Full example

🛎 Event Handling

🎨 Customization

⚡ Real-Time Results

♿ Accessibility

💬 Resources & Support

📄 License

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 4

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

`IClsReportEndpointConfigModel`

`IEndpointDetails`

Packages