Report designer · Open source

Design your reports in the browser,
export straight to your favorite library.

Design invoice and delivery-note layouts in your browser, then export them as templates or code for the PDF library you already use. Layouts are an open JSON intermediate representation you can manage in Git — no lock-in to any single library.

01No account, runs entirely in your browser
02Layouts are diffable and Git-friendly
03Built-in checks for Japan's qualified invoice system

Try it in your browser

An invoice layout being edited in the denReport designer

Export

From design to working code

Export directly from the designer to the library you already use.

* Currently pdfme and ReportLab only

invoice.pyPython · ReportLab

import os
import sys

from reportlab.lib.units import mm
from reportlab.pdfbase import pdfmetrics
from reportlab.pdfbase.ttfonts import TTFont
from reportlab.pdfgen.canvas import Canvas

FONT_NAME = "NotoSansJP"
FONT_FILE = "NotoSansJP.ttf"
FONT_ASCENT_EM = 1.16
PAGE_WIDTH = 210 * mm
PAGE_HEIGHT = 297 * mm
PAGE_COUNT = 1
…

Principles

Design principles

P-01

Stop hand-coding coordinates

You no longer need to write report layouts as hard-coded coordinates. Design on a canvas, and get the result back as code.

P-02

An open intermediate representation

Layouts are version-controlled JSON, with a parser and validator included. You're never locked into denReport itself — track every change in Git.

P-03

Runs entirely in the browser

No server, no account. The designer, the intermediate representation, and the exporters all run in your browser — your report data never leaves your environment.

Everything you need

Key features

Everything listed here is already implemented and free to use.

Visual designer

Place text, shapes, images, barcodes/QR codes, and tables that split across multiple pages on an absolute-coordinate canvas. Row and column flex containers let you build repeating layouts too.

Japanese typography basics

The font used for export is embedded in the editor too, so character-width calculations match between design and output. Supports line-breaking rules (kinsoku) and justified spacing.

Qualified invoice compliance checks

Mark a document as a qualified invoice (Japan's invoice system for consumption tax) and a validation panel confirms the legally required fields are all present.

A verifiable document format

Layouts are version-controlled JSON, with a parser and schema validator included, so other programs outside denReport can work with them too.

pdfme / ReportLab export

Generate both a pdfme template with input data and standalone, font-bundled ReportLab Python code from the same IR.

Compatibility warnings

See a list of everything that will be approximated or unsupported on your chosen target before you export — know it at design time, not after opening the PDF.

Embed · self-host

Run it in your own environment

Keep everything inside your own app or internal environment — no hosted service required.

Embed in your product

@denreport/designer embeds into your app through a small Designer class.

app.tsTypeScript

import { Designer } from "@denreport/designer";
import "@denreport/designer/styles/tokens.css";
import "@denreport/designer/styles/app.css";

const designer = new Designer(
  document.getElementById("app")!
);

License: MIT. Every feature is free to use.

Run from source

Clone the repository and start a local dev server. Requires Node.js 24 or later and pnpm.

shellShell

git clone https://github.com/denreport/denreport.git
cd denreport
corepack enable
pnpm install
pnpm --filter @denreport/web dev

This starts the Vite dev server. Open the URL it prints.

The source is on GitHub

Clone it and you're up and running. Feedback and issues are welcome.

github.com/denreport/denreport

Design your reports in the browser,export straight to your favorite library.