Add Pretzel to any website

You add one script tag to your existing site, mark the elements you want to be editable, and Pretzel gives the site's owner a safe, in-browser way to update that content—without touching your code, your layout, or your hosting.

The core principle: you own layout, Pretzel owns content editing

This is the most important thing to understand, and it shapes everything else:

• Your site owns its structure, layout, styling, and responsive behavior. How things are arranged, how they look, how they adapt across screen sizes—all of that lives in your code, exactly as it always has. Pretzel never touches it.
• Pretzel adds an editing layer for content. It lets the right person (the site owner, signed in) change the content inside the structure you built: the text in a heading, the image in a slot, the documents in a library, the photos in a carousel.

The line is simple: layout and design are yours; content editing is Pretzel's. When a client wants to change what a headline says or swap a photo, that's Pretzel. When they want to change how something is arranged or styled, that's a change you make in the site's code. Keeping that separation is what lets Pretzel stay lightweight and work on any site, regardless of how it was built.

1. Add the Pretzel embed script to your site (get your personalized snippet from your dashboard after signing up).
2. Add data-ve attributes to the elements you want to be editable.
3. That's it—signed-in site owners can now edit those elements in the browser.

<script
  src="https://pretzel-it.com/embed.js"
  data-domain="yoursite.com"
  data-elements='[...]'
  strategy="afterInteractive">
</script>

Sign up to get your site's personalized embed snippet.

Rather than hand-tagging every element, you can scan your site's URL and Pretzel's AI will automatically detect your text and image content and generate the data-ve attributes for you. This handles the bulk of making a site editable—no need to manually add data-ve to dozens of headings, paragraphs, and images.

The scanner detects editable text and images. The richer collection features—document libraries and image carousels—are added intentionally by placing their containers (data-ve-doclist, data-ve-carousel) where you want them. These are structural choices you make as the developer, not content the scanner infers from the page.

To make any text or image element editable, add a data-ve attribute with a unique name:

<h1 data-ve="homepage-headline">Welcome to Our Site</h1>
<p data-ve="homepage-intro">We help local seniors live independently.</p>

The one rule: keys must be unique across your entire site

Every data-ve key must be unique across the whole site, not just within a single page. Pretzel stores all published content in one place keyed by these names. If two different elements—even on different pages—share the same key, publishing one will overwrite the other.

Buttons and links can be made editable too—add data-ve just like any other element:

<a href="/membership" data-ve="join-button">Become a Member</a>

Because clicking a button or link normally triggers its action (navigating, submitting, opening a dialog), Pretzel doesn't hijack that click for editing. Instead, in edit mode it shows a small pencil icon on the element: the button keeps working exactly as it should, and the pencil is what opens the label editor. No special setup—just add data-ve and Pretzel handles the rest.

For an image to be editable, Pretzel needs a real <img> element to swap the source on. A few rules:

• Put data-ve directly on the <img> tag, not on a wrapping <div>.
• Use a real <img> element, not a CSS background-image. Pretzel edits <img> src attributes; it cannot edit CSS backgrounds. If you want an editable hero background, use a real <img> positioned behind your content (see below), not a CSS background.

<!-- Right -->
<img data-ve="team-photo" src="/team.jpg" alt="Our team" />

<!-- Wrong - data-ve on the wrapper, not the img -->
<div data-ve="team-photo"><img src="/team.jpg" /></div>

Editable background/hero images

To make a full-bleed hero background editable, use a real <img> positioned behind your overlaid content, and make sure any overlay on top of it doesn't block interaction:

• Place the <img> as the bottom layer (e.g. absolutely positioned, object-fit: cover).
• Any gradient or color overlay on top should have pointer-events: none so it doesn't intercept clicks meant for the image.
• Your overlaid content (headings, buttons) sits on top at a higher z-index.

A document library lets the site owner upload, download, and delete PDF documents—organized into fixed, labeled sections. Ideal for newsletters, board minutes, reports, or any downloadable files that get updated over time.

Add an empty container where you want the document list to appear:

<h2>Newsletters</h2>
<div data-ve-doclist="newsletters"></div>

• Leave the container empty—Pretzel fills it with the download list (for visitors) and the upload/manage controls (for signed-in owners).
• Each section name must be unique across the site, same as data-ve keys.
• Documents sort newest-first automatically.
• PDFs up to 20MB.

An image carousel lets the site owner manage a set of rotating hero/banner images—upload, reorder, caption, and delete them—displayed as an auto-rotating crossfade slideshow.

Add an empty container where the carousel should appear:

<div data-ve-carousel="hero"></div>

• Leave the container empty—Pretzel renders the rotating images (for visitors) and the management controls (for signed-in owners).
• Carousel names must be unique across the site.
• The owner can add any number of images, reorder them with up/down controls, set alt text (for accessibility), and give each a caption.
• Images up to 10MB.
• Respects prefers-reduced-motion (shows a single static image if the visitor has reduced motion enabled).

Carousels in layered heroes

If you place a carousel inside a heavily-layered hero (with content overlaid on top of the images), give the carousel container a defined height in your CSS, and make sure overlaid content uses appropriate pointer-events handling so it doesn't block the carousel's edit controls. Pretzel's edit-mode UI renders above your content, but the host layout should give the carousel a real height to fill.

A section toggle lets the site owner show or hide a pre-built section of the page—for example, a second row of services, a seasonal banner, or a promotional block—through Pretzel's edit mode. You (the developer) build the section and set whether it's hidden by default; the owner can then reveal or hide it themselves, with no code changes.

Mark a section as toggle-able with data-ve-toggle, and set its default hidden state with your own CSS (e.g. a hidden class):

<div data-ve-toggle="second-services-row"
     data-ve-toggle-label="Add services row"
     class="hidden grid grid-cols-1 sm:grid-cols-4 gap-8">
  ...your section content...
</div>

• data-ve-toggle="unique-name"—marks the section as toggle-able. The name must be unique across the site (same rule as data-ve keys).
• data-ve-toggle-label="Your label"—optional. Sets the text on the show button (e.g. "Add services row"). If omitted, it falls back to a generic "Show section".
• Default state: whether the section starts shown or hidden is controlled by your CSS. Add a hidden class (or your own hiding rule) to start it hidden; leave it off to start it shown.

How it behaves

• In edit mode, a hidden section shows a discoverable "+ [label]" button exactly where the section would appear. Clicking it reveals the section.
• A visible section shows a matching "− Hide section" control.
• A floating "Hidden sections" list is also available as a backup way to reveal any hidden section.
• When revealed, the section displays using your own CSS layout (grid, flex, etc.)— Pretzel toggles visibility only and never overrides your layout.
• The shown/hidden state persists: the owner publishes it, and visitors see the section in the chosen state.