# Using Pintura Image Editor with Alpine
For a quick start use the [Alpine example project](https://github.com/pqina/pintura-example-alpine) as a guideline.
## Alpine implementation example
In the example below we'll use the [appendDefaultEditor](../../api/ui/exports/#default-factories) method to quickly add an image editor to an HTML element.
This creates a "default" editor that has all available plugins loaded and comes preset with all plugin default options and English locale. Each of these settings can be adjusted freely.
```html
```
## Alpine custom directive for Pintura
This code creates a basic Alpine Pintura directive to create inline editors.
It routes the editor events to the directive DOM node using `dispatchEditorEvents`, it creates reactive properties using `effect`, and it cleans up the editor instance and event routes when the node is destroyed.
```js
import {
appendDefaultEditor,
dispatchEditorEvents,
} from '../node_modules/@pqina/pintura/pintura.js';
document.addEventListener('alpine:init', () => {
Alpine.directive(
'pintura',
(el, { expression }, { evaluateLater, effect, cleanup }) => {
// create editor
const editor = appendDefaultEditor(el);
// route editor events to element
const unsubs = dispatchEditorEvents(editor, el);
// handle prop updates
const getUpdatedProps = evaluateLater(expression);
effect(() => {
getUpdatedProps((props) => {
Object.assign(editor, props);
});
});
// clean up editor
cleanup(() => {
// destroy editor instance
editor.destroy();
// unsub all routed events
unsubs.forEach((unsub) => unsub());
});
}
);
});
```
## Next steps
With the editor set up, we can continue to configure the editor to our liking by adjusting the available options exposed by [the editor API](../../api/image-editor/)