Annotations build on the Pierre CI service to list out identified issues found in a branch and optionally attach markers to specific lines across the codebase.


Annotations allow you to attach markers to the top level of a branch, or to specific lines in files. This can be useful for flagging linter issues, type failures, todos, or even attaching build artifacts.

How it works

If a filename or line aren’t provided, annotations will only show in the Annotations sidebar. Otherwise, specifying a filename and line number will attach the annotation to that specific line in the file.

import { annotate } from "pierre";

export default async () => {
		icon: Icons.CIFailed,
		color: "red",
		filename: filepath,
		line: parseInt(lineNo),
		label: "Typescript failure",
		description: `${errorMessage} (${errorCode})`,
export interface Annotation {
	// Themeable color
	color?: Color;

	// visual icon
	icon?: Icons;

	// title for an annotation
	label?: string;

	// description of the annotaiton
	description?: string;

	// optional filename if attaching to a file
	filename?: string;

	//  optional line number if attaching to a file
	line?: number;

	// link to external asset
	href?: string;

Icon and colors come from the Pierre design system. While not open sourced, you can use any color or icon from the system by name. Head to the Pierre Styleguide to find a list of colors and see all available icons.

Pierre is the product engineering tool

Code hosting, review, docs, and CI. One place for product engineers and their teams to focus on what they do best—building products.

Join the Waitlist
Skip the line! Join our Discord for early access