> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/advanced/lower-level-document-apis.md).

# Loading and rendering documents without using WebViewer UI

Learn how to load and render documents without the WebViewer UI. Explore using the Document class for full control over document layout and non-viewing APIs. Render pages and extract text effortlessly

It's common to use the built in [WebViewer UI](https://github.com/ApryseSDK/webviewer-ui/) to view and interact with documents, however it's also possible to load documents and render pages without using the UI. By using the lower level [Document](https://sdk.apryse.com/api/web/Core.Document.html) class, you can load documents in memory and have full control over how the pages are laid out, or use non-viewing APIs like extracting text.

## Create documents

You can use the [`Core.createDocument`](https://sdk.apryse.com/api/web/Core.html#.createDocument__anchor) API to instantiate documents from different sources, for example URLs or blobs.

Below are some examples of creating commonly used documents:

[Create XOD document](/web/get-started/guides/lower-level-doc-create-xod.md) To create a XOD document.

[Create PDF document](/web/get-started/guides/lower-level-doc-create-pdf.md) To create a PDF document.

[Create an Office document](/web/get-started/guides/lower-level-doc-create-office.md) To create an Office document.

## Render pages

After the document has been created, use the [loadCanvas](https://sdk.apryse.com/api/web/Core.Document.html#loadCanvas__anchor) API to render a page on a canvas. You have full control of how the pages are rendered by passing different values to this API.

`_loadCanvasAsync_`\_ is deprecated since version 8.3 and removed since version 10.0. Please use *`_loadCanvas_`* instead.\_

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

```js
doc.loadCanvas({
  pageNumber: 1, // Render the first page
  zoom: 1, // 100% zoom level
  pageRotation: Core.PageRotation.e_0, // 0 degree rotation
  drawComplete: canvas => {
    // The canvas that contains the first page
    console.log(canvas);
  }
})
```

{% endcode %}
{% endtab %}

{% tab title="JavaScript (SDK v7.0+)" %}
{% code lineNumbers="true" %}

```js
doc.loadCanvasAsync({
  pageNumber: 1, // Render the first page
  zoom: 1, // 100% zoom level
  pageRotation: CoreControls.PageRotation.e_0, // 0 degree rotation
  drawComplete: canvas => {
    // The canvas that contains the first page
    console.log(canvas);
  }
})
```

{% endcode %}
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

```js
doc.loadCanvasAsync({
  pageIndex: 0, // Render the first page
  zoom: 1, // 100% zoom level
  pageRotation: CoreControls.PageRotation.e_0, // 0 degree rotation
  drawComplete: canvas => {
    // The canvas that contains the first page
    console.log(canvas);
  }
})
```

{% endcode %}
{% endtab %}
{% endtabs %}

## Render part of a page

If you want to render just part of a page, you can define the area you want to render [`as explained in the API docs`](https://sdk.apryse.com/api/web/Core.Document.html#renderrect) and pass it to the `renderRect` option:

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

```js
doc.loadCanvas({
  pageNumber: 1 // Render the first page
  renderRect: {x1:0, y1:0, x2:200, y2:200}, // The area to render
  drawComplete: canvas => {
    // The canvas of the cropped first page
    console.log(canvas);
  }
})
```

{% endcode %}
{% endtab %}

{% tab title="JavaScript (SDK v7.0+)" %}
{% code lineNumbers="true" %}

```js
doc.loadCanvasAsync({
  pageNumber: 1 // Render the first page
  renderRect: {x1:0, y1:0, x2:200, y2:200}, // The area to render
  drawComplete: canvas => {
    // The canvas of the cropped first page
    console.log(canvas);
  }
})
```

{% endcode %}
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

```js
doc.loadCanvasAsync({
  pageIndex: 0, // Render the first page
  renderRect: {x1:0, y1:0, x2:200, y2:200}, // The area to render
  drawComplete: canvas => {
    // The canvas of the cropped first page
    console.log(canvas);
  }
})
```

{% endcode %}
{% endtab %}
{% endtabs %}

## Load page text

[Text extraction](https://sdk.apryse.com/api/web/Core.Document.html#renderrect) To extract text in the document without rendering it using loadPageText API.

## More APIs

* [Document](https://sdk.apryse.com/api/web/Core.Document.html) - A full list of APIs
* [Page Manipulation Guide](/web/get-started/guides/page-manipulation.md) - A guide that uses [Document](https://sdk.apryse.com/api/web/Core.Document.html) APIs to manipulate pages
* [Flipbook Sample](/web/get-started/samples/flipbook.md) - A sample that uses [Document](https://sdk.apryse.com/api/web/Core.Document.html) APIs to render pages directly and uses [turn.js](http://www.turnjs.com/) to flip them


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/advanced/lower-level-document-apis.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.