Autonnel v0.1.0
Get started

HTML editor

Paste raw HTML and edit it visually — for pages outside the component model.

The HTML editor path lets you create a page from raw HTML markup. Use it when you want to ship a page that does not fit the Puck component model — for example, an externally designed page, an imported competitor page, or a one-off promotional layout.

Creating an HTML page

  1. Go to Pages and click New page.
  2. Select HTML editor.
  3. Enter a name and slug.
  4. Click Create.

The page opens in the visual HTML editor. You can paste your HTML directly into the code view, or import from a URL (see below).

URL import

The HTML editor includes a one-click import feature. Instead of pasting HTML manually, enter the URL of any publicly accessible page, and autonnel will fetch and import it.

The import flow:

  1. Click Import from URL in the editor toolbar.
  2. Enter the target URL.
  3. autonnel fetches the page HTML server-side.
  4. Static assets referenced in the HTML (images, stylesheets, scripts) are downloaded and uploaded to your configured storage bucket.
  5. Relative URLs in the HTML are rewritten to point to your CDN domain.
  6. The resulting HTML is loaded into the editor.

S3 and a CDN domain must be configured in Settings → Storage before URL import works. If they are not configured, the import button is disabled.

Editing

The HTML editor provides two editing modes:

  • Visual mode — a canvas where you can click elements to select them, drag them, and edit text inline.
  • Code mode — a raw HTML and CSS editor.

The HTML editor is best suited for:

  • Editing text content and headings.
  • Swapping images.
  • Adjusting colors, spacing, and font sizes.
  • Simple layout rearrangements.

It is not a full design tool. For complex structural changes, editing in code mode is usually faster.

Limitations compared to Puck pages

HTML pages differ from Puck pages in several ways:

  • No funnel-aware link types. Links are plain href attributes. You cannot use funnel-cta link resolution. CTA buttons must point to a hard-coded URL.
  • No Island rendering. The entire page is either SSR’d as static HTML or rendered client-side. There is no selective component hydration.
  • No component-based A/B testing. A/B tests operate at the funnel level, not the component level, and require Puck-based pages.
  • Tracking script is not auto-injected. On Puck pages the tracking script is included automatically. On HTML pages you must add the tracking script tag manually if you want page visit events recorded.

When to use each editor

ScenarioRecommended editor
Building a funnel step from scratchPuck
Customizing a bought or designed templatePuck
Importing a competitor or reference pageHTML editor
One-off promotional landing page from a designerHTML editor
Page that must match an existing brand stylesheetHTML editor

If a page will be part of a funnel flow where visitors proceed to checkout, prefer Puck. HTML pages cannot use funnel-aware CTAs and require manual URL management if the funnel structure changes.

Caveats

  • S3 must be configured before URL import works. Attempting to import without storage configured will show an error.
  • Anti-bot and hotlink protection. Some sites block server-side HTTP requests or use Cloudflare challenges. The import may fail for these pages. If so, download the HTML manually and paste it into the code editor.
  • Tracking script is manual. Add <script src="/autonnel-tracking.js"></script> (or the appropriate path for your deployment) to the HTML <head> if you want visitor tracking.
  • No autosave. HTML page content is saved when you explicitly click Save in the editor, not automatically on each change.