# Form XObjects

## Content

Form XObjects are reusable self-contained pieces of PDF content that can be rendered multiple times within a PDF document. A FormXObject is stored once in the document and can be drawn on one or more pages using the [drawForm](/document-solutions/javascript-pdf-api/api/classes/PdfContext#drawform) method.
DsPdfJS allows you to create Form XObjects, generate their content using the context property, and render them with different sizes and positions.

## Create and Render Form XObjects

To create and render a Form XObject:

1. Create a [FormXObject](/document-solutions/javascript-pdf-api/api/classes/FormXObject) instance.
2. Generate content using the [context](/document-solutions/javascript-pdf-api/api/classes/FormXObject#context) property.
3. Render the FormXObject using the [drawForm](/document-solutions/javascript-pdf-api/api/classes/PdfContext#drawform) method.

The following example demonstrates how to create a FormXObject and render it multiple times with different bounds:

```javascript
// Form XObjects: create a FormXObject, build its content, draw it with drawForm().
// A FormXObject is a reusable self-contained piece of content: it is stored once
// in the PDF and can be drawn any number of times on any page.
const doc = new PdfDocument();
const page = doc.pages.addNew();
const font = Font.getPdfFont(StandardPdfFont.Helvetica);
// Create a FormXObject with explicit bounds:
const bounds = { x: 0, y: 0, width: 144, height: 72 };
const fxo = new FormXObject(doc, bounds);
// Generate the form's content through its context property
// (all drawing APIs available for page content work here as well):
const g = fxo.context;
g.drawRect(bounds, { fillBrush: new LinearGradientBrush({ startColor: "LightCyan", endColor: "Cyan" }) });
g.drawRect(bounds, { lineColor: "DarkCyan", lineWidth: 2 });
const tl = new Layout({
    maxWidth: bounds.width,
    maxHeight: bounds.height,
    textAlignment: TextAlignment.Center,
    paragraphAlignment: ParagraphAlignment.Center,
    defaultFormat: new Format({ font: font, fontSize: 16 })
});
tl.append("Form XObject");
tl.performLayout();
g.drawLayout(tl, 0, 0);
// Draw the same FormXObject instance three times with different bounds;
// the content is scaled to the destination rectangle:
const pg = page.context;
pg.drawText("The same FormXObject drawn three times with different bounds:", new Format({ font: font, fontSize: 12 }), 20, 20);
// original size
pg.drawForm(fxo, 20, 50, 144, 72);
// stretched horizontally
pg.drawForm(fxo, 200, 50, 288, 72);
// bounds overload; keepAspectRatio fits the content proportionally
pg.drawForm(fxo, { x: 20, y: 150, width: 288, height: 144 }, { keepAspectRatio: true });
const outputFile = path.join(__dirname, 'FormXObjects.pdf');
await writeFile(outputFile, doc.savePdf());
console.log(`Created ${outputFile}`);
```

![DsPdfJS example demonstrating creation of a FormXObject in a PDF document and rendering the same reusable graphic object multiple times with different bounds](https://cdn.mescius.io/document-site-files/images/f5820aa7-2bd1-4325-91b3-71d51a001343/FormXObjects-20260723.a81b14.png?width=720)