# Document

> Learn how to add & edit documents to your board with MockFlow Board.

Source: https://mockflow.com/docs/boards/components/document-in-ideaboard

Available in:
                    

              Basic
            

              WireframePro
            

              MockFlow Board
            

              Bundle Plan
            

              Enterprise
            

Documents in MockFlow Board allow you to add and organize text content visually within your whiteboard. You can create multiple docs side-by-side, connect them with flows, and enrich them using stickies, images, and to-dos. 

## How to add a Document?

Click on the 'Add' icon on the board, locate 'Document,' and drag it onto the canvas.

![Adding  the Document - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/ec9dba45405a3ef145eefb57.gif)

Double-click on the component and you can add and edit the content.

![About Document - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/dc6a45759a0884b481bac2c7.webp)

The Document can be customized using the quick toolbar that appears when you click on it.

**Customizing the Document: **You can customize the document’s font family, color, size, background, and padding directly from the quick toolbar.

![Customizing the Document component - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/4863f29f6323ef09fb9a018b.webp)

**Formatting options:** You can access additional formatting options within the Document component, such as adding bullet points, images, videos, and more.

![Formatting Options in Document - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/2b2f37dcdb8b6203d2aaab60.webp)

**Change background: **You can change the background of the Document component by clicking ‘Change Theme’ icon and selecting a theme from the list.

![Changing Background in Document - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/52b871e98992a50af6d624f2.gif)

**Auto height Document: **You can use 'Toggle Auto Height' to display/hide the full view of the document.

![Auto height the Document - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/4c6b0fb98bce171829b68ee9.webp)

**Generate Document with AI: **You can quickly create document content using the 'generate with AI' option. From the quick toolbar, click the AI icon and enter your prompt to generate.

![Generating with AI in Document - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/1776af981f7db232bf3b0609.gif)

**Exporting Document: **You can export the document by clicking ‘Download Document’ and then selecting the ‘Download’ button. The file will be saved as a PDF.

## 

**Advanced Settings for Document: **To access the advanced settings toolbar, click on the 'Toggle Advanced Settings' option from the quick toolbar.

![Advanced settings for Document - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/46b2183b5a32151d45fbd1fc.webp)

**Using the Focus mode: **There is an option to edit the Document in a 'focus mode' where all other components of the board are hidden, and only the Document component being edited is visible. To turn on this focus mode, click on the focus icon  in the quick toolbar (as shown below). To exit from the focus mode, click on the close icon at the top right.

![Using Focus Mode in Document - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/c8d25cb8f169d9d05dc21d7b.webp)

**Share component link with team: **In focus mode, at the top right, there is a share icon next to the close icon. Click on this share icon to copy a unique link for the document component view to share directly within your team.

![Sharing the Document - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/1f99fa21f5a6e5f77528adf5.webp)

**Document Interaction -** Click on the hand icon to edit the document and to move around the doc on the board, you can just click and drag. 

![Interacting with Document - MockFlow IdeaBoard](https://assets.mockflow.com/docs/media/38966c0637944c204f6ed734.webp)