docx-js/docs/examples.md

# Examples

> All examples can run independently and can be found in the `/demo` folder of the project

## Simple

A simple hello world of the `docx` library:

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo1.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo1.js_

## Styles

### Styling with JS

This example shows how to customise the look and feel of a document using JS configuration

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo2.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo2.js_

### Styling with XML

This example shows how to customise the look and feel of a document using XML configuration

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo13.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo13.js_

## Numbering

This example shows many levels of numbering

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo3.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo3.js_

## Table

Example of simple table

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo4.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo4.js_

### Styling table borders

Styling the borders of a table

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo20.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo20.js_

## Images

### Add image to the document

Importing Images from file system path

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo5.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo5.js_

### Add images to header and footer

Example showing how to add image to headers and footers

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo9.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo9.js_

### Scaling images

Example showing how to scale images

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo12.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo12.js_

### Add Image to media before adding to document

This is the best way to add an image to a document because you can add the same image in two locations without increasing document size by re-using the same image

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo23.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo23.js_

### Add image to table

As before, to add an image to a table, you would need to add it to the `Media` object first

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo24.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo24.js_

### Images using Base64 URI

If you want to use a Base64 image instead

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo18.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo18.js_

## Margins

Example showing how to set custom margains

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo6.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo6.js_

## Orientation

Example showing how to set the document to `landscape` or `portrait`

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo7.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo7.js_

## Headers & Footers

Example showing how to add headers and footers

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo8.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo8.js_

## Multiple headers and footers

Check out `Sections` for this feature

## Page Breaks

### Normal page breaks

Example showing how to page break

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo14.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo14.js_

### Page break before

Example showing how to page break before like in Word

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo15.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo15.js_

## Sections

Example of how sections work. Sections allow multiple headers and footers, and `landscape`/`portrait` inside the same document

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo16.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo16.js_

## Footnotes

Example of how to add footnotes. Good for references

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo17.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo17.js_

## Packers

## Buffer Packer

Example showing how to use the Buffer packer and then write that buffer to the file system

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo19.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo19.js_

## PDF Packing

Example of how to use the `LocalPacker` to create a PDF document

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo25.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo25.js_

## Bookmarks

Example showing how to make bookmarks to make internal hyperlinks within the document

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo21.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo21.js_

## Bidirectional text

Example showing how to use bidirectional text for certain languages such as Hebrew

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo22.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo22.js_

## Showcase

### My CV

Example showing how to add headers and footers

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo10.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo10.js_

### Style and Images

This example shows how to customise the look and feel of a document and add images

[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo11.js ":include")

_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo11.js_