# viewer component
The <viewer>component is used to render PDF. It is required in the layout template. Below is a basic layout template example:
<webpdf>
<viewer></viewer>
</webpdf>
Runnable example:
By default, the PDFUI container has no size limit. In order to display the scroller, you should set the height for PDFUI based on your real viewer size.
To achieve drag, zoom and scroll on a rendered PDF page, you should reference directives in your <viewer> component.
Usage snippet:
<viewer @zoom-on-pinch @zoom-on-doubletap @zoom-on-wheel @touch-to-scroll></viewer>
Directives:
| Directive | Function |
|---|---|
@zoom-on-pinch | Pinch to zoom |
@zoom-on-doubletap | Double click to zoom |
@zoom-on-wheel | Ctrl + mouse wheel to zoom |
@touch-to-scroll | Drag to scroll |