Reporto

Installation

npm install reporto

Get Started

Any calls to the Reporto API require a valid API key. You can obtain a key by signing up for a free account at reporto.dev.

import { createClient } from "reporto/client";

const client = createClient({
  key: "YOUR_REPORTO_KEY",
  version: "v1"
});

The client object can be used to create documents and screenshots. It's completely type-safe and will provide you with autocompletion and type checking in your editor.

Create Documents

createDocument creates a new PDF document with the specified pages and components.

type CreateDocumentInput = {
  pages: {
    components: Component[]
  }[]
}

type CreateDocumentOutput = {
  success: true,
  id: string,
  url: string,
} | {
  success: false,
  error: string,
}

Example:

const result = await client.createDocument({
  pages: [
    {
      components: [
        {
          type: "text",
          data:{
            value: "Hello, World!"
          }
        }
      ]
    }
  ]
});

Components

Text

The text component let you add text to your document.

type TextComponent = {
  type: "text",
  data: {
    value: string,
    size?: "small" | "medium" | "large",
    italic?: boolean,
    weight?: "normal" | "medium" | "bold",
  }
}

Text Group

The text group component let you use multiple text components in a single line.

type TextGroupComponent = { 
  type: "text-group",
  data: {
    value: string,
    size?: "small" | "medium" | "large",
    italic?: boolean,
    weight?: "normal" | "medium" | "bold",
  }[]
}

Image

The image component lets you add images to your document.

{
  type: "image",
  data: {
    url: string
  }
}

Line Chart

The line chart component lets you add line charts to your document. The data object should contain an array of series and an array of points. Each point should have a timestamp and a value for each series.

type LineChartComponent = {
  type: "line-chart",
  data: {
    series: {
      key: string,
      color?: string,
    }[],

    // Reporto requires that at least one key is named "timestamp". This is used for the x-axis.
    points: Record<string, number>,
    timestampFormat?: string,
  }
}

HTML

The HTML component lets you write HTML code directly in your document.

Note: The HTML in the output document will be sanitized.

type HtmlComponent = {
  type: "html",
  data: string,
}

Markdown

The Markdown component lets you write markdown code directly in your document. Similar to the HTML component, the markdown in the output document will be sanitized.

type MarkdownComponent = {
  type: "markdown",
  data: string,
}

Line

The line component inserts a horizontal line in the document. This can be useful to separate different sections.

type LineComponent = {
  type: "line",
}

Table

type TableComponent = {
  type: "table",
  data: {
    headers: string[],
    rows: (string | number)[][],
  }
}

Example:

{
  type: "table",
  data: {
    headers: ["Name", "Age"],
    rows: [  
      ["Alice", 25],
      ["Bob", 30]
    ]
  }
}

Create Screenshots

type CreateScreenshotInput = {
  pages: {
    components: Component[]
  }[]
}

type CreateScreenshotOutput = {
  success: true,
  id: string,
  url: string,
} | {
  success: false,
  error: string,
}

Example:

const { url } = await client.createScreenshot({
  url: "https://reporto.dev",
  element: "h1",
  viewport:{
    width: 1920,
    height: 1080
  }
})

type CreateScreenshotInput = {
  url: string,
  /**
   * Optional: The element to screenshot. If not provided, the entire page will be captured. Elements are selected using CSS selectors.
   */
  element?: string,
  viewport?: {
    width?: number,
    height?: number
  }
}

type CreateScreenshotOutput = {
  success: true,
  id: string,
  url: string,
} | {
  success: false,
  error: string,
}