Crispy Print: A New Typst Based Print Format Engine

Announcing Crispy Print for Frappe — 0.1.0-alpha.2 Release

Hi everyone,

I’m sharing an update on Crispy Print, a Typst-based print/report formatting app for Frappe.

It is currently at 0.1.0-alpha.2.

What is Crispy Print?

Crispy Print adds a modern print pipeline to Frappe using Typst for high-quality PDF output, with a Vue-based visual builder and preview workflow for both DocType formats and Query Report formats. Regardless of platform, the output is always a crisp PDF with embedded SVGs and consistent formatting.

Current Stage

This is still an alpha release.

  • Report formats are currently fragile in some cases.

  • Report template parity is still evolving and being refined from real usage.

  • Expect iterative changes as feedback comes in.

  • Still thinking through the best UX for the builder and preview flows. Simplified logic is the goal, but we also want to support the flexibility that Typst enables.

If you test it and hit issues, please share details/screenshots/sample report names. That feedback is directly driving improvements.

Key Features (alpha-2)

  • Supports crisp SVG embedding for Letteread and logos

  • Visual builder for custom print formats

  • Typst-powered PDF rendering

  • Dedicated preview flow for reports and print formats

  • Raw Typst editing for advanced users

  • Query Report support with parity-focused templates

  • Filters / summary / chart / totals toggles in report preview

  • Typst code preview and save-back workflow

  • Letterhead and page settings integration

  • Improved API typing and stricter frontend type checks

  • Expanded test coverage and test script consistency

Requirements

  • Frappe/ERPNext bench (Frappe v15)

  • Python 3.11

  • Node.js 25 (for asset build/dev)

  • Typst CLI (required)

Install Typst

macOS


brew install typst

Linux

Use the official installation instructions for your OS/architecture: Typst Installation

Install Crispy Print

From bench root:


# Recommended (stable for this release)*

bench get-app https://github.com/agatho-daemon/crispy_print --branch v0.1.0-alpha.2

bench --site <your-site> install-app crispy_print

bench --site <your-site> migrate

bench build --app crispy_print

bench restart

If you explicitly want the latest work-in-progress changes (not stable), use:


bench get-app https://github.com/agatho-daemon/crispy_print --branch develop

Optional check:


bench --site <your-site> execute crispy_print.get_typst_local_fonts

Important Note

The repository* README is not fully up to date yet for the current alpha-2 behavior and latest refinements.
We are updating docs incrementally as the feature set stabilizes.*

Screenshots

UX reflects that of Frappe Print Builder with tweaks.

Four Columns page from left to right:

  1. Form’s fields
  2. Basic mode builder
  3. Preview
  4. Typst/Page settings

Typst code support

Print Preview Page with Settings (WIP)

Typst Code Modal (“View code button”)

Looking for Feedback On

  • Report parity issues (HTML/Jinja vs Typst output differences)

  • Large-report behavior and formatting edge cases

  • Builder UX rough edges

  • Missing report-specific formatting behaviors

6 Likes

Hi @Ismail_Tabtabai

Looks Interesting. Would you like to fill out this form on community marketplace to gain wider coverage: -

1 Like

Thanks. Done.

Installation and Demo of Crispy Print.

Installation

After installing Typst. You can proceed installing Crispy Print by getting then installing for the site.

Crispy Print Live Demo

  • Access Crispy Print List from Awesom bar
  • Creating a new Crispy Print Format (One format of a DocType must be set as default)
  • Editing the format in basic (drag/drop) mode.
  • Live Crispy preview (hopefully without glitches) of format.
  • You can view/copy the generated Typst code.
  • You can manipulate the settings of:
    • Page size
    • Page Orientation
    • Page Margins
    • Section, labels and values typography related settings.
    • Tables spacing, header and footer typography.
    • Branding includes Letterhead and logo settings.
    • QRCode settings

Form Print Preview

The preview page to display/download the PDF as Crispy as seen on your screen.