Designer Cheatsheet

Quick reference for all Pebble data attributes. Copy-paste ready examples.

Core Attributes

Attribute	Values	Description
`data-pebble`	Unique ID	Makes element editable. ID must be unique per page.
`data-pebble-type`	`text` \| `link` \| `image`	Element type. Auto-detected from tag if not set.
`data-pebble-shared`	`true`	Syncs content across all pages.
`data-pebble-format`	`bold` `italic` `link` \| `none`	Allowed formatting. Space-separated. Default: all.

Text Pebbles

Basic Text

<h1 data-pebble="page-title">Page Title</h1>
<p data-pebble="intro">Introduction text...</p>

With Rich Text Formatting

<!-- All formatting (default) -->
<p data-pebble="description">
  Supports <strong>bold</strong>, <em>italic</em>, and <a href="#">links</a>.
</p>

<!-- Bold and italic only -->
<p data-pebble="tagline" data-pebble-format="bold italic">
  No links allowed here.
</p>

<!-- Bold only -->
<p data-pebble="highlight" data-pebble-format="bold">
  Only bold formatting.
</p>

<!-- Plain text (no formatting) -->
<span data-pebble="name" data-pebble-format="none">
  Plain text only.
</span>

Keyboard shortcuts: Ctrl+B (bold), Ctrl+I (italic), Ctrl+K (link)

Link Pebbles

<a href="/about" data-pebble="about-link" data-pebble-type="link">
  About Us
</a>

Clicking opens a modal to edit both text and URL.

Image Pebbles

<img src="hero.jpg"
     alt="Hero image"
     data-pebble="hero-image">

Click to upload new image. Auto-resized and optimized.

Shared Pebbles

<footer data-pebble="footer-copyright" data-pebble-shared="true">
  © 2025 Your Company
</footer>

Edit once, updates on all pages. Great for headers, footers, contact info.

Zones (Pro)

Attribute	Values	Description
`data-pebble-zone`	Unique ID	Creates multi-block content area.
`data-zone-toolbar`	Comma-separated	Toolbar buttons: `bold,italic,link,h2,h3,ul,ol`

<!-- Basic zone -->
<div data-pebble-zone="blog-content"></div>

<!-- Custom toolbar -->
<div data-pebble-zone="news" data-zone-toolbar="bold,italic,link,h3"></div>

Repeatables (Pro)

Attribute	Values	Description
`data-pebble-repeat`	Unique ID	Container for repeatable items.
`data-pebble-repeat-min`	Number	Minimum items allowed. Default: 1
`data-pebble-repeat-max`	Number	Maximum items allowed. Default: 10
`data-pebble-repeat-clone`	`true` \| `false`	Show clone/duplicate button. Default: true
`data-pebble-repeat-item`	(no value)	Add to each visible/existing item in the repeatable.
`data-pebble-repeat-template`	(none)	Hidden template for new items.

Supported Pebble Types

Inside repeatables, use any pebble type:

data-pebble="id" - Plain text (default)
data-pebble-type="rich" - Rich text with bold/italic/link
data-pebble-type="image" - Uploadable image
data-pebble-type="link" - Editable link (text + URL)

Team Section Example

<!-- Add padding-left for drag handles -->
<div style="padding-left: 56px;"
     data-pebble-repeat="team"
     data-pebble-repeat-min="1"
     data-pebble-repeat-max="12">

  <!-- Visible items -->
  <div data-pebble-repeat-item>
    <img data-pebble="photo" data-pebble-type="image" src="member1.jpg" alt="Photo">
    <h3 data-pebble="name">Jane Doe</h3>
    <p data-pebble="role">CEO</p>
    <p data-pebble="bio" data-pebble-type="rich">Bio with <strong>formatting</strong>.</p>
    <a data-pebble="link" data-pebble-type="link" href="#">Portfolio</a>
  </div>

  <!-- Template (hidden until cloned) -->
  <div data-pebble-repeat-template>
    <img data-pebble="photo" data-pebble-type="image" src="placeholder.jpg" alt="Photo">
    <h3 data-pebble="name">New Member</h3>
    <p data-pebble="role">Role</p>
    <p data-pebble="bio" data-pebble-type="rich">Bio goes here...</p>
    <a data-pebble="link" data-pebble-type="link" href="#">Link</a>
  </div>
</div>

Editing Controls

Add: Click + button to add new item from template
Delete: Click trash icon to remove item
Clone: Click duplicate icon to copy item
Reorder (desktop): Drag the handle on left side
Reorder (mobile): Use up/down arrow buttons

Product Cards Example

