Auto Views

data-foldpage-view-auto=".card" — Fold tags each .card as a view.
Any valid CSS selector works: classes, tags, attributes, or compound selectors.

Auto-discovered .card

Selector Mode

When the data-foldpage-view-auto value is not a heading tag, Fold uses direct selection mode: it calls querySelectorAll on the container and tags every matching element. 

<div class="foldpage"
     data-foldpage-view-layout="ring"
     data-foldpage-view-auto=".card">

  <header data-foldpage-view="0">Head</header>
  <div class="card">Card 1</div>  <!-- auto-tagged -->
  <div class="card">Card 2</div>  <!-- auto-tagged -->
</div>
This .card has no data-foldpage-view in source. Fold assigned it at runtime via the .card selector.

Auto-discovered .card

Any CSS Selector

The selector accepts any valid querySelectorAll string — class names, tag names, attribute selectors, or compound selectors. 

<!-- Class selector -->
data-foldpage-view-auto=".card"

<!-- Tag selector -->
data-foldpage-view-auto="section"

<!-- Attribute selector -->
data-foldpage-view-auto="[data-panel]"

<!-- Compound selector -->
data-foldpage-view-auto="article.feature"
Comma-separated multi-selectors also work: data-foldpage-view-auto=".card, .panel"

Auto-discovered .card

Merge Approach

Auto-views skips elements that already have data-foldpage-view set. This makes it safe to mix hand-authored view markup with auto-discovery in the same container. 

<div data-foldpage-view-layout="ring"
     data-foldpage-view-auto=".card">

  <!-- Manually positioned at slot 3, skipped by auto-views -->
  <div class="card" data-foldpage-view="3">Pinned</div>

  <!-- These are auto-discovered (no existing attribute) -->
  <div class="card">Auto A</div>
  <div class="card">Auto B</div>
</div>
The head view (data-foldpage-view="0") is always manually marked — auto-views never creates or moves the head.

Auto-discovered .card

Works with Any Layout

Auto-views works with all layout types: ring, grid, random, and helix. The discovery pass runs before the layout engine, so the layout sees the same view structure as if the attributes were hand-authored. 

<!-- Ring layout with selector auto-views -->
data-foldpage-view-layout="ring"
data-foldpage-view-auto=".card"

<!-- Grid layout with heading auto-views -->
data-foldpage-view-layout="grid"
data-foldpage-view-auto="h2"

<!-- Helix layout with heading auto-views -->
data-foldpage-view-layout="helix"
data-foldpage-view-auto="h2"
See Auto Views: Headings for the heading-mode demo with helix layout.

Auto-discovered .card

JavaScript API

The selector can also be set globally through Fold.init() or updated live via Fold.set(): 

// Global default via init
Fold.init({
  viewLayout: {
    type: 'ring',
    viewAuto: '.card',
  }
});

// Data attribute takes precedence over viewAuto
// data-foldpage-view-auto on the container overrides
// the viewAuto value from Fold.init()
Per-container data attributes always take precedence over the global viewAuto option in Fold.init().

Auto-discovered .card

Cleanup on Destroy

Auto-views is fully reversible. When Fold.destroy() is called, all runtime-assigned data-foldpage-view attributes are removed and any injected wrapper divs are unwrapped — the DOM is restored to its original source state. 

// Auto-view attributes are removed on destroy
Fold.destroy();

// Re-init re-runs the auto-discovery pass
Fold.init({ viewLayout: { viewAuto: '.card' } });
Cleanup ensures auto-views is safe for single-page app architectures where Fold may be mounted and unmounted multiple times.