preview-import

Preview and verify imported HTML content in a local AEM Edge Delivery Services server.

Updated Feb 10, 2026

Search Tags:#development #rendering #verification #preview #aem #import

Ready to run

npx skills add https://github.com/paolomoz/quasar --skill preview-import-paolomoz

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: preview-import
Source: https://github.com/paolomoz/quasar/tree/main/.skills/preview-import
Command: npx skills add https://github.com/paolomoz/quasar --skill preview-import-paolomoz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill ensures that imported web content renders correctly in a local development environment, allowing for visual verification and comparison against the original source.

Core Features & Use Cases

Local Preview: Renders imported HTML files within a local AEM Edge Delivery Services development server.
Rendering Validation: Checks for correct block styling, layout, image loading, and metadata presence.
Comparison: Facilitates side-by-side comparison with a screenshot of the original page to ensure structural fidelity.
Use Case: After importing a webpage, use this skill to confirm that all content blocks, images, and styling appear as expected in the local dev environment before publishing.

Quick Start

Start the local AEM development server by running aem up and then navigate to http://localhost:3000${documentPath} in your browser to preview the imported content.

Frequently Asked Questions about preview-import

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I verify imported content rendering in an AEM Edge Delivery Services development server?▼

To verify imported content rendering in an AEM Edge Delivery Services development server, run the local server using `aem up` and navigate to the document path on `http://localhost:3000`. The tool checks block styling, layout, image loading, and metadata presence.

How do I compare visual output against the original page structure after a web import?▼

Comparing visual output against the original page structure requires having the original source screenshots available. The tool facilitates a side-by-side comparison to ensure structural fidelity and identify common import issues during rendering validation.

Do I need prerequisite files to preview imported HTML files locally?▼

Yes, previewing imported HTML files locally requires specific prerequisite files to be available, including the imported HTML, images, and original page screenshots, alongside a running local AEM development server.

What rendering issues can I identify when previewing imported web content?▼

When previewing imported web content, you can identify common import issues such as incorrect block styling, layout discrepancies, missing image loading failures, and absent metadata within the local development environment.

What's the best way to validate block styling and layout before publishing to AEM?▼

The best way to validate block styling and layout before publishing to AEM is to render the imported HTML files within the local AEM Edge Delivery Services development server to confirm all content blocks and styling appear as expected.

Why does imported content look different in my local dev environment than the original page?▼

Imported content looks different in your local dev environment due to common import issues like incorrect block styling, layout shifts, or missing images. The tool compares the local rendering against the original screenshot to pinpoint discrepancies.