# Basic example

The smallest viewer, with visible pages and selectable text.

Source: https://anara.com/lector/docs/code/basic

These docs describe the source deployed with this site, tracking main rather than a versioned npm release. Check your installed @anaralabs/lector and pdfjs-dist versions before applying examples.

This viewer renders a PDF with a canvas and a text layer. Complete [installation](https://anara.com/lector/docs/installation), create `pdf-setup.ts`, and put a PDF at `public/sample.pdf` before using the code.

```tsx title="basic-viewer.tsx"
"use client";

import { CanvasLayer, Page, Pages, Root, TextLayer } from "@anaralabs/lector";
import "./pdf-setup";

export default function BasicViewer() {
  return (
    <Root
      source="/sample.pdf"
      style={{ height: 600, overflow: "hidden" }}
      loader={<p role="status">Loading PDF…</p>}
    >
      <Pages>
        <Page>
          <CanvasLayer />
          <TextLayer />
        </Page>
      </Pages>
    </Root>
  );
}
```

The fixed height gives `Pages` a scrollable viewport. Remove `TextLayer` if you only need the page image. To follow your app theme, pass `colorScheme="dark"` or `"light"` to `Root`; the live example below follows the docs theme.

Continue with [a toolbar](https://anara.com/lector/docs/basic-usage), [error handling](https://anara.com/lector/docs/document-loading#show-errors-and-retry), or [links and form widgets](https://anara.com/lector/docs/code/links).

## Live example

Open the documentation page linked above to use this interactive example.