# Source: https://dev.writer.com/components/pdf.md

# PDF

A component to embed PDF documents.

<img src="https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/pdf.png?fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=46b35fb047b13acdaf7d2538cdb04c4d" data-og-width="1213" width="1213" data-og-height="1145" height="1145" data-path="framework/public/components/pdf.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/pdf.png?w=280&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=6bf34b665535617572ef2812954140b5 280w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/pdf.png?w=560&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=0ea4335d7b3c713712082fe446622521 560w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/pdf.png?w=840&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=02bbfaf2e398bc9fc7d13ecf4817fcdc 840w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/pdf.png?w=1100&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=736b95a2253414102f5bba99a50ed29b 1100w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/pdf.png?w=1650&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=afe10ab903dfc6adaf50f9629323a56a 1650w, https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/pdf.png?w=2500&fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=72ae902de95682b126d9e4c6effcd024 2500w" />

## Fields

<table className="componentFields">
  <thead>
    <th>Name</th>
    <th>Type</th>
    <th class="desc">Description</th>
    <th>Options</th>
  </thead>

  <tbody>
    <tr>
      <td>PDF source</td>
      <td>Text</td>
      <td>A valid URL. Alternatively, you can provide a state reference to a packed PDF file.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Highlights</td>
      <td>Object</td>
      <td>A list of highlights to be applied to the PDF as a JSON array of strings.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Selected highlight match</td>
      <td>Number</td>
      <td>The index of the selected highlight match.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Page</td>
      <td>Number</td>
      <td>The page to be displayed.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Enable controls</td>
      <td>Boolean</td>
      <td>Show controls to navigate the PDF.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Container background</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Separator</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Primary text</td>
      <td>Color</td>
      <td>-</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Custom CSS classes</td>
      <td>Text</td>
      <td>CSS classes, separated by spaces. You can define classes in custom stylesheets.</td>

      <td>
        <span>-</span>
      </td>
    </tr>
  </tbody>
</table>