SDKs

Format ships first-party SDKs for React and Vue, plus a direct HTML form. All three produce the same document model and render to the same output.

We recommend the SDKs for ergonomics: terser syntax, type-safe props, and the framework's tooling. HTML is fully supported and feature-equivalent; it's just more verbose to write by hand, since every type becomes a <template> element with data-* attributes.

Authoring options

Choosing an SDK

Pick the SDK that matches your existing stack. React and Vue are feature-equivalent: every document model type has a component in each, and every prop maps to the same underlying attribute. Documents can't be shared as components between SDKs, but the model they produce is identical.

If you're not using React or Vue, write HTML directly. The full schema lives in the HTML reference.

Example

The same minimal document in all three forms:

<Document title="Invoice #1234">
  <Layout id="invoice" width={793.71} height={1122.52}>
    <Flow>
      <p>Hello, world.</p>
    </Flow>
  </Layout>
</Document>

<Document title="Invoice #1234">
  <Layout id="invoice" :width="793.71" :height="1122.52">
    <Flow>
      <p>Hello, world.</p>
    </Flow>
  </Layout>
</Document>

<template data-type="document" data-title="Invoice #1234">
  <template data-type="layout" data-id="invoice" data-width="793.71px" data-height="1122.52px">
    <template data-type="flow">
      <p>Hello, world.</p>
    </template>
  </template>
</template>

Related

• Document model
• HTML reference
• Build your first PDF