# Pintura Image Editor usage guides

A collection of code examples that cover lots of popular use cases. Nearly all examples include a sandbox link so you can experiment with the code and play with the editor API before use.

* [Absolute font size](../../../docs/v8/examples/absolute-font-size/)  
Use the `createMarkupEditorShapeStyleControls` function to create custom shape style controls.
* [Add watermark](../../../docs/v8/examples/add-watermark/)  
Use the `postProcessImageData` hook to add a watermark to the `imageData` before the output file is created.
* [Empty canvas](../../../docs/v8/examples/blank-canvas/)  
Use an empty canvas element as `src` to load a new blank image.
* [Circular crop overlay](../../../docs/v8/examples/circular-crop-overlay/)  
Use the `willRenderCanvas` property to adjust the preview image the editor renders.
* [Compress image](../../../docs/v8/examples/compress-image/)  
Use the `quality` property on the `createDefaultImageWriter` function to lower the image output quality.
* [Video thumbnail](../../../docs/v8/examples/create-video-thumbnail/)  
Use the `processDefaultImage` and `trimWillRenderControls` hook to snap a video thumbnail.
* [Crop square image](../../../docs/v8/examples/crop-square-image/)  
Use the `imageCropAspectRatio` property to instruct the editor to make a crop in a fixed aspect ratio.
* [Crop stickers](../../../docs/v8/examples/crop-stickers/)  
Use the `willRenderShapeControls` property to add a crop button above a sticker shape.
* [Download image](../../../docs/v8/examples/download-image/)  
Use the `URL.createObjectURL` Web API to turn the editor file output into a URL and download it to the local file system.
* [Emoji picker](../../../docs/v8/examples/emoji-picker/)  
Use the `willRenderToolbar` function to add custom controls
* [Erase shapes](../../../docs/v8/examples/erase-shapes/)  
Use the `createMarkupEditorShapeStyleControls` function to create custom shape style controls.
* [Generate image](../../../docs/v8/examples/generate-image/)  
Use the `processImage` property function to generate an image without loading the user interface.
* [Get Base64 DataURL](../../../docs/v8/examples/get-base64-data-url/)  
Convert a File object to a base64 encoded dataURL
* [Image preview](../../../docs/v8/examples/image-preview/)  
Use the `URL.createObjectURL` Web API to turn the editor file output into an image URL ready to set to an image element.
* [Image upload](../../../docs/v8/examples/image-upload/)  
Use the `store` property to automatically upload output images to a server.
* [Load HEIC image](../../../docs/v8/examples/load-heic-image/)  
Use the `preprocessImageFile` property on the `createDefaultImageReader` export to add custom image loader logic.
* [Load PDF pages](../../../docs/v8/examples/load-pdf-as-image/)  
Use the `preprocessImageFile` property on the `createDefaultImageReader` export to load a PDF page as an image
* [Apply circular mask](../../../docs/v8/examples/mask-image/)  
Use the `postProcessImageData` property to mask the `imageData` before the output file is created.
* [Basic photo editor](../../../docs/v8/examples/photo-editor/)  
We use the `willRenderToolbar` hook to add buttons to the UI and create a basic photo editor.
* [Text placeholders](../../../docs/v8/examples/placeholders/)  
Use the `preprocessImageState` hook to automatically replace placeholder values in text shapes.
* [Replace sticker](../../../docs/v8/examples/replace-sticker/)  
Use the `willRenderShapeControls` property to add a select image button above a shape.
* [Resize image](../../../docs/v8/examples/resize-image/)  
Use the `targetSize` property on the `createDefaultImageWriter` function to automatically resize images.
* [Restore image state](../../../docs/v8/examples/restore-image-state/)  
Use the `imageState` property to restore a previously stored image editor state
* [Save GIF image](../../../docs/v8/examples/save-gif-image/)  
Use the `postProcessImageBlob` property to add a watermark to the `imageData` before the output file is created.
* [Style export button](../../../docs/v8/examples/style-export-button/)  
Use the `willRenderToolbar` and `layoutVerticalToolbarPreference` properties to adjust the style and position of the export button.
* [Use custom fonts](../../../docs/v8/examples/use-custom-fonts/)  
Use the `createMarkupEditorShapeStyleControls` function to create custom shape style controls.
* [Edit file input image](../../../docs/v8/examples/use-with-file-input/)  
Use the `openDefaultEditor` factory to open an image when it's added to a file input
* [Custom export button](../../../docs/v8/examples/custom-export-button/)  
We can use `willRenderToolbar` to replace the default export button
* [Face detection](../../../docs/v8/examples/face-detection/)  
Using a third party script to automatically set the crop rectangle to the image subject.