### Project Installation and Setup
Source: https://context7.com/pqina/pintura-example-alpine/llms.txt
Outlines the steps to install project dependencies using npm and run the development server. It specifies the key dependencies, including the Pintura image editor and http-server.
```bash
# Install Node.js dependencies
npm install
# This installs:
# - @pqina/pintura: ^8.x (Image editor library)
# - http-server: ^14.1.1 (Development server)
```
--------------------------------
### Start Local Development Server with npm
Source: https://context7.com/pqina/pintura-example-alpine/llms.txt
This command starts a local development server using npm. It utilizes `http-server` to serve the project files, making the example accessible at `http://localhost:8080`. Ensure you have Node.js and npm installed.
```bash
# Start local development server
npm start
# Server runs at http://localhost:8080
```
--------------------------------
### Project Package JSON Configuration
Source: https://context7.com/pqina/pintura-example-alpine/llms.txt
This JSON object defines the project's metadata, version, description, and scripts. It specifies dependencies like `@pqina/pintura` for the image editor and `http-server` for the development server. The `start` script is configured to run `npx http-server`.
```json
{
"name": "pintura-example-alpine",
"version": "0.0.0",
"description": "A Pintura Alpine example Project",
"scripts": {
"start": "npx http-server"
},
"dependencies": {
"@pqina/pintura": "^8.x"
},
"devDependencies": {
"http-server": "^14.1.1"
}
}
```
--------------------------------
### Pintura Editor Styling and Theme Configuration
Source: https://context7.com/pqina/pintura-example-alpine/llms.txt
Provides CSS examples for customizing the appearance of the Pintura editor, including setting a custom font, adjusting padding, and implementing dark mode support using CSS variables and media queries.
```css
/* styles.css */
html {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
body {
padding: 1em;
}
img {
max-width: 100%;
}
/* Light mode theme */
.pintura-editor {
--color-background: 255, 255, 255;
--color-foreground: 10, 10, 10;
}
/* Dark mode theme */
@media (prefers-color-scheme: dark) {
html {
color: #fff;
background: #111;
}
.pintura-editor {
--color-background: 10, 10, 10;
--color-foreground: 255, 255, 255;
}
}
```
--------------------------------
### Complete Pintura Alpine Image Editor Example
Source: https://context7.com/pqina/pintura-example-alpine/llms.txt
This HTML code provides a full implementation of the Pintura image editor integrated with Alpine.js. It includes features for file uploads, loading demo images, displaying edited results, and downloading the processed image. The editor is configured with specific tools and stickers.
```html
Pintura Alpine Image Editor
Pintura Image Editor
Error:
Edited Image:
Loading editor...
```
--------------------------------
### Programmatic Image Loading with Alpine.js
Source: https://context7.com/pqina/pintura-example-alpine/llms.txt
Demonstrates how to load images into the editor programmatically using local files, remote URLs, or File objects. It utilizes Alpine.js directives to control the editor's source.
```javascript
// Load local image
// Load remote image
// Load from File object
```
--------------------------------
### HTML Structure for Pintura Alpine Editor
Source: https://context7.com/pqina/pintura-example-alpine/llms.txt
Sets up the HTML for the Pintura Alpine.js integration. It includes inputs for file selection, buttons to load images, an image display area, and the main `div` where the Pintura editor is initialized via the `x-pintura` directive. It also configures editor properties like aspect ratio and available utilities.
```html
Pintura Alpine example
```
--------------------------------
### Pintura Editor Configuration Options
Source: https://context7.com/pqina/pintura-example-alpine/llms.txt
Details various configuration options for the Pintura editor using Alpine.js, including crop aspect ratios, available utilities, filter presets, annotation preprocessors, and output settings like quality and MIME type.
```javascript
```
--------------------------------
### Custom Sticker Configuration for Pintura
Source: https://context7.com/pqina/pintura-example-alpine/llms.txt
Illustrates how to configure custom sticker groups, including emoji and SVG stickers, within the Pintura editor using Alpine.js. Supports custom sizing for SVG stickers.
```javascript
```
--------------------------------
### Pintura Event Handling with Alpine.js
Source: https://context7.com/pqina/pintura-example-alpine/llms.txt
Shows how to listen to and respond to Pintura editor lifecycle events using Alpine.js event listeners. This includes handling initialization, image loading, processing, updates, and closing events.
```html
```
--------------------------------
### Alpine.js Directive for Pintura Editor
Source: https://context7.com/pqina/pintura-example-alpine/llms.txt
Implements the `x-pintura` Alpine.js directive to create and manage Pintura editor instances. It handles initialization, event dispatching, reactive property updates, and cleanup. Dependencies include Pintura's core functions and Alpine.js.
```javascript
import {
appendDefaultEditor,
dispatchEditorEvents,
} from '../node_modules/@pqina/pintura/pintura.js';
document.addEventListener('alpine:init', () => {
Alpine.directive('pintura', (el, { expression }, { evaluateLater, effect, cleanup }) => {
// Create editor instance
const editor = appendDefaultEditor(el);
// Route editor events to element
const unsubs = dispatchEditorEvents(editor, el);
// Handle reactive property updates
const getUpdatedProps = evaluateLater(expression);
effect(() => {
getUpdatedProps((props) => {
Object.assign(editor, props);
});
});
// Cleanup on component destroy
cleanup(() => {
editor.destroy();
unsubs.forEach((unsub) => unsub());
});
});
});
```
--------------------------------
### Alpine.js File Input for Image Selection
Source: https://context7.com/pqina/pintura-example-alpine/llms.txt
Handles user selection of image files using an HTML file input within an Alpine.js component. It validates that the selected file is an image and then updates the `src` data property, which triggers the Pintura editor to load the image.
```javascript
// In Alpine component
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.