diff --git a/src/components/Preview.svelte b/src/components/Preview.svelte
index 91426fb..91f8bdd 100644
--- a/src/components/Preview.svelte
+++ b/src/components/Preview.svelte
@@ -9,26 +9,49 @@
 
   let loading = true
   let preview: Preview | undefined = undefined
+  let renderNonce = 0
 
   let title = ''
 
   $: {
     if (url) {
       const decodedUrl = decodeURIComponent(url)
+      const currentRender = ++renderNonce
 
       if (typeof window !== 'undefined') {
         if (!preview) {
           preview = new Preview('#site-frame')
         }
 
-        preview.render(decodedUrl).then(() => {
-          loading = false
-
-          if (preview?.pageData.title) {
-            // update with page title or URL
-            title = preview.pageData.title
-          }
-        })
+        loading = true
+        title = ''
+
+        preview
+          .render(decodedUrl)
+          .then(() => {
+            if (currentRender !== renderNonce) {
+              return
+            }
+
+            if (preview?.pageData.title) {
+              // update with page title or URL
+              title = preview.pageData.title
+            }
+          })
+          .catch(() => {
+            if (currentRender !== renderNonce) {
+              return
+            }
+
+            title = decodedUrl
+          })
+          .finally(() => {
+            if (currentRender !== renderNonce) {
+              return
+            }
+
+            loading = false
+          })
       }
     }
   }
diff --git a/src/routes/img/[...path]/+server.ts b/src/routes/img/[...path]/+server.ts
new file mode 100644
index 0000000..faf1352
--- /dev/null
+++ b/src/routes/img/[...path]/+server.ts
@@ -0,0 +1,67 @@
+import { error } from '@sveltejs/kit'
+import {
+  buildImageFallbackTargets,
+  decodePreviewUrlFromReferer,
+  isSupportedImageFallbackSource,
+  sanitizeRelativePath,
+} from '../../../utils/image-fallback'
+
+export const prerender = false
+
+export async function GET({ request, params, fetch }) {
+  const imagePath = sanitizeRelativePath(params.path)
+  if (!imagePath) {
+    throw error(400, 'Invalid image path')
+  }
+
+  const previewUrl = decodePreviewUrlFromReferer(request.headers.get('referer'))
+  if (!previewUrl) {
+    throw error(404, 'Preview context unavailable')
+  }
+
+  if (!isSupportedImageFallbackSource(previewUrl)) {
+    throw error(404, 'Preview source not supported for image fallback')
+  }
+
+  const targets = buildImageFallbackTargets(previewUrl, imagePath)
+  if (!targets.length) {
+    throw error(404, 'Could not resolve image target')
+  }
+
+  for (const target of targets) {
+    let upstream: Response
+    try {
+      upstream = await fetch(target, {
+        redirect: 'follow',
+        headers: {
+          Accept: request.headers.get('accept') ?? 'image/*,*/*',
+        },
+      })
+    } catch {
+      continue
+    }
+
+    if (!upstream.ok) {
+      continue
+    }
+
+    const payload = await upstream.arrayBuffer()
+    const headers = new Headers()
+
+    const contentType = upstream.headers.get('content-type')
+    if (contentType) {
+      headers.set('Content-Type', contentType)
+    }
+    headers.set(
+      'Cache-Control',
+      upstream.headers.get('cache-control') ?? 'public, max-age=300',
+    )
+
+    return new Response(payload, {
+      status: upstream.status,
+      headers,
+    })
+  }
+
+  throw error(404, 'Image not found')
+}
diff --git a/src/utils/image-fallback.ts b/src/utils/image-fallback.ts
new file mode 100644
index 0000000..973fb2b
--- /dev/null
+++ b/src/utils/image-fallback.ts
@@ -0,0 +1,98 @@
+import { resourceType } from '../types/resources'
+import { getRepositoryRoot } from './lang/html'
+import { getResourceType, isValidURL, processUrl } from './url'
+
+export function sanitizeRelativePath(
+  pathParam: string | undefined,
+): string | undefined {
+  if (!pathParam) {
+    return undefined
+  }
+
+  let decodedPath: string
+  try {
+    decodedPath = decodeURIComponent(pathParam)
+  } catch {
+    return undefined
+  }
+
+  const segments = decodedPath.split('/').filter(Boolean)
+  if (!segments.length) {
+    return undefined
+  }
+
+  if (segments.some((segment) => segment === '.' || segment === '..')) {
+    return undefined
+  }
+
+  return segments.join('/')
+}
+
+export function decodePreviewUrlFromReferer(
+  refererHeader: string | null,
+): string | undefined {
+  if (!refererHeader) {
+    return undefined
+  }
+
+  let refererUrl: URL
+  try {
+    refererUrl = new URL(refererHeader)
+  } catch {
+    return undefined
+  }
+
+  const queryUrl = refererUrl.searchParams.get('url')
+  if (queryUrl && isValidURL(queryUrl)) {
+    return queryUrl
+  }
+
+  const slug = refererUrl.pathname.replace(/^\/+/, '')
+  if (!slug) {
+    return undefined
+  }
+
+  try {
+    const decodedSlug = decodeURIComponent(slug)
+    if (isValidURL(decodedSlug)) {
+      return decodedSlug
+    }
+  } catch {
+    return undefined
+  }
+
+  return undefined
+}
+
+export function buildImageFallbackTargets(
+  previewUrl: string,
+  imagePath: string,
+): string[] {
+  const htmlCandidates = processUrl(previewUrl)
+  const targets: string[] = []
+
+  htmlCandidates.forEach((candidate) => {
+    let candidateUrl: URL
+    try {
+      candidateUrl = new URL(candidate)
+    } catch {
+      return
+    }
+
+    const repositoryRoot = getRepositoryRoot(candidateUrl)
+    if (!repositoryRoot) {
+      return
+    }
+
+    targets.push(new URL(`img/${imagePath}`, repositoryRoot).toString())
+  })
+
+  return [...new Set(targets)]
+}
+
+export function isSupportedImageFallbackSource(previewUrl: string): boolean {
+  const previewType = getResourceType(previewUrl, false)
+  return (
+    previewType === resourceType.GITHUB || previewType === resourceType.GITLAB
+  )
+}
diff --git a/src/utils/lang/html.ts b/src/utils/lang/html.ts
index 1fe3d40..28134b4 100644
--- a/src/utils/lang/html.ts
+++ b/src/utils/lang/html.ts
@@ -4,6 +4,11 @@ export function isHTML(maybeHTML: string): boolean {
   return [...$div.childNodes].reverse().some(($child) => $child.nodeType === 1)
 }
 
