PACE Pattern

Appearance

Installation ​

Multiple ways to add PACE.js to your project.

bash
npm install @semanticintent/pace-pattern
javascript
import { PACE } from '@semanticintent/pace-pattern'

const pace = new PACE({
  container: '#app',
  products: './products.json'
})

pace.mount()

CDN ​

ESM (Modern Browsers) ​

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

  const pace = new PACE({
    container: '#app',
    products: './products.json'
  })

  pace.mount()
</script>

UMD (Universal) ​

html
<script src="https://cdn.jsdelivr.net/npm/@semanticintent/pace-pattern/dist/pace.min.js"></script>
<script>
  const pace = new PACE.PACE({
    container: '#app',
    products: './products.json'
  })

  pace.mount()
</script>

Download ​

Download the latest release from GitHub:

Download PACE.js v1.0.1

Files included:

  • pace.min.js — Minified UMD build (15KB)
  • pace.esm.js — ESM build for bundlers
  • pace.min.css — Optional styles
  • products.json — Example data structure

Project Structure ​

After installation, create this structure:

your-project/
├── index.html
├── products.json
├── pace.min.css (optional)
└── app.js

index.html ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My PACE App</title>
  <link rel="stylesheet" href="pace.min.css">
</head>
<body>
  <div id="app"></div>
  <script type="module" src="app.js"></script>
</body>
</html>

app.js ​

javascript
import { PACE } from '@semanticintent/pace-pattern'

const pace = new PACE({
  container: '#app',
  products: './products.json',
  greeting: 'Welcome! What can I help you find?'
})

pace.mount()

products.json ​

json
{
  "products": [
    {
      "id": "product-1",
      "name": "Your Product",
      "tagline": "Short description",
      "category": "Tools",
      "description": "## Full Description\n\nMarkdown supported!",
      "action_label": "Get Started",
      "action_url": "https://example.com"
    }
  ]
}

Build Tools ​

Vite ​

javascript
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  // PACE.js works out of the box
})

Webpack ​

javascript
// webpack.config.js
module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  }
}

Rollup ​

javascript
// rollup.config.js
export default {
  input: 'app.js',
  output: {
    file: 'bundle.js',
    format: 'iife'
  }
}

Parcel ​

bash
parcel index.html

PACE.js is bundler-agnostic. Use any tool you prefer.

Framework Integration ​

React ​

bash
npm install @semanticintent/pace-pattern @semanticintent/pace-react
jsx
import { PACEReact } from '@semanticintent/pace-react'

function App() {
  return (
    <PACEReact
      products="./products.json"
      greeting="Welcome to our store!"
    />
  )
}

Vue ​

bash
npm install @semanticintent/pace-pattern @semanticintent/pace-vue
vue
<template>
  <pace-component :config="paceConfig" />
</template>

<script>
import { PACEVue } from '@semanticintent/pace-vue'

export default {
  components: { PACEVue },
  data() {
    return {
      paceConfig: {
        products: './products.json'
      }
    }
  }
}
</script>

Svelte ​

bash
npm install @semanticintent/pace-pattern @semanticintent/pace-svelte
svelte
<script>
  import PACE from '@semanticintent/pace-svelte'

  const config = {
    products: './products.json'
  }
</script>

<PACE {config} />

Framework Adapters

React, Vue, and Svelte adapters are coming soon. For now, use the vanilla JavaScript version with a simple wrapper component.

TypeScript Support ​

PACE.js is written in vanilla JavaScript, but includes TypeScript definitions:

typescript
import { PACE, PACEConfig, Product } from '@semanticintent/pace-pattern'

const config: PACEConfig = {
  container: '#app',
  products: './products.json'
}

const pace = new PACE(config)
pace.mount()

Verify Installation ​

Test your setup:

javascript
import { PACE } from '@semanticintent/pace-pattern'

console.log(PACE.version) // "1.0.1"

const pace = new PACE({
  container: '#app',
  products: {
    products: [
      {
        id: 'test',
        name: 'Test Product',
        tagline: 'It works!',
        description: 'PACE.js is installed correctly.'
      }
    ]
  }
})

pace.mount()

If you see a purple interface with "Test Product" — you're ready to build!

Troubleshooting ​

Module not found ​

Error: Cannot find module '@semanticintent/pace-pattern'

Solution:

bash
rm -rf node_modules package-lock.json
npm install

PACE is not defined ​

Uncaught ReferenceError: PACE is not defined

Solution:

Using UMD? Access via PACE.PACE:

javascript
const pace = new PACE.PACE({ ... })

Using ESM? Import first:

javascript
import { PACE } from '@semanticintent/pace-pattern'

CSS not loading ​

Solution:

Add the stylesheet:

html
<link rel="stylesheet" href="pace.min.css">

Or import in JavaScript:

javascript
import '@semanticintent/pace-pattern/dist/pace.min.css'

Next Steps ​

Installation complete! Now:

  1. Quick Start — Build your first PACE app (5 minutes)
  2. Core Concepts — Understand how PACE.js works
  3. Components — Learn the four core components
  4. API Reference — Complete API documentation

Ready to build with PACE.js! 🚀