PACE Pattern

Appearance

PACE.js ​

The official JavaScript framework for building PACE Pattern applications.

Overview ​

PACE.js is a lightweight (15KB), zero-dependency JavaScript framework that makes it easy to build guide-first, conversational interfaces following the PACE Pattern.

Repository: github.com/semanticintent/pace.jsNPM: @semanticintent/pace-patternLicense: MIT

Quick Start ​

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

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

pace.mount()

That's it! Your PACE app is live.

Why PACE.js? ​

1. Tiny Bundle Size ​

PACE.js:     15KB minified + gzipped
React:       42KB
Vue:         34KB
Alpine.js:   15KB

6x smaller than React. Same power.

2. Zero Dependencies ​

json
{
  "dependencies": {}
}

No npm dependency hell. No security vulnerabilities. No version conflicts.

3. Framework Agnostic ​

javascript
// Standalone
new PACE({ container: '#app' })

// With React
<PACEReact config={config} />

// With Vue
<pace-component :config="config" />

// With Svelte
<PACE {config} />

Works anywhere JavaScript runs.

4. Built-in AI ​

javascript
const pace = new PACE({
  aiAdapter: new ClaudeAdapter({ apiKey: '...' })
})

Claude, OpenAI, or custom adapters included.

Architecture ​

Core Modules ​

1. PACE Orchestrator

  • Main controller
  • Lifecycle management
  • Plugin system

2. State Manager

  • Reactive state
  • Observer pattern
  • Subscribe/notify

3. Router

  • Hash-based routing
  • Deep linking
  • View management

4. Component System

  • ProductCatalog
  • AboutPage
  • ChatWidget
  • ExecutiveSummary

Data Flow ​

Features ​

Reactive State ​

javascript
state.set('activeView', 'chat')
state.subscribe('activeView', (newView) => {
  console.log('View changed:', newView)
})

Event System ​

javascript
pace.on('product:select', ({ product }) => {
  console.log('Selected:', product.name)
})

pace.on('chat:message', ({ message }) => {
  console.log('User said:', message)
})

Plugin Architecture ​

javascript
const analyticsPlugin = {
  name: 'analytics',
  install(pace) {
    pace.on('product:select', ({ product }) => {
      gtag('event', 'product_view', { product_id: product.id })
    })
  }
}

pace.use(analyticsPlugin)

Theme System ​

javascript
const pace = new PACE({
  theme: {
    primary: '#3b82f6',
    accent: '#8b5cf6',
    font: 'Roboto, sans-serif'
  }
})

Components ​

ProductCatalog ​

Display and filter products:

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

const catalog = new ProductCatalog(products, state)
catalog.render()
catalog.search('database')

ChatWidget ​

Conversational interface:

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

const chat = new ChatWidget({
  aiAdapter: claudeAdapter,
  greeting: 'Welcome!'
}, state)

ExecutiveSummary ​

Real-time insights:

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

const summary = new ExecutiveSummary(config, state)
summary.trackProduct(product)
summary.setExpertise('advanced')

AI Adapters ​

Claude ​

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

const adapter = new ClaudeAdapter({
  apiKey: process.env.CLAUDE_API_KEY,
  model: 'claude-3-sonnet-20240229'
})

OpenAI ​

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

const adapter = new OpenAIAdapter({
  apiKey: process.env.OPENAI_API_KEY,
  model: 'gpt-4'
})

Custom ​

javascript
class MyAdapter {
  async sendMessage(message, context) {
    const response = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ message, context })
    })
    return await response.json()
  }
}

Development ​

Repository Structure ​

pace.js/
├── src/
│   ├── core/
│   │   ├── pace.js
│   │   ├── state.js
│   │   └── router.js
│   ├── components/
│   │   ├── product-catalog.js
│   │   ├── about-page.js
│   │   ├── chat-widget.js
│   │   └── executive-summary.js
│   └── adapters/
│       ├── claude.js
│       └── openai.js
├── dist/
│   ├── pace.min.js
│   ├── pace.esm.js
│   └── pace.min.css
├── examples/
│   ├── minimal/
│   ├── millpond/
│   └── react/
├── docs/
└── tests/

Build ​

bash
npm run build

Outputs:

  • pace.min.js — UMD bundle
  • pace.esm.js — ES module
  • pace.min.css — Styles

Test ​

bash
npm test

Uses Jest for unit tests.

Versioning ​

Current: v1.0.1 ​

Published: December 23, 2024 DOI: 10.5281/zenodo.18049371

Roadmap ​

v1.1.0 (Q1 2025)

  • Streaming AI responses
  • Vue official adapter
  • Svelte official adapter

v1.2.0 (Q2 2025)

  • SSR support
  • i18n/l10n
  • Voice interface

v2.0.0 (Q3 2025)

  • Breaking changes (if needed)
  • Multi-modal support
  • Advanced analytics

Community ​

GitHub ​

  • Stars: Growing
  • Forks: Active
  • Issues: Responsive
  • PRs: Welcome

NPM ​

  • Downloads: Weekly growth
  • Dependents: Expanding
  • Version: Stable

Contributors ​

Built by the open source community:

  • Core maintainers: 2
  • Contributors: Growing
  • Community examples: Multiple

Resources ​

Get Started ​

Ready to build with PACE.js?

  1. Quick Start Guide — 5-minute setup
  2. First App Tutorial — Complete walkthrough
  3. API Reference — Full documentation
  4. Examples — Real implementations

15KB. Zero dependencies. Framework agnostic. That's PACE.js. ✨