+export const PREVIEW_SCRIPT_PLACEHOLDER_TYPE =
+  'application/static-preview-script'
+export const PREVIEW_SCRIPT_SRC_ATTRIBUTE = 'data-preview-script-src'
+export const PREVIEW_SCRIPT_TYPE_ATTRIBUTE = 'data-preview-script-type'
+
 function getFetchResolverScript() {
   return `<script data-static-preview-fetch-resolver>
 ;(() => {
@@ -59,6 +64,215 @@ function getTitle(html: string) {
   return $title?.textContent ?? undefined
 }
 
+function serializeDoctype(doc: Document): string {
+  const { doctype } = doc
+  if (!doctype) {
+    return ''
+  }
+
+  let serialized = `<!DOCTYPE ${doctype.name}`
+
+  if (doctype.publicId) {
+    serialized += ` PUBLIC "${doctype.publicId}"`
+  } else if (doctype.systemId) {
+    serialized += ' SYSTEM'
+  }
+
+  if (doctype.systemId) {
+    serialized += ` "${doctype.systemId}"`
+  }
+
+  serialized += '>'
+  return serialized
+}
+
+function rewriteRootRelativeAttributes(doc: Document) {
+  const rootRelativeAttributes = ['src', 'href'] as const
+  const $assets = doc.querySelectorAll<HTMLElement>('[src], [href]')
+
+  for (const $asset of $assets) {
+    for (const attr of rootRelativeAttributes) {
+      const value = $asset.getAttribute(attr)
+      if (!value) {
+        continue
+      }
+
+      // Keep protocol-relative URLs (`//cdn.example.com`) untouched.
+      if (!value.startsWith('/') || value.startsWith('//')) {
+        continue
+      }
+
+      $asset.setAttribute(attr, value.slice(1))
+    }
+  }
+}
+
+function isAbsoluteOrSpecialUrl(value: string): boolean {
+  const normalized = value.trim().toLowerCase()
+
+  return (
+    normalized.startsWith('http://') ||
+    normalized.startsWith('https://') ||
+    normalized.startsWith('//') ||
+    normalized.startsWith('data:') ||
+    normalized.startsWith('mailto:') ||
+    normalized.startsWith('tel:') ||
+    normalized.startsWith('javascript:') ||
+    normalized.startsWith('#')
+  )
+}
+
+function rewriteRelativeResourceAttributes(doc: Document, pageUrl: URL) {
+  const urlAttributes = ['src', 'href'] as const
+  const $assets = doc.querySelectorAll<HTMLElement>('[src], [href]')
+
+  for (const $asset of $assets) {
+    const tagName = $asset.tagName.toLowerCase()
+
+    for (const attr of urlAttributes) {
+      const value = $asset.getAttribute(attr)
+      if (!value) {
+        continue
+      }
+
+      // Preserve navigation links and already-absolute values.
+      if (
+        (attr === 'href' && (tagName === 'a' || tagName === 'area')) ||
+        isAbsoluteOrSpecialUrl(value) ||
+        value.startsWith('/')
+      ) {
+        continue
+      }
+
+      try {
+        $asset.setAttribute(attr, new URL(value, pageUrl).toString())
+      } catch {
+        // Keep original attribute when URL parsing fails.
+      }
+    }
+  }
+}
+
+function normalizePathname(pathname: string): string {
+  const segments = pathname.split('/')
+  const normalized: string[] = []
+
+  for (const segment of segments) {
+    if (!segment || segment === '.') {
+      continue
+    }
+
+    if (segment === '..') {
+      normalized.pop()
+      continue
+    }
+
+    normalized.push(segment)
+  }
+
+  return `/${normalized.join('/')}`
+}
+
+export function getRepositoryRoot(url: URL): string {
+  const pathname = normalizePathname(url.pathname)
+  const segments = pathname.split('/').filter(Boolean)
+
+  if (url.hostname === 'raw.githubusercontent.com' && segments.length >= 3) {
+    const [owner, repo, branch] = segments
+    return `https://${url.hostname}/${owner}/${repo}/${branch}/`
+  }
+
+  const rawMarker = segments.findIndex(
+    (segment, idx) => segment === '-' && segments[idx + 1] === 'raw',
+  )
+  if (url.hostname === 'gitlab.com' && rawMarker >= 2) {
+    return `https://${url.hostname}/${segments
+      .slice(0, rawMarker + 3)
+      .join('/')}/`
+  }
+
+  return new URL('.', url).toString()
+}
+
+function rewriteRootRelativeToRepo(doc: Document, rawPageUrl: URL) {
+  const baseHref = doc.head.querySelector('base')?.getAttribute('href')
+  if (!baseHref) {
+    return
+  }
+
+  let pageBaseUrl: URL
+  try {
+    pageBaseUrl = new URL(baseHref)
+  } catch {
+    return
+  }
+
+  const repositoryRoot = getRepositoryRoot(rawPageUrl)
+
+  const rootRelativeAttributes = ['src', 'href'] as const
+  const $assets = doc.querySelectorAll<HTMLElement>('[src], [href]')
+
+  for (const $asset of $assets) {
+    const tagName = $asset.tagName.toLowerCase()
+    const keepRootRelativeOnSameOrigin =
+      tagName === 'a' ||
+      tagName === 'area' ||
+      tagName === 'form' ||
+      tagName === 'base'
+
+    for (const attr of rootRelativeAttributes) {
+      const value = $asset.getAttribute(attr)
+      if (!value || !value.startsWith('/')) {
+        continue
+      }
+
+      // Keep protocol-relative URLs untouched.
+      if (value.startsWith('//')) {
+        continue
+      }
+
+      const resolvedUrl = new URL(value, pageBaseUrl)
+      if (
+        resolvedUrl.origin === pageBaseUrl.origin &&
+        keepRootRelativeOnSameOrigin
+      ) {
+        continue
+      }
+
+      $asset.setAttribute(
+        attr,
+        new URL(value.slice(1), repositoryRoot).toString(),
+      )
+    }
+  }
+}
+
+function deferScriptExecution(doc: Document) {
+  const $scripts = doc.querySelectorAll<HTMLScriptElement>('script')
+
+  for (const $script of $scripts) {
+    const src = $script.getAttribute('src')
+    if (src) {
+      let resolvedSrc = src
+      try {
+        resolvedSrc = new URL(src, doc.baseURI).toString()
+      } catch {
+        // Keep the original script source when URL parsing fails.
+      }
+
+      $script.setAttribute(PREVIEW_SCRIPT_SRC_ATTRIBUTE, resolvedSrc)
+      $script.removeAttribute('src')
+    }
+
+    const type = $script.getAttribute('type')
+    if (type) {
+      $script.setAttribute(PREVIEW_SCRIPT_TYPE_ATTRIBUTE, type)
+    }
+
+    $script.setAttribute('type', PREVIEW_SCRIPT_PLACEHOLDER_TYPE)
+  }
+}
+
 export interface HTMLPageData {
   // TODO - move this to a separate file
   title?: string
@@ -69,14 +283,27 @@ export interface HTMLPageData {
 }
 
 export function processHTML(html: string, url: string): HTMLPageData {
-  const processedHTML = html
-    // Add base tag to iframe
-    .replace(
-      /<head([^>]*)>/i,
-      `<head$1><base href="${url}">${getFetchResolverScript()}`,
-    )
-    // Replace absolute paths with relative paths
-    .replace(/((src|href|content)=")\/(.*?")/gm, '$1$3')
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(html, 'text/html')
+  const pageUrl = new URL(url)
+
+  if (!doc.head.querySelector('base')) {
+    const base = doc.createElement('base')
+    base.setAttribute('href', url)
+    doc.head.prepend(base)
+  }
+
+  if (!doc.head.querySelector('script[data-static-preview-fetch-resolver]')) {
+    doc.head.insertAdjacentHTML('afterbegin', getFetchResolverScript())
+  }
+
+  rewriteRootRelativeToRepo(doc, pageUrl)
+  rewriteRootRelativeAttributes(doc)
+  rewriteRelativeResourceAttributes(doc, pageUrl)
+  deferScriptExecution(doc)
+
+  const doctype = serializeDoctype(doc)
+  const processedHTML = `${doctype}${doctype ? '\n' : ''}${doc.documentElement.outerHTML}`
 
   return {
     processedHTML,
diff --git a/src/utils/preview.ts b/src/utils/preview.ts
index 5e92552..b3818f1 100644
--- a/src/utils/preview.ts
+++ b/src/utils/preview.ts
@@ -2,7 +2,14 @@ import { goto } from '$app/navigation'
 import { PreviewError, errorType } from './errors'
 import { proxyFetch } from './fetch'
 import { processCSS } from './lang/css'
-import { isHTML, processHTML, type HTMLPageData } from './lang/html'
+import {
+  isHTML,
+  PREVIEW_SCRIPT_PLACEHOLDER_TYPE,
+  PREVIEW_SCRIPT_SRC_ATTRIBUTE,
+  PREVIEW_SCRIPT_TYPE_ATTRIBUTE,
+  processHTML,
+  type HTMLPageData,
+} from './lang/html'
 import logger from './logger'
 import { processUrl } from './url'
 
@@ -41,18 +48,15 @@ export class Preview {
       // if the URL is an HTML file, we can just load it
       const htmlURL = urls[0]
 
-      this.load(htmlURL)
-        .then(async (data) => {
-          await this.loadHTML(data, htmlURL)
-        })
-        .catch(() => {
-          throw new PreviewError(
-            `Could not find any valid HTML files. Tried:\n${urls.join(
-              '\n - ',
-            )}`,
-            errorType.NOT_FOUND,
-          )
-        })
+      try {
+        const data = await this.load(htmlURL)
+        await this.loadHTML(data, htmlURL)
+      } catch {
+        throw new PreviewError(
+          `Could not find any valid HTML files. Tried:\n${urls.join('\n - ')}`,
+          errorType.NOT_FOUND,
+        )
+      }
     } else {
       // otherwise we have to attempt to load 3 possible URLs
       const errorTable = new Array(urls.length).fill(false)
@@ -105,15 +109,31 @@ export class Preview {
       this.iframeDocument.document.addEventListener('click', (e) => {
         const $el = e.target as HTMLElement
         const $anchor = $el.closest<HTMLAnchorElement>('a')
+        const href = $anchor?.getAttribute('href')
 
-        if ($anchor) {
-          e.preventDefault()
+        if (!$anchor || !href || href.startsWith('#')) {
+          return
+        }
 
-          // TODO: Check if it's a relative link
+        let resolvedUrl: URL
+        try {
+          const resolutionBase =
+            this.iframeDocument.document.baseURI ||
+            this.iframeDocument.location.href
+          resolvedUrl = new URL(href, resolutionBase)
+        } catch {
+          return
+        }
 
-          // use Svelte navigation to trigger a re-render from the top of the UI
-          goto(`/${encodeURIComponent($anchor.href)}`)
+        // Keep external links inside the iframe navigation flow.
+        if (!this.isProxySupportedUrl(resolvedUrl.toString())) {
+          return
         }
+
+        e.preventDefault()
+
+        // use Svelte navigation to trigger a re-render from the top of the UI
+        goto(`/${encodeURIComponent(resolvedUrl.toString())}`)
       })
     })
   }
@@ -124,57 +144,94 @@ export class Preview {
       this.iframeDocument.document.querySelectorAll<HTMLLinkElement>(
         'link[rel=stylesheet]',
       )
-    const links = [...$link].map(async ({ href }: { href: string }) => {
-      const payload = await this.load(`${href}`)
-      return {
-        url: href,
-        payload,
+    const links = [...$link]
+      .map(({ href }) => href)
+      .filter((href) => this.shouldProxyStylesheet(href))
+      .map(async (href) => {
+        const payload = await this.load(href)
+        return {
+          url: href,
+          payload,
+        }
+      })
+
+    const stylesheetResults = await Promise.allSettled(links)
+    stylesheetResults.forEach((result) => {
+      if (result.status !== 'fulfilled') {
+        logger.warn(`Skipping stylesheet after failed fetch: ${result.reason}`)
+        return
       }
-    })
 
-    await Promise.all(links).then((res) => {
-      res.forEach(({ payload, url: cssUrl }) => {
-        const processedCSS = processCSS(payload, cssUrl)
-        this.appendToHead(processedCSS, 'style')
-      })
+      const { payload, url: cssUrl } = result.value
+      const processedCSS = processCSS(payload, cssUrl)
+      this.appendToHead(processedCSS, 'style')
     })
 
     // Load page JS
+    const scriptSelector = `script[src], script[type="${PREVIEW_SCRIPT_PLACEHOLDER_TYPE}"]`
     const $script =
       this.iframeDocument.document.querySelectorAll<HTMLScriptElement>(
-        'script[src]',
+        scriptSelector,
       )
 
-    const scripts = [...$script]
-      .filter(({ src }) => this.shouldProxyScript(src))
-      .map(async (script) => {
-        const payload = await this.load(script.src)
-        const scriptType = script.getAttribute('type')?.toLowerCase().trim()
-
-        // Prevent the browser from trying to load unsupported raw URLs directly.
-        script.remove()
+    for (const script of [...$script]) {
+      const source =
+        script.getAttribute(PREVIEW_SCRIPT_SRC_ATTRIBUTE) ?? script.src ?? ''
+      const scriptType =
+        script.getAttribute(PREVIEW_SCRIPT_TYPE_ATTRIBUTE)?.trim() ??
+        script.getAttribute('type')?.trim()
+      const type =
+        scriptType && scriptType !== PREVIEW_SCRIPT_PLACEHOLDER_TYPE
+          ? scriptType
+          : undefined
+      const inlinePayload = script.textContent ?? ''
+
+      script.remove()
+
+      if (source) {
+        if (this.shouldProxyScript(source)) {
+          try {
+            const payload = await this.load(source)
+            this.appendScriptToHead(payload, type)
+          } catch (err) {
+            logger.warn(`Skipping script after failed fetch: ${err}`)
+          }
+          continue
+        }
 
-        return {
-          payload,
-          type: scriptType === 'module' ? ('module' as const) : undefined,
+        try {
+          await this.appendExternalScriptToHead(source, type)
+        } catch (err) {
+          logger.warn(`Skipping script after failed external load: ${err}`)
         }
-      })
+        continue
+      }
 
-    await Promise.all(scripts).then((res) => {
-      res.forEach(({ payload, type }) => this.appendScriptToHead(payload, type))
+      this.appendScriptToHead(inlinePayload, type)
+    }
 
-      this.iframeDocument.document.dispatchEvent(
-        new Event('DOMContentLoaded', { bubbles: true, cancelable: true }),
-      ) // Dispatch DOMContentLoaded event after loading all scripts
-    })
+    this.iframeDocument.document.dispatchEvent(
+      new Event('DOMContentLoaded', { bubbles: true, cancelable: true }),
+    ) // Dispatch DOMContentLoaded event after loading all scripts
+  }
+
+  /**
+   * Determine whether a script source should be fetched via proxy.
+   */
+  private shouldProxyStylesheet(href: string): boolean {
+    return this.isProxySupportedUrl(href)
   }
 
   /**
    * Determine whether a script source should be fetched via proxy.
    */
   private shouldProxyScript(src: string): boolean {
+    return this.isProxySupportedUrl(src)
+  }
+
+  private isProxySupportedUrl(url: string): boolean {
     return (
-      src.includes('//raw.githubusercontent.com') || src.includes('/-/raw/')
+      url.includes('//raw.githubusercontent.com') || url.includes('/-/raw/')
     )
   }
 
@@ -196,7 +253,7 @@ export class Preview {
   /**
    * Inline JS into the preview head.
    */
-  private appendScriptToHead(data: string, type?: 'module'): void {
+  private appendScriptToHead(data: string, type?: string): void {
     if (!data) {
       return
     }
@@ -211,6 +268,24 @@ export class Preview {
     this.iframeDocument.document.head.appendChild(tag)
   }
 
+  private appendExternalScriptToHead(
+    src: string,
+    type?: string,
+  ): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      const tag = this.iframeDocument.document.createElement('script')
+
+      if (type) {
+        tag.type = type
+      }
+
+      tag.onload = () => resolve()
+      tag.onerror = () => reject(new Error(`Failed to load script: ${src}`))
+      tag.src = src
+      this.iframeDocument.document.head.appendChild(tag)
+    })
+  }
+
   /**
    * Load a resource from the network and store it in the cache
    */
diff --git a/tests/html.test.ts b/tests/html.test.ts
index 53cb387..5382040 100644
--- a/tests/html.test.ts
+++ b/tests/html.test.ts
@@ -1,7 +1,6 @@
 import { processHTML } from '../src/utils/lang/html'
 
-const HTML_URL =
-  'https://gitlab.com/sirajchokshi/static-preview-test/-/raw/main/wasm.html'
+const HTML_URL = 'https://example.invalid/example-site/main/wasm.html'
 
 describe('[HTML] processHTML', () => {
   it('injects base url and runtime fetch resolver', () => {
@@ -25,7 +24,7 @@ describe('[HTML] processHTML', () => {
     expect(title).toEqual('WASM | Static Preview Test')
   })
 
-  it('rewrites leading slash paths to document-relative paths', () => {
+  it('rewrites resource URLs while preserving navigational links', () => {
     const html = `
       <!DOCTYPE html>
       <html>
@@ -42,9 +41,13 @@ describe('[HTML] processHTML', () => {
 
     const { processedHTML } = processHTML(html, HTML_URL)
 
-    expect(processedHTML).toContain('href="assets/main.css"')
-    expect(processedHTML).toContain('content="assets/preview.png"')
+    expect(processedHTML).toContain(
+      'href="https://example.invalid/example-site/main/assets/main.css"',
+    )
+    expect(processedHTML).toContain('content="/assets/preview.png"')
     expect(processedHTML).toContain('href="index.html"')
-    expect(processedHTML).toContain('src="assets/wasm.js"')
+    expect(processedHTML).toContain(
+      'data-preview-script-src="https://example.invalid/example-site/main/assets/wasm.js"',
+    )
   })
 })
diff --git a/tests/image-fallback.test.ts b/tests/image-fallback.test.ts
new file mode 100644
index 0000000..9353f84
--- /dev/null
+++ b/tests/image-fallback.test.ts
@@ -0,0 +1,50 @@
+import {
+  buildImageFallbackTargets,
+  decodePreviewUrlFromReferer,
+  sanitizeRelativePath,
+} from '../src/utils/image-fallback'
+
+describe('[Image fallback route]', () => {
+  it('extracts preview URL from encoded referer path', () => {
+    const referer =
+      'http://localhost:5173/https%3A%2F%2Fgithub.invalid%2Fexample-owner%2Fexample-static-site'
+
+    expect(decodePreviewUrlFromReferer(referer)).toBe(
+      'https://github.invalid/example-owner/example-static-site',
+    )
+  })
+
+  it('builds deduplicated raw targets for github repositories', () => {
+    const targets = buildImageFallbackTargets(
+      'https://github.invalid/example-owner/example-static-site',
+      'logo.png',
+    )
+
+    expect(targets).toEqual(
+      expect.arrayContaining([
+        'https://raw.githubusercontent.com/example-owner/example-static-site/master/img/logo.png',
+        'https://raw.githubusercontent.com/example-owner/example-static-site/main/img/logo.png',
+      ]),
+    )
+  })
+
+  it('sanitizes image fallback paths', () => {
+    expect(sanitizeRelativePath('logo.png')).toBe('logo.png')
+    expect(sanitizeRelativePath('nested/path/logo.png')).toBe(
+      'nested/path/logo.png',
+    )
+    expect(sanitizeRelativePath('../logo.png')).toBeUndefined()
+    expect(sanitizeRelativePath('./logo.png')).toBeUndefined()
+  })
+
+  it('resolves first candidate before fallback branch candidate', () => {
+    const targets = buildImageFallbackTargets(
+      'https://github.invalid/example-owner/example-static-site',
+      'logo.png',
+    )
+
+    expect(targets[0]).toBe(
+      'https://raw.githubusercontent.com/example-owner/example-static-site/master/img/logo.png',
+    )
+  })
+})
diff --git a/tests/preview.test.ts b/tests/preview.test.ts
new file mode 100644
index 0000000..0a9550c
--- /dev/null
+++ b/tests/preview.test.ts
@@ -0,0 +1,484 @@
+jest.mock('$app/navigation', () => ({ goto: jest.fn() }), { virtual: true })
+
+import { goto } from '$app/navigation'
+import { Preview } from '../src/utils/preview'
+
+const originalWarn = console.warn
+const gotoMock = goto as jest.MockedFunction<typeof goto>
+
+function mockResponse(status: number, body: string): Response {
+  return {
+    status,
+    ok: status >= 200 && status < 300,
+    text: async () => body,
+  } as unknown as Response
+}
+
+function getProxyTarget(input: string | URL | Request): string {
+  if (typeof input === 'string') {
+    return new URL(input, 'http://localhost').searchParams.get('url') ?? ''
+  }
+
+  if (input instanceof URL) {
+    return (
+      new URL(input.toString(), 'http://localhost').searchParams.get('url') ??
+      ''
+    )
+  }
+
+  return new URL(input.url, 'http://localhost').searchParams.get('url') ?? ''
+}
+
+describe('[Preview] resource loading resilience', () => {
+  let originalFetch: typeof fetch | undefined
+
+  const htmlUrl =
+    'https://raw.githubusercontent.com/example-owner/example-static-site/master/index.html'
+  const proxiedCssUrl =
+    'https://raw.githubusercontent.com/example-owner/example-static-site/master/styles/site.css'
+
+  beforeEach(() => {
+    document.body.innerHTML = '<iframe id="site-frame"></iframe>'
+    originalFetch = global.fetch
+    console.warn = jest.fn()
+    gotoMock.mockClear()
+  })
+
+  afterEach(() => {
+    global.fetch = originalFetch as typeof fetch
+    console.warn = originalWarn
+  })
+
+  it('skips proxy for non-allowlisted external stylesheet URLs', async () => {
+    const htmlPayload = `
+      <!doctype html>
+      <html>
+        <head>
+          <title>Demo Site</title>
+          <link rel="stylesheet" href="https://cdn.invalid/css/demo.css" />
+          <link rel="stylesheet" href="styles/site.css" />
+        </head>
+        <body><h1>Site</h1></body>
+      </html>
+    `
+
+    const fetchMock = jest.fn(async (input: string | URL | Request) => {
+      const target = getProxyTarget(input)
+
+      if (target === htmlUrl) {
+        return mockResponse(200, htmlPayload)
+      }
+
+      if (target === proxiedCssUrl) {
+        return mockResponse(200, 'body { color: #111; }')
+      }
+
+      throw new Error(`Unexpected proxy target requested: ${target}`)
+    })
+
+    global.fetch = fetchMock as unknown as typeof fetch
+
+    const preview = new Preview('#site-frame')
+    await expect(preview.render(htmlUrl)).resolves.toBeUndefined()
+
+    const requestedTargets = fetchMock.mock.calls.map(([input]) =>
+      getProxyTarget(input as string | URL | Request),
+    )
+
+    expect(requestedTargets).toContain(htmlUrl)
+    expect(
+      requestedTargets.some((target) => target.includes('cdn.invalid')),
+    ).toBe(false)
+    expect(requestedTargets).toContain(proxiedCssUrl)
+  })
+
+  it('continues rendering when a proxied stylesheet fetch fails', async () => {
+    const failingCssUrl =
+      'https://raw.githubusercontent.com/example-owner/example-static-site/master/styles/failing.css'
+
+    const htmlPayload = `
+      <!doctype html>
+      <html>
+        <head>
+          <title>Demo Site</title>
+          <link rel="stylesheet" href="styles/failing.css" />
+        </head>
+        <body><h1>Site</h1></body>
+      </html>
+    `
+
+    const fetchMock = jest.fn(async (input: string | URL | Request) => {
+      const target = getProxyTarget(input)
+
+      if (target === htmlUrl) {
+        return mockResponse(200, htmlPayload)
+      }
+
+      if (target === failingCssUrl) {
+        return mockResponse(403, '{"message":"Target url is not allowed"}')
+      }
+
+      throw new Error(`Unexpected proxy target requested: ${target}`)
+    })
+
+    global.fetch = fetchMock as unknown as typeof fetch
+
+    const preview = new Preview('#site-frame')
+    await expect(preview.render(htmlUrl)).resolves.toBeUndefined()
+  })
+
+  it('continues rendering when a non-proxied external script fails', async () => {
+    const htmlPayload = `
+      <!doctype html>
+      <html>
+        <head>
+          <title>Demo Site</title>
+          <script src="https://cdn.invalid/app.js"></script>
+        </head>
+        <body><h1>Site</h1></body>
+      </html>
+    `
+
+    const fetchMock = jest.fn(async (input: string | URL | Request) => {
+      const target = getProxyTarget(input)
+
+      if (target === htmlUrl) {
+        return mockResponse(200, htmlPayload)
+      }
+
+      throw new Error(`Unexpected proxy target requested: ${target}`)
+    })
+
+    global.fetch = fetchMock as unknown as typeof fetch
+
+    const preview = new Preview('#site-frame')
+    const externalScriptSpy = jest
+      .spyOn(
+        preview as unknown as {
+          appendExternalScriptToHead: (
+            src: string,
+            type?: string,
+          ) => Promise<void>
+        },
+        'appendExternalScriptToHead',
+      )
+      .mockRejectedValue(new Error('external script load failure'))
+
+    await expect(preview.render(htmlUrl)).resolves.toBeUndefined()
+
+    expect(externalScriptSpy).toHaveBeenCalledWith(
+      'https://cdn.invalid/app.js',
+      undefined,
+    )
+  })
+
+  it('preserves non-module script types during deferred replay', async () => {
+    const htmlPayload = `
+      <!doctype html>
+      <html>
+        <head>
+          <title>Demo Site</title>
+          <script type="application/ld+json">
+            {"@context":"https://schema.org","name":"Demo"}
+          </script>
+        </head>
+        <body><h1>Site</h1></body>
+      </html>
+    `
+
+    const fetchMock = jest.fn(async (input: string | URL | Request) => {
+      const target = getProxyTarget(input)
+
+      if (target === htmlUrl) {
+        return mockResponse(200, htmlPayload)
+      }
+
+      throw new Error(`Unexpected proxy target requested: ${target}`)
+    })
+
+    global.fetch = fetchMock as unknown as typeof fetch
+
+    const preview = new Preview('#site-frame')
+    await expect(preview.render(htmlUrl)).resolves.toBeUndefined()
+
+    const doc =
+      document.querySelector<HTMLIFrameElement>('#site-frame')?.contentDocument
+    const scriptTypes = [...(doc?.querySelectorAll('script') ?? [])].map(
+      (script) => script.getAttribute('type'),
+    )
+
+    expect(scriptTypes).toContain('application/ld+json')
+  })
+
+  it('awaits single-url rendering before resolving', async () => {
+    const htmlPayload = `
+      <!doctype html>
+      <html>
+        <head>
+          <title>Delayed Demo Site</title>
+        </head>
+        <body><h1>Site</h1></body>
+      </html>
+    `
+
+    let resolveFetch:
+      | ((value: Response | PromiseLike<Response>) => void)
+      | undefined
+
+    const fetchMock = jest.fn(async (input: string | URL | Request) => {
+      const target = getProxyTarget(input)
+
+      if (target === htmlUrl) {
+        return await new Promise<Response>((resolve) => {
+          resolveFetch = resolve
+        })
+      }
+
+      throw new Error(`Unexpected proxy target requested: ${target}`)
+    })
+
+    global.fetch = fetchMock as unknown as typeof fetch
+
+    const preview = new Preview('#site-frame')
+    const renderPromise = preview.render(htmlUrl)
+    let isSettled = false
+    void renderPromise.then(() => {
+      isSettled = true
+    })
+
+    await Promise.resolve()
+    expect(isSettled).toBe(false)
+
+    resolveFetch?.(mockResponse(200, htmlPayload))
+    await expect(renderPromise).resolves.toBeUndefined()
+  })
+
+  it('resolves relative anchor clicks against base URI for in-preview navigation', async () => {
+    const expectedNavigationTarget =
+      'https://raw.githubusercontent.com/example-owner/example-static-site/master/docs/setup.html'
+    const htmlPayload = `
+      <!doctype html>
+      <html>
+        <head>
+          <title>Demo Site</title>
+        </head>
+        <body>
+          <a id="relative-nav" href="docs/setup.html">Setup Guide</a>
+        </body>
+      </html>
+    `
+
+    const fetchMock = jest.fn(async (input: string | URL | Request) => {
+      const target = getProxyTarget(input)
+
+      if (target === htmlUrl) {
+        return mockResponse(200, htmlPayload)
+      }
+
+      throw new Error(`Unexpected proxy target requested: ${target}`)
+    })
+
+    global.fetch = fetchMock as unknown as typeof fetch
+
+    const preview = new Preview('#site-frame')
+    await expect(preview.render(htmlUrl)).resolves.toBeUndefined()
+
+    const iframe = document.querySelector<HTMLIFrameElement>('#site-frame')
+    expect(iframe).toBeTruthy()
+    iframe?.dispatchEvent(new Event('load'))
+
+    const relativeLink =
+      iframe?.contentDocument?.querySelector<HTMLAnchorElement>('#relative-nav')
+    expect(relativeLink).toBeTruthy()
+
+    const clickEvent = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    })
+    const clickHandled = relativeLink?.dispatchEvent(clickEvent)
+
+    expect(clickHandled).toBe(false)
+    expect(gotoMock).toHaveBeenCalledWith(
+      `/${encodeURIComponent(expectedNavigationTarget)}`,
+    )
+  })
+
+  it('rewrites root-relative and hash links to remain in the proxied repo', async () => {
+    const htmlPayload = `
+      <!doctype html>
+      <html>
+        <head>
+          <title>Demo Site</title>
+        </head>
+        <body>
+          <a id="root-link" href="/files/press-pack-v2.zip">Press Pack</a>
+          <a id="hash-link" href="#overview">Overview</a>
+          <a id="relative-link" href="img/logo.png">Logo</a>
+        </body>
+      </html>
+    `
+
+    const fetchMock = jest.fn(async (input: string | URL | Request) => {
+      const target = getProxyTarget(input)
+
+      if (target === htmlUrl) {
+        return mockResponse(200, htmlPayload)
+      }
+
+      throw new Error(`Unexpected proxy target requested: ${target}`)
+    })
+
+    global.fetch = fetchMock as unknown as typeof fetch
+
+    const preview = new Preview('#site-frame')
+    await expect(preview.render(htmlUrl)).resolves.toBeUndefined()
+
+    const doc =
+      document.querySelector<HTMLIFrameElement>('#site-frame')?.contentDocument
+    expect(doc).toBeTruthy()
+
+    const rootLink = doc?.querySelector<HTMLAnchorElement>('#root-link')
+    const hashLink = doc?.querySelector<HTMLAnchorElement>('#hash-link')
+    const relativeLink = doc?.querySelector<HTMLAnchorElement>('#relative-link')
+
+    expect(rootLink?.getAttribute('href')).toBe('files/press-pack-v2.zip')
+    expect(hashLink?.getAttribute('href')).toBe('#overview')
+    expect(relativeLink?.getAttribute('href')).toBe('img/logo.png')
+  })
+
+  it('rewrites media and stylesheet URLs to absolute raw repo URLs', async () => {
+    const expectedImageUrl =
+      'https://raw.githubusercontent.com/example-owner/example-static-site/master/img/logo.png'
+    const expectedStylesheetUrl =
+      'https://raw.githubusercontent.com/example-owner/example-static-site/master/styles/site.css'
+
+    const htmlPayload = `
+      <!doctype html>
+      <html>
+        <head>
+          <title>Demo Site</title>
+          <link id="repo-css" rel="stylesheet" href="styles/site.css" />
+        </head>
+        <body>
+          <img id="hero" src="img/logo.png" />
+        </body>
+      </html>
+    `
+
+    const fetchMock = jest.fn(async (input: string | URL | Request) => {
+      const target = getProxyTarget(input)
+
+      if (target === htmlUrl) {
+        return mockResponse(200, htmlPayload)
+      }
+
+      if (target === expectedStylesheetUrl) {
+        return mockResponse(200, 'body { color: #111; }')
+      }
+
+      throw new Error(`Unexpected proxy target requested: ${target}`)
+    })
+
+    global.fetch = fetchMock as unknown as typeof fetch
+
+    const preview = new Preview('#site-frame')
+    await expect(preview.render(htmlUrl)).resolves.toBeUndefined()
+
+    const doc =
+      document.querySelector<HTMLIFrameElement>('#site-frame')?.contentDocument
+    expect(doc).toBeTruthy()
+
+    const hero = doc?.querySelector<HTMLImageElement>('#hero')
+    const css = doc?.querySelector<HTMLLinkElement>('#repo-css')
+
+    expect(hero?.getAttribute('src')).toBe(expectedImageUrl)
+    expect(css?.getAttribute('href')).toBe(expectedStylesheetUrl)
+  })
+
+  it('executes deferred scripts in order', async () => {
+    const libraryScriptUrl =
+      'https://raw.githubusercontent.com/example-owner/example-static-site/master/js/lib.js'
+
+    const htmlPayload = `
+      <!doctype html>
+      <html>
+        <head>
+          <title>Demo Site</title>
+          <script src="./js/lib.js"></script>
+          <script>
+            document.body.setAttribute(
+              'data-lib-loaded',
+              window.__libReady ? 'yes' : 'no',
+            )
+          </script>
+        </head>
+        <body><h1>Site</h1></body>
+      </html>
+    `
+
+    const fetchMock = jest.fn(async (input: string | URL | Request) => {
+      const target = getProxyTarget(input)
+
+      if (target === htmlUrl) {
+        return mockResponse(200, htmlPayload)
+      }
+
+      if (target === libraryScriptUrl) {
+        return mockResponse(200, 'window.__libReady = true;')
+      }
+
+      throw new Error(`Unexpected proxy target requested: ${target}`)
+    })
+
+    global.fetch = fetchMock as unknown as typeof fetch
+
+    const preview = new Preview('#site-frame')
+    await expect(preview.render(htmlUrl)).resolves.toBeUndefined()
+
+    const doc =
+      document.querySelector<HTMLIFrameElement>('#site-frame')?.contentDocument
+    expect(doc?.body.getAttribute('data-lib-loaded')).toBe('yes')
+  })
+
+  it('preserves script order for proxied and inline scripts', async () => {
+    const proxiedScriptUrl =
+      'https://raw.githubusercontent.com/example-owner/example-static-site/master/js/a.js'
+
+    const htmlPayload = `
+      <!doctype html>
+      <html>
+        <head>
+          <title>Demo Site</title>
+          <script src="./js/a.js"></script>
+          <script>
+            document.body.setAttribute('data-inline-order', window.__scriptOrder || 'missing')
+          </script>
+        </head>
+        <body><h1>Site</h1></body>
+      </html>
+    `
+
+    const fetchMock = jest.fn(async (input: string | URL | Request) => {
+      const target = getProxyTarget(input)
+
+      if (target === htmlUrl) {
+        return mockResponse(200, htmlPayload)
+      }
+
+      if (target === proxiedScriptUrl) {
+        return mockResponse(200, 'window.__scriptOrder = "proxied-first";')
+      }
+
+      throw new Error(`Unexpected proxy target requested: ${target}`)
+    })
+
+    global.fetch = fetchMock as unknown as typeof fetch
+
+    const preview = new Preview('#site-frame')
+    await expect(preview.render(htmlUrl)).resolves.toBeUndefined()
+
+    const doc =
+      document.querySelector<HTMLIFrameElement>('#site-frame')?.contentDocument
+    expect(doc?.body.getAttribute('data-inline-order')).toBe('proxied-first')
+  })
+})