Usage

Learn how to make your HTML editable with Pebble's data attributes.

Basic Pebbles

Add data-pebble to any element to make it editable:

<h1 data-pebble="page-title">Welcome</h1>
<p data-pebble="intro-text">Your content here...</p>

Each pebble needs a unique ID. When logged in, click any pebbled content to edit it inline. Changes save automatically.

Rich Text Formatting

Text pebbles support inline formatting: bold, italic, and links.

Keyboard shortcuts:

  • Ctrl+B - Bold
  • Ctrl+I - Italic
  • Ctrl+K - Insert/edit link

On desktop, select text to see the formatting toolbar. On mobile, use the bottom bar.

Controlling Available Formats

Use data-pebble-format to limit which formatting options are available:

<!-- All formats (default) -->
<p data-pebble="description">Supports bold, italic, and links.</p>

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

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

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

Format options: bold, italic, link (space-separated), or none for plain text.

Link Pebbles

Edit both the text and URL of links with data-pebble-type="link":

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

Clicking a link pebble opens a modal to edit both the link text and destination URL.

Image Pebbles

Make images replaceable:

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

Clicking an image pebble opens an upload dialog. Images are automatically:

  • Resized to configurable max dimensions (default: 1920px)
  • Optimized for web (JPEG quality: 85)
  • Stored in pebble/data/uploads/

Rich Text (Zones)

For multi-block content areas like blog posts or news sections, use zones:

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

Zones provide:

  • Multi-block editing (paragraphs, headings, lists)
  • Basic formatting (bold, italic, links)
  • Add/remove content blocks
  • Reorder blocks

Customize the toolbar with data-zone-toolbar:

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

Shared Pebbles

Content that appears on multiple pages (like footer text or contact info) can be shared:

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

Edit once, updates everywhere. Shared pebbles are stored in pebble/data/shared/ and sync across all pages.

Repeatable Pebbles

For lists that grow or shrink (team members, testimonials, features):

<div data-pebble-repeat="team-members" data-pebble-repeat-min="1" data-pebble-repeat-max="10">
  <div data-pebble-repeat-item>
    <img data-pebble="photo" data-pebble-type="image" src="photo.jpg" alt="Photo">
    <h3 data-pebble="name">Team Member</h3>
    <p data-pebble="role">Role</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>
  <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>

Container Attributes

  • data-pebble-repeat - Unique ID for this repeatable
  • data-pebble-repeat-min - Minimum items (default: 1)
  • data-pebble-repeat-max - Maximum items (default: 10)
  • data-pebble-repeat-clone - Set to "false" to hide clone/duplicate button

Item Attributes

  • data-pebble-repeat-item - Marks existing items
  • data-pebble-repeat-template - Hidden template for new items

Pebble Types in Repeatables

Repeatables support all pebble types:

  • Text - Default, inline editing
  • Rich text - data-pebble-type="rich" for bold/italic/link formatting
  • Images - data-pebble-type="image" for uploadable images
  • Links - data-pebble-type="link" for editable text + URL

Editing Features

  • Add/Remove - Use the + button to add items, trash icon to remove
  • Drag to reorder - On desktop, drag the handle to reorder items
  • Mobile reorder - On touch devices, use up/down arrow buttons
  • Clone/Duplicate - Click the clone button to duplicate an item

Layout Tips

Add left padding to your container to make room for the drag handle and reorder buttons:

<div style="padding-left: 56px;" data-pebble-repeat="team">
  ...
</div>

Navigation Bars

Make navigation fully editable by combining repeatables with link pebbles:

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

Control Panel

Click the sliders icon in the admin bar to open the Control Panel:

  • Dashboard - Stats, recent activity, quick actions
  • Content - Manage all pebbles and zones
  • Media - Browse and manage uploaded images
  • Users - Multi-user management (Pro)
  • Backups - Create and restore backups
  • Activity - View activity logs and audit trail
  • Settings - Timezone, preferences, auth key

Multi-User Management (Pro)

Pro users can add multiple editors with role-based permissions:

  • Admin - Full access: manage users, settings, backups, and all content
  • Editor - Edit content only: cannot manage users or change settings