<div class="products" style="padding-left: 56px;"
     data-pebble-repeat="products"
     data-pebble-repeat-max="24">

  <div class="product-card" data-pebble-repeat-item>
    <img data-pebble="image" data-pebble-type="image" src="product1.jpg" alt="Product">
    <h3 data-pebble="name">Product Name</h3>
    <p data-pebble="price">$99.00</p>
    <p data-pebble="description" data-pebble-type="rich">Product description...</p>
    <a data-pebble="buy-link" data-pebble-type="link" href="#">Buy Now</a>
  </div>

  <div class="product-card" data-pebble-repeat-template>
    <img data-pebble="image" data-pebble-type="image" src="placeholder.jpg" alt="Product">
    <h3 data-pebble="name">New Product</h3>
    <p data-pebble="price">$0.00</p>
    <p data-pebble="description" data-pebble-type="rich">Description...</p>
    <a data-pebble="buy-link" data-pebble-type="link" href="#">Buy Now</a>
  </div>
</div>

Event Listings Example

<div class="events" style="padding-left: 56px;"
     data-pebble-repeat="events"
     data-pebble-repeat-max="20">

  <article class="event" data-pebble-repeat-item>
    <time data-pebble="date">January 15, 2025</time>
    <h3 data-pebble="title">Annual Conference</h3>
    <p data-pebble="location">Convention Center, NYC</p>
    <p data-pebble="details" data-pebble-type="rich">Event details...</p>
    <a data-pebble="register" data-pebble-type="link" href="#">Register</a>
  </article>

  <article class="event" data-pebble-repeat-template>
    <time data-pebble="date">Date</time>
    <h3 data-pebble="title">Event Title</h3>
    <p data-pebble="location">Location</p>
    <p data-pebble="details" data-pebble-type="rich">Details...</p>
    <a data-pebble="register" data-pebble-type="link" href="#">Register</a>
  </article>
</div>

Testimonials Example

<div class="testimonials" style="padding-left: 56px;"
     data-pebble-repeat="testimonials"
     data-pebble-repeat-max="10">

  <blockquote data-pebble-repeat-item>
    <p data-pebble="quote" data-pebble-type="rich">"Great product, highly recommend!"</p>
    <cite>
      <img data-pebble="avatar" data-pebble-type="image" src="avatar1.jpg" alt="Photo">
      <span data-pebble="author">Jane Smith</span>
      <span data-pebble="company">CEO, TechCorp</span>
    </cite>
  </blockquote>

  <blockquote data-pebble-repeat-template>
    <p data-pebble="quote" data-pebble-type="rich">"Quote text..."</p>
    <cite>
      <img data-pebble="avatar" data-pebble-type="image" src="placeholder.jpg" alt="Photo">
      <span data-pebble="author">Name</span>
      <span data-pebble="company">Company</span>
    </cite>
  </blockquote>
</div>

Portfolio/Gallery Example

<div class="portfolio" style="padding-left: 56px;"
     data-pebble-repeat="portfolio"
     data-pebble-repeat-max="30">

  <figure data-pebble-repeat-item>
    <img data-pebble="image" data-pebble-type="image" src="work1.jpg" alt="Project">
    <figcaption>
      <h3 data-pebble="title">Project Name</h3>
      <span data-pebble="category">Web Design</span>
      <a data-pebble="link" data-pebble-type="link" href="#">View Project</a>
    </figcaption>
  </figure>

  <figure data-pebble-repeat-template>
    <img data-pebble="image" data-pebble-type="image" src="placeholder.jpg" alt="Project">
    <figcaption>
      <h3 data-pebble="title">New Project</h3>
      <span data-pebble="category">Category</span>
      <a data-pebble="link" data-pebble-type="link" href="#">View</a>
    </figcaption>
  </figure>
</div>

Navigation Example

<nav data-pebble-repeat="main-nav" data-pebble-repeat-max="8">
  <a href="/" data-pebble="link" data-pebble-type="link"
     data-pebble-repeat-item>Home</a>
  <a href="/about" data-pebble="link" data-pebble-type="link"
     data-pebble-repeat-item>About</a>
  <a href="#" data-pebble="link" data-pebble-type="link"
     data-pebble-repeat-template>New Link</a>
</nav>

Script Setup

<!-- Add before </body> -->
<script>
  window.PEBBLE_CONFIG = {
    basePath: 'pebble/'  // Path to pebble folder
  };
</script>
<script src="pebble/js/pebble.js"></script>

Quick Tips

Login: Add #login to any page URL
Control Panel: Click sliders icon in toolbar
Unique IDs: Each data-pebble ID must be unique per page
Shared IDs: Use same ID across pages for shared content
Format control: Use data-pebble-format="none" for plain text fields

Keyboard Shortcuts

Shortcut	Action
`Ctrl+S`	Save current pebble (with visual feedback)
`Ctrl+Shift+E`	Toggle Inspector Mode (shows pebble IDs)
`Ctrl+B`	Bold text (in rich text pebbles)
`Ctrl+I`	Italic text (in rich text pebbles)
`Ctrl+K`	Insert/edit link (in rich text pebbles)
`Escape`	Close modal / exit edit mode / dismiss inspector

Note: On Mac, use Cmd instead of Ctrl.

Next Steps

Usage Guide - Detailed explanations
Installation - Set up Pebble
API Reference - Config options