Getting Started with ReportLayer

It's easy to get started building and deploying reports with ReportLayer. You can start by deploying templates from the Playground, or from your private ReportLayer account.

Using the Playground

The Playground is a good place to start to get a feel for what's possible with ReportLayer. It has the same features for developing reports as ReportLayer, and allows unlimited public templates.

Try opening the Packing Slip Demo in the Playground. This report shows some basic features like images, barcodes, data sections, totals, and text formatting.

We'll start by deploying this template.

Installing the JavaScript SDK

To generate PDFs in your application, you'll need to add the ReportLayer JavaScript SDK. Use the following command from your application's root directory:

yarn add reportlayer

For more information, see Installing the SDK.

Rendering a report in your application

For a quick demo of report rendering, try the following steps. If you're using React, there are some built-in components that might make things even easier.

Import the module in your application code

import reportlayer from 'reportlayer';

Add a container element for the report to your application's UI

Add a container <div> element somewhere in your application that the report can be rendered into. Give this element the ID "report".

<div id="report" />

Add code to initialize ReportLayer and render the report

Somewhere in your application code, add the following code to render the template into the container:

reportlayer.init('playground');

reportlayer.render('#report', 'demo:packingSlip');

See Rendering reports for more.

If you make changes to a template in the Playground, you can deploy your new version by copying the new template ID out of the URL bar in your browser and using that in place of the default demo:packingSlip shown in the code above. See Deploying from the Playground.