PACE Pattern

Appearance

Minimal Example ​

The simplest PACE app possible - perfect for learning.

Overview ​

This example demonstrates PACE.js in its most basic form:

  • ✅ Single HTML file
  • ✅ No build step
  • ✅ CDN-based (no npm)
  • ✅ 3 products
  • ✅ No AI (placeholder chat)
  • ✅ Default theme

Perfect for: Learning PACE basics, prototyping, quick demos

Complete Code ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minimal PACE App</title>

  <!-- PACE.js CSS from CDN -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticintent/pace-pattern/dist/pace.min.css">
</head>
<body>
  <!-- PACE container -->
  <div id="app"></div>

  <script type="module">
    // Import PACE from CDN
    import { PACE } from 'https://cdn.jsdelivr.net/npm/@semanticintent/pace-pattern/dist/pace.esm.js'

    // Create PACE instance
    const pace = new PACE({
      container: '#app',

      // Inline products (no external JSON file needed)
      products: {
        products: [
          {
            id: 'starter',
            name: 'Starter Kit',
            tagline: 'Everything you need to get started',
            category: 'Getting Started',
            description: '## Starter Kit\n\nPerfect for beginners. Includes:\n\n- Quick setup guide\n- Example code\n- Documentation\n- Support',
            action_label: 'Get Started',
            action_url: 'https://example.com/starter'
          },
          {
            id: 'pro',
            name: 'Pro Tools',
            tagline: 'Advanced features for power users',
            category: 'Advanced',
            description: '## Pro Tools\n\nFor experienced users:\n\n- Advanced features\n- Custom configurations\n- Priority support\n- Team collaboration',
            action_label: 'Upgrade',
            action_url: 'https://example.com/pro'
          },
          {
            id: 'enterprise',
            name: 'Enterprise Suite',
            tagline: 'Full-featured solution for teams',
            category: 'Enterprise',
            description: '## Enterprise Suite\n\nComplete solution:\n\n- Unlimited users\n- SSO integration\n- Dedicated support\n- Custom SLA',
            action_label: 'Contact Sales',
            action_url: 'https://example.com/enterprise'
          }
        ]
      },

      // Optional: Custom greeting
      greeting: 'Welcome! How can I help you today?'
    })

    // Mount PACE to DOM
    pace.mount()

    // Optional: Listen to events
    pace.on('ready', () => {
      console.log('PACE is ready!')
    })

    pace.on('product:select', ({ product }) => {
      console.log('User selected:', product.name)
    })
  </script>
</body>
</html>

That's it! 100 lines. Zero dependencies. Fully functional.

How It Works ​

1. Load CSS ​

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticintent/pace-pattern/dist/pace.min.css">

Loads PACE.js default styles (purple gradient theme).

2. Import PACE ​

javascript
import { PACE } from 'https://cdn.jsdelivr.net/npm/@semanticintent/pace-pattern/dist/pace.esm.js'

ESM import from CDN (no npm install needed).

3. Define Products ​

javascript
products: {
  products: [
    { id, name, tagline, category, description, action_label, action_url },
    // ...
  ]
}

Inline product data. No external JSON file required.

4. Mount ​

javascript
pace.mount()

Renders PACE to the #app container.

What You Get ​

Product Catalog ​

  • 3 products grouped by category
  • Search bar (try typing "pro")
  • Product cards with descriptions
  • Action buttons

About Page ​

  • Default PACE information
  • Links to documentation
  • Pattern explanation

Chat Widget ​

  • Placeholder chat (no AI)
  • Shows example messages
  • Input field (non-functional without AI)

Executive Summary ​

  • Placeholder summary
  • Example metrics
  • Suggested next steps

Running Locally ​

Option 1: File Protocol ​

Just open the HTML file in your browser:

bash
open minimal.html

Note: Some features may not work due to CORS restrictions.

bash
# Python
python -m http.server 8000

# Node.js
npx serve .

# PHP
php -S localhost:8000

Open http://localhost:8000/minimal.html

Customization ​

Change Colors ​

Add custom CSS:

html
<style>
  :root {
    --pace-primary: #3b82f6;  /* Blue */
    --pace-accent: #8b5cf6;   /* Purple */
  }
</style>

Change Greeting ​

javascript
const pace = new PACE({
  greeting: 'Your custom greeting here'
})

Add More Products ​

javascript
products: {
  products: [
    // ... existing products
    {
      id: 'custom',
      name: 'Your Product',
      tagline: 'Your tagline',
      category: 'Your Category',
      description: '## Your Product\n\nYour description...',
      action_label: 'Your CTA',
      action_url: 'https://your-link.com'
    }
  ]
}

Add AI ​

See AI Adapters Guide:

javascript
import { PACE, ClaudeAdapter } from 'https://cdn.jsdelivr.net/npm/@semanticintent/pace-pattern/dist/pace.esm.js'

const pace = new PACE({
  container: '#app',
  products: { ... },
  aiAdapter: new ClaudeAdapter({
    apiKey: 'your-api-key',
    model: 'claude-3-sonnet-20240229'
  })
})

Next Steps ​

After mastering this minimal example:

  1. Add external products: Move products to products.json
  2. Add AI: Integrate Claude or OpenAI
  3. Customize theme: Create your own color scheme
  4. Add analytics: Track user behavior
  5. Deploy: Put it on Netlify/Vercel

Learn more:

Download ​

Get the code:

bash
curl -O https://raw.githubusercontent.com/semanticintent/pace.js/main/examples/minimal/index.html

Or copy the complete code from above!

The simplest PACE app. Start here! 🚀