Open Control Panel > Users to:

  • Add new users with username, password, and role
  • Edit existing user roles and passwords
  • Remove users (cannot remove yourself)

Activity logs track which user made each change.

White-Label Mode (Pro)

White-label mode removes Pebble branding for a seamless client experience:

  • Toolbar shows no logo
  • Login modal shows "Login" instead of "Pebble"
  • Control Panel header shows "Settings"
  • Help links and upgrade prompts are hidden

Enable white-label mode in config.php:

define('PEBBLE_WHITE_LABEL', true);

You can also enable it during installation via the Pro installer's toggle.

Control Panel Tab Visibility (Pro)

Agencies can hide Control Panel tabs their clients don't need. Configure in config.php:

// Hide specific tabs (set to false)
define('PEBBLE_CP_SHOW_MEDIA', true);     // Image gallery
define('PEBBLE_CP_SHOW_USERS', true);     // User management
define('PEBBLE_CP_SHOW_BACKUPS', true);   // Backup/restore
define('PEBBLE_CP_SHOW_ACTIVITY', true);  // Activity log
define('PEBBLE_CP_SHOW_SETTINGS', true);  // Settings/config

The Content tab is always visible and cannot be hidden.

Activity Log Settings

Configure activity logging in Control Panel > Activity:

  • Max Entries - Limit total log entries (100-10,000, or unlimited)
  • Pagination - Browse 25 entries per page
  • Timezone - Set in Dashboard tab for correct timestamps

Logging In

Three ways to access the login dialog:

  1. Add #login to any page URL
  2. Click "Login to Edit" if your theme includes it
  3. The login button appears automatically when Pebble detects pebbles on the page

Adding E-Commerce

Pebble works seamlessly with third-party e-commerce services. Choose the option that fits your needs:

Stripe Payment Links (Simplest)

Best for 1-5 products, digital downloads, or donations. No monthly fees—just standard Stripe processing (2.9% + 30¢).

  1. Create a Payment Link in your Stripe Dashboard
  2. Add a buy button to your HTML:
<a href="https://buy.stripe.com/your-link-id"
   class="buy-button"
   data-pebble="buy-button-text">
  Buy Now - $29
</a>

The link text is editable via Pebble. Stripe handles checkout, payment, and receipts.

Snipcart (Full Shopping Cart)

Best for multiple products with cart functionality. Products defined in HTML—perfect for Pebble sites.

Setup:

  1. Sign up at snipcart.com (2% per sale, $10/month minimum)
  2. Add their script before </body>:
<script src="https://cdn.snipcart.com/themes/v3/default/snipcart.js"></script>
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3/default/snipcart.css">
<div id="snipcart" data-api-key="YOUR_PUBLIC_API_KEY" hidden></div>

Product markup:

<div class="product">
  <img data-pebble="product-image" data-pebble-type="image" src="product.jpg" alt="Product">
  <h3 data-pebble="product-name">T-Shirt</h3>
  <p data-pebble="product-description">Comfortable cotton tee.</p>
  <span data-pebble="product-price">$25.00</span>
  <button class="snipcart-add-item"
    data-item-id="tshirt-001"
    data-item-price="25.00"
    data-item-name="T-Shirt"
    data-item-url="/products">
    Add to Cart
  </button>
</div>

Edit product name, description, and image with Pebble. Update the data-item-* attributes manually when prices change.

Lemon Squeezy (Digital Products)

Best for software, courses, ebooks. Handles global taxes (VAT) as Merchant of Record. 5% + 50¢ per transaction.

  1. Create products at lemonsqueezy.com
  2. Get your checkout link from the product page
  3. Add to your HTML:
<a href="https://yourstore.lemonsqueezy.com/checkout/..."
   class="buy-button"
   data-pebble="digital-product-cta">
  Download Now - $49
</a>

For overlay checkout (stays on your site), add their script:

<script src="https://assets.lemonsqueezy.com/lemon.js" defer></script>

Print-on-Demand

Sell custom merchandise without inventory. Combine Snipcart with a fulfillment service:

  • Printful — Quality control, 461+ products
  • Printify — Lower costs, 1300+ products

Both integrate with Snipcart via webhooks. Products display on your Pebble site; orders route to the fulfillment service automatically.

Next Steps