Auto Views

Auto-discovered 30°

Introduction

Auto Views lets Fold discover view elements automatically without requiring data-foldpage-view attributes in your markup. Add a single attribute to the layout container and Fold handles the rest.

<div class="foldpage"
     data-foldpage-view-layout="helix"
     data-foldpage-view-layout-rotation="30"
     data-foldpage-view-auto="h2">

  <header data-foldpage-view="0">Head</header>
  <section class="panel">
    <h2>Introduction</h2>  <!-- auto-tagged -->
    <p>Content</p>
  </section>
</div>

Auto-discovered 60°

How It Works

When Fold processes a container with data-foldpage-view-auto, it runs a pre-pass before the layout engine. Each discovered element receives data-foldpage-view="" at runtime — the original HTML is unchanged.

The merge approach means elements already carrying data-foldpage-view are never touched. Hand-authored view markup always takes precedence.

Auto-discovered 90°

Heading Mode

When the selector is a single heading tag (h1–h6), Fold uses ancestor-walk mode: it finds the highest ancestor within the container that contains exactly that one heading, and tags that ancestor as the view.

This means your natural section structure — <section>, <article>, or any block wrapper containing one heading — becomes a view automatically.

Auto-discovered 120°

Content Splitting

When multiple headings share the same direct parent (a flat structure), Fold automatically splits the content by injecting wrapper divs around each heading and its following siblings.

<!-- Flat source — headings share a parent -->
<div class="foldpage" data-foldpage-view-auto="h2">
  <p>Intro (left in place)</p>
  <h2>Section A</h2>  <!-- gets wrapped -->
  <p>Content A</p>
  <h2>Section B</h2>  <!-- gets wrapped -->
  <p>Content B</p>
</div>

Auto-discovered 150°

Configuration

The selector can be set via data attribute or JavaScript API. Any querySelectorAll-compatible value is accepted.

<!-- Data attribute (per-container) -->
data-foldpage-view-auto="h2"
data-foldpage-view-auto="h3"
data-foldpage-view-auto=".card"
data-foldpage-view-auto="section.view"

// JavaScript API (global default)
Fold.init({
  viewLayout: {
    type: 'helix',
    viewAuto: 'h2',
    rotation: 30,
  }
});