# Toolbar not showing up

**URL:** <https://pdfjs.community/t/toolbar-not-showing-up/1677>\
**Category:** Technical Support\
**Created:** [May 13, 2022, 10:23pm UTC](https://pdfjs.community/t/toolbar-not-showing-up/1677 "2022-05-13T22:23:04Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![karin](https://avatars.discourse-cdn.com/v4/letter/k/c37758/32.png) [@karin](https://pdfjs.community/u/karin)\
**Post date:** [May 13, 2022, 10:23pm UTC](https://pdfjs.community/t/toolbar-not-showing-up/1677/1 "2022-05-13T22:23:04Z")

</div>

**Which product are you using?**  
Express plus (free version)  
**PDF.js Express Version**

**Detailed description of issue**  
Tools are not showing up on the pdf, after inspecting the elements it is by default set to “closed”

 ![Screen Shot 2022-05-13 at 4.22.15 PM](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/9ea87d2aaaf8d40c756835f071104e181df26881.png)

**Expected behaviour**  
PDF tools usable

**Does your issue happen with every document, or just one?**  
every document

**Link to document**  
{Provide a link to the document in question if possible}

**Code snippet**

```javascript
import { useRef, useEffect } from "react";
import WebViewer from "@pdftron/pdfjs-express";

const DocumentViewer = () => {
  const viewer = useRef(null);

  useEffect(() => {
    WebViewer(
      {
        path: process.env.PUBLIC_URL + "/pdfjsexpress",
        initialDoc: process.env.PUBLIC_URL + "/pdfjsexpress/demo.pdf"
      },
      viewer.current,
    ).then((instance) => {
    });
  }, []);

  return (
    <div className="">
        <div className="header">React sample</div>
        <div className="webviewer" ref={viewer}></div>
    </div>
  );
};

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [May 13, 2022, 10:23pm UTC](https://pdfjs.community/t/toolbar-not-showing-up/1677/3 "2022-05-13T22:23:09Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:
- [Understand coordinates in PDF.js Express - Convert between mouse locations and window coordinates](https://pdfjs.express/documentation/viewer/coordinates.8#convert-between-mouse-locations-and-window-coordinates)
- [PDF.js Express Documentation - Customizing the UI](https://pdfjs.express/documentation#customizing-the-ui)
- [Customize toolbar in viewer - Header items - ToolButton](https://pdfjs.express/documentation/ui-customization/customizing-header.8#toolbutton)

APIs:
- [Core.Annotations.CustomAnnotation - new CustomAnnotation(type [, initializer])](https://pdfjs.express/api/Core.Annotations.CustomAnnotation.html#CustomAnnotation__anchor)
- [Core.Annotations.FreeHandAnnotation - new FreeHandAnnotation( [initializer])](https://pdfjs.express/api/Core.Annotations.FreeHandAnnotation.html#FreeHandAnnotation__anchor)
- [Core.Annotations.ArcAnnotation - new ArcAnnotation( [initializer])](https://pdfjs.express/api/Core.Annotations.ArcAnnotation.html#ArcAnnotation__anchor)

Forums:
- [PDF not showing up and being replaced with Loading Modal](https://pdfjs.community/t/pdf-not-showing-up-and-being-replaced-with-loading-modal/1676/1)
- [Cannot lock pdf](https://pdfjs.community/t/cannot-lock-pdf/740/1)
- [Remove Page Tool not working](https://pdfjs.community/t/remove-page-tool-not-working/219/3)

---

<div class="post-metadata">

**Author:** ![dnavarro](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/dnavarro/32/707_2.png) [@dnavarro](https://pdfjs.community/u/dnavarro)\
**Post date:** [May 14, 2022, 1:18am UTC](https://pdfjs.community/t/toolbar-not-showing-up/1677/4 "2022-05-14T01:18:58Z")

</div>

Hi There,

Thanks for your question to enable the tools header you can use the `enableElements` API ([API document](https://pdfjs.express/api/UI.html#.enableElements__anchor)). Following is a code snippet for your reference.

```javascript
import { useRef, useEffect } from "react";
import WebViewer from "@pdftron/pdfjs-express";

const DocumentViewer = () => {
  const viewer = useRef(null);

  useEffect(() => {
    WebViewer(
      {
        path: process.env.PUBLIC_URL + "/pdfjsexpress",
        initialDoc: process.env.PUBLIC_URL + "/pdfjsexpress/demo.pdf"
      },
      viewer.current,
    ).then((instance) => {
        instance.UI.enableElements(['ribbons', 'toolsHeader']);
    });
  }, []);

  return (
    <div className="">
        <div className="header">React sample</div>
        <div className="webviewer" ref={viewer}></div>
    </div>
  );
};

```

Please let me know if this works for you.

Thanks,

Dandara

---

<div class="post-metadata">

**Author:** ![karin](https://avatars.discourse-cdn.com/v4/letter/k/c37758/32.png) [@karin](https://pdfjs.community/u/karin)\
**Post date:** [May 16, 2022, 8:56pm UTC](https://pdfjs.community/t/toolbar-not-showing-up/1677/5 "2022-05-16T20:56:45Z")

</div>

Hey Dandara,

Thanks so much for the prompt response! I am trying that out now.

I spun up the demo version you guys provide on your wesbite but it didnt utilize that method and the toolbars were able to be used there, could you shed some light on how it was able to work there without the explicit use of enableElements?

Thank you,  
Karin

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [May 16, 2022, 9:25pm UTC](https://pdfjs.community/t/toolbar-not-showing-up/1677/6 "2022-05-16T21:25:46Z")

</div>

Hey there,

I believe you are talking about the secondary annotation toolbar, correct?

By default the viewer is set to `View` mode which does not have a secondary toolbar. You can programmatically switch it to the `Annotate` tab by calling

```javascript
instance.UI.setToolbarGroup('toolbarGroup-Annotate');

```

This is what we do in the online demo.

Thanks!  
Logan

---

<div class="post-metadata">

**Author:** ![karin](https://avatars.discourse-cdn.com/v4/letter/k/c37758/32.png) [@karin](https://pdfjs.community/u/karin)\
**Post date:** [May 25, 2022, 9:29am UTC](https://pdfjs.community/t/toolbar-not-showing-up/1677/7 "2022-05-25T09:29:02Z")

</div>

Hi Logan,

I’m talking about the toolbar that is in the demo with pdfjs express (I’m not sure if you guys refer to that as the secondary annotation toolbar). Also it looked like Dandara’s solution was able to work for me and not the setToolBarGroup method, though i’m unsure why.

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [May 25, 2022, 3:28pm UTC](https://pdfjs.community/t/toolbar-not-showing-up/1677/8 "2022-05-25T15:28:40Z")

</div>