Pagination-aware PDF engine

The Future of
Document Generation

Automate catalogs, brochures, and reports at scale. A declarative DSL and layout engine that generates print-ready PDFs — in real time.

Try the Editor See it in action

Your team shouldn't be the bottleneck

Designers manually updating InDesign files. Developers stitching HTML into PDFs. There's a better way.

Manual design tools

Hours spent on InDesign for every seasonal update. Can't connect to your data. Doesn't scale.

Puppeteer / wkhtmltopdf

HTML hacked into PDFs. No real pagination, no print marks, no bleed. Not built for professional printing.

React-PDF / LaTeX

Either limited by the CSS box model, or requires arcane syntax. Neither offers real-time preview with live data.

Built for production documents

Everything you need to automate professional document workflows.

Pagination-Aware Engine

Content flows intelligently across pages. Tables, text, grids — everything splits cleanly. No more manual page breaks.

Declarative DSL

A clean, CSS-inspired syntax anyone can learn. Designers edit templates directly — no developer bottleneck.

Real-Time Preview

See every change instantly, even on 100-page catalogs. Review and iterate in minutes, not hours.

Print-Ready Output

Bleed, crop marks, CMYK & ICC profiles. Send directly to the press — no post-processing needed.

Data-Driven Templates

Connect your database, CMS, or API. One template generates thousands of personalized documents automatically.

Component System

Build a design system for your documents. Reusable components ensure brand consistency at scale.

Write DSL, get PDFs

Edit the code below and watch the preview update in real time.

@document A4 { padding: [0, 35]; backgroundColor: #f8f9fc }

@font "Geist" google 400 500 700
@font "Faculty Glyphic" google 400

@typography { fontFamily: "Geist"; fontSize: 10; color: #2d3748; lineHeight: 1.5 }

@header
horizontal{ justify: space-between; align: center; padding: [30, 35]; width: 100% }(
  horizontal{ gap: 6; align: center }(
    vertical{ bg: "#222222"; borderRadius: 4; padding: 3 }(
      image{ height: 20 }("https://frameandflow.app/logo.svg")
    )
    text{ fontFamily: "Faculty Glyphic"; fontSize: 11; color: #222222 }(
      "Frame&Flow"
    )
  )
)

@footer
horizontal{ justify: "space-between"; width: 100%; padding: [30, 35]; fontSize: 10 }(
  text("Generated with **Frame&Flow** — [frameandflow.app](frameandflow.app)")
  text{ color: #a0aec0 }("{{page}} / {{totalPages}}")
)

@main
vertical{ gap: 24; color: #222222 }(
  // Hero
  vertical{ gap: 8 }(
    text{ fontFamily: "Faculty Glyphic"; fontSize: 28 }(
      "{{title}}"
    )
    rectangle{ height: 2; width: 50; bg: #AAAAAA }()
    text{ fontSize: 11 }(
      "{{subtitle}}"
    )
  )

// Intro
  vertical{ bg: #ffffff; padding: 16; borderRadius: 6; border: [1, #aaaaaa] }(
    text{ textAlign: left }(
      "{{intro}}"
    )
  )

// Features grid
  vertical{ gap: 6 }(
    text{ fontFamily: "Faculty Glyphic"; fontSize: 14; color: #444444 }(
      "Key Features"
    )
    grid{ columns: 2; verticalGap: 10; horizontalGap: 10 }(
      @iterate on {{features}} as feat (
        vertical{ bg: #ffffff; padding: 14; borderRadius: 6; width: 100% }(
          vertical{ gap: 4 }(
            text{ fontWeight: 700; fontSize: 11; color: #444444 }(
              "{{feat.name}}"
            )
            text{ fontSize: 9; color: #718096 }(
              "{{feat.desc}}"
            )
          )
        )
      )
    )
  )

vertical{ width: 100%; align: center; link: "https://www.frameandflow.app/" }(

vertical{ bg: #3976bc; padding: [10, 20]; borderRadius: 6 }(
      vertical{ align: center }(
        text{ fontFamily: "Faculty Glyphic"; fontSize: 14; color: #ffffff }(
          "Start automating your documents"
        )
        text{ fontSize: 9; color: #c5cae9 }(
          "Free trial — no credit card required"
        )
      )
    )
  )
)

@document A4 { padding: [0, 35]; backgroundColor: #f8f9fc } @font "Geist" google 400 500 700 @font "Faculty Glyphic" google 400 @typography { fontFamily: "Geist"; fontSize: 10; color: #2d3748; lineHeight: 1.5 } @header horizontal{ justify: space-between; align: center; padding: [30, 35]; width: 100% }( horizontal{ gap: 6; align: center }( vertical{ bg: "#222222"; borderRadius: 4; padding: 3 }( image{ height: 20 }("https://frameandflow.app/logo.svg") ) text{ fontFamily: "Faculty Glyphic"; fontSize: 11; color: #222222 }( "Frame&Flow" ) ) ) @footer horizontal{ justify: "space-between"; width: 100%; padding: [30, 35]; fontSize: 10 }( text("Generated with **Frame&Flow** — [frameandflow.app](frameandflow.app)") text{ color: #a0aec0 }("{{page}} / {{totalPages}}") ) @main vertical{ gap: 24; color: #222222 }( // Hero vertical{ gap: 8 }( text{ fontFamily: "Faculty Glyphic"; fontSize: 28 }( "{{title}}" ) rectangle{ height: 2; width: 50; bg: #AAAAAA }() text{ fontSize: 11 }( "{{subtitle}}" ) ) // Intro vertical{ bg: #ffffff; padding: 16; borderRadius: 6; border: [1, #aaaaaa] }( text{ textAlign: left }( "{{intro}}" ) ) // Features grid vertical{ gap: 6 }( text{ fontFamily: "Faculty Glyphic"; fontSize: 14; color: #444444 }( "Key Features" ) grid{ columns: 2; verticalGap: 10; horizontalGap: 10 }( @iterate on {{features}} as feat ( vertical{ bg: #ffffff; padding: 14; borderRadius: 6; width: 100% }( vertical{ gap: 4 }( text{ fontWeight: 700; fontSize: 11; color: #444444 }( "{{feat.name}}" ) text{ fontSize: 9; color: #718096 }( "{{feat.desc}}" ) ) ) ) ) ) vertical{ width: 100%; align: center; link: "https://www.frameandflow.app/" }( vertical{ bg: #3976bc; padding: [10, 20]; borderRadius: 6 }( vertical{ align: center }( text{ fontFamily: "Faculty Glyphic"; fontSize: 14; color: #ffffff }( "Start automating your documents" ) text{ fontSize: 9; color: #c5cae9 }( "Free trial — no credit card required" ) ) ) ) )

Preview

Loading engine...

Loading editor...

Three steps to production

Write

Define your template in DSL. Layouts, typography, components — all in a single file.

Bind Data

Connect your JSON data. Variables, loops, conditions — one template, infinite documents.

Generate

Print-ready PDF in one API call. Compose multiple templates, add bleeds, ship to press.

Under the hood

Built for developers who care about the details.

Fractional sizing (1fr, 2fr)

Multi-column journal layout

Tables with header repetition

SVG as vector shapes

calc() expressions

Transform (rotate, scale)

Page variables ({{page}}, {{totalPages}})

Multi-template composition

Enriched error stack traces

Stop designing PDFs manually.

Automate your document pipeline. Free to try, no credit card required.

Get Started