What to tell AI when you want to use Direct Edit.

Must-have: Send this to AI first

It gives AI the context of what Direct Edit can do and what you need from it. Send it before your concrete task (or together with it and your HTML).

I will use the Direct Edit editor (directedit.dev) on my static HTML website. Before I give you a concrete task, follow these rules:

What Direct Edit can do:
- Works on a static website made of HTML, CSS and JS – not on a CMS or server-side framework (e.g. WordPress, Shopify).
- Editing happens directly on the page by clicking. The editor reads and saves straight into the HTML files; it uses no database.
- Editable automatically, without any special attributes: text, links, images, icons (Font Awesome / Bootstrap) and background images.
- Only two things need special HTML: duplicable blocks and videos (I will describe them below when I need them).

What NOT to do:
- Do not add any data-* attributes to elements for the editor; it is not necessary. They work on their own and unnecessary attributes only clutter the site.
- Do not touch the folder where the editor itself runs.

Must-have: Website rules do not break the editor

I use Direct Edit on a static HTML website. Prepare .htaccess like this:

- rules must not block or rewrite editor URLs,
- clean URL rules or .html removal rules must not affect URLs such as proxy.php?file=pricing.html,
- if the editor is in the [FILL-IN-HERE] folder, add this exception directly below RewriteEngine On / RewriteBase /:

  RewriteRule ^[FILL-IN-HERE]/ - [L]

Keep all other working website redirects as they are.

Elements can be duplicated by the editor

Use this for pricing, team members, testimonials, FAQ or other repeated blocks/cards.

Video guide for copying elements: VIDEO TUTORIAL. The same link is also available inside the editor under Instructions + FAQ.

I want to enable copying and deleting of repeated blocks in Direct Edit on a static HTML website.

Update the HTML below so [FILL-IN-HERE] can be duplicated and deleted in the editor. Do not change the design, CSS classes, structure or the content of the individual cards – only add the attributes described below. Keep responsiveness in mind, since cards will be added and removed.

How it works:
- The attribute goes on the SHARED PARENT element (the container). Its DIRECT CHILDREN are what gets copied and deleted.
- data-direct-edit-duplicable-selector=""  → all direct children of the container are duplicable.
- data-direct-edit-duplicable-selector=".card"  → only the direct children matching the CSS selector are duplicable (multiple selectors separated by commas).
- data-direct-edit-duplicable-min="N"  → optional; the editor will not delete below N items.
- data-direct-edit-duplicable-max="M"  → optional; the editor will not add above M items.

Put the attribute on the EXISTING container; do not create a new wrapper for it.

Example – a card container, copying and deleting without limits:

<div class="cards" data-direct-edit-duplicable-selector="">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

Example – only .card items are duplicable, always at least 1 and at most 6:

<div class="cards" data-direct-edit-duplicable-selector=".card" data-direct-edit-duplicable-min="1" data-direct-edit-duplicable-max="6">
  <div class="card">...</div>
</div>

So videos can be edited in the editor

Direct Edit can edit two kinds of video: embedded players (YouTube, Vimeo) as a standard <iframe>, and local video files (MP4, WebM, OGG) as a standard <video>. For a video to be editable, it must be written in the HTML in one of these two ways.

I use Direct Edit and I want the videos on my website to be editable.

Please update the HTML below so videos are written in a standard way, because only then can Direct Edit edit them:

- embed YouTube or Vimeo as a standard <iframe> pointing to the embed URL (e.g. https://www.youtube.com/embed/... or https://player.vimeo.com/video/...),
- add a local video file (MP4, WebM or OGG) as a standard <video> with a nested <source src="...">,
- do not use custom JS players or <div> elements that load the video via script — those cannot be edited.

Keep the existing design, CSS classes and video dimensions.

Embedded player example:

<iframe src="https://www.youtube.com/embed/[FILL-IN-HERE]" title="Video" allowfullscreen></iframe>

Local file example:

<video controls>
  <source src="videos/[FILL-IN-HERE].mp4" type="video/mp4">
</video>