PACE.js Framework

15KB • Zero Dependencies • Framework Agnostic

PACE.js is a lightweight JavaScript framework for building guide-first interfaces following the PACE Pattern.

---

Quick Start

npm install @semanticintent/pace-pattern

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

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

pace.mount()

That's it. Your PACE-powered storefront is live.

Full Quick Start Guide →

---

Why PACE.js?

Feature	PACE.js	React + Libraries
Size	15KB	90KB+ (React + Router + State)
Dependencies	0	10+ typically
Learning curve	Minutes	Days/weeks
Framework lock-in	None	React ecosystem
AI integration	Built-in	DIY with LangChain/OpenAI SDK
Setup time	< 5 minutes	Hours

---

Core Features

🎯 Pattern-First Design

Built specifically for the PACE Pattern. Every API, component, and feature embodies:

• Proactive guidance
• Adaptive responses
• Contextual awareness
• Efficient interactions

⚡ Lightweight Architecture

PACE.js:        15KB minified + gzipped
React alone:    42KB
Vue alone:      33KB
Alpine.js:      15KB (but no PACE components)
jQuery:         30KB

6x smaller than React. Same power.

🚀 Zero Dependencies

No npm dependency hell. No version conflicts. No security vulnerabilities from third-party packages.

{
  "dependencies": {}  // ← That's it
}

🎨 Framework Agnostic

Use standalone or integrate with your stack:

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

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

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

// With Svelte
<PACE {config} />

🤖 AI-Ready

Built-in adapters for major AI providers:

const pace = new PACE({
  aiAdapter: 'claude',
  apiKey: 'your-api-key'
})

// Or OpenAI
const pace = new PACE({
  aiAdapter: 'openai',
  model: 'gpt-4'
})

// Or custom
const pace = new PACE({
  aiAdapter: customAdapter
})

🔌 Extensible Plugin System

pace
  .use(analyticsPlugin)
  .use(i18nPlugin)
  .use(customThemePlugin)
  .mount()

---

Architecture Overview

---

Core Modules

1. PACE Orchestrator

The main class that manages everything:

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

const pace = new PACE({
  container: '#app',
  products: './products.json',
  theme: 'purple-gradient',
  aiAdapter: 'claude'
})

pace.mount()

2. State Manager

Reactive state with subscribe/notify pattern:

import { State } from '@semanticintent/pace-pattern'

const state = new State({
  activeView: 'product',
  selectedProduct: null
})

state.subscribe('activeView', (newValue) => {
  console.log('View changed to:', newValue)
})

state.set('activeView', 'chat')

3. Router

Hash-based routing for SPA navigation:

import { Router } from '@semanticintent/pace-pattern'

const router = new Router(state)
router.init()

// Navigate programmatically
router.navigate('product')

4. Component System

Four core components included:

• ProductCatalog — AI-guided product discovery
• AboutPage — Context and trust building
• ChatWidget — Conversational interface
• ExecutiveSummary — Real-time insights

---

Configuration Options

const pace = new PACE({
  // Required
  container: '#app',              // DOM selector
  products: './products.json',    // Products data (path or object)

  // AI Configuration
  aiAdapter: 'claude',            // 'claude', 'openai', or custom
  apiKey: 'sk-...',               // API key for AI provider
  model: 'claude-3-sonnet',       // Model to use

  // Theme
  theme: 'purple-gradient',       // Built-in theme or custom
  primaryColor: '#667eea',
  accentColor: '#764ba2',

  // Behavior
  greeting: 'Welcome to the pond. What are you fishing for?',
  defaultView: 'product',
  enableExecutiveSummary: true,

  // Advanced
  plugins: [plugin1, plugin2],
  customComponents: {},
  stateInitializer: () => ({})
})

See Full API Reference →

---

Comparison with Alternatives

vs React + Libraries

// React approach
import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { Provider } from 'react-redux'
import store from './store'
import ChatComponent from './components/Chat'
// ... 10+ more imports

// 100+ lines of boilerplate...

// PACE.js approach
import { PACE } from '@semanticintent/pace-pattern'
new PACE({ container: '#app', products: './products.json' }).mount()

Result: Same functionality, 90% less code.

vs Vue + Ecosystem

// Vue approach
import { createApp } from 'vue'
import { createRouter } from 'vue-router'
import { createStore } from 'vuex'
// ... setup code

// PACE.js approach
import { PACE } from '@semanticintent/pace-pattern'
new PACE({ container: '#app', products: './products.json' }).mount()

vs Alpine.js

Alpine.js is great for lightweight reactivity, but:

❌ No built-in PACE components ❌ No AI adapter system ❌ No routing included ❌ No state management pattern ❌ No opinionated structure

✅ PACE.js has all of this, at the same weight.

---

When to Use PACE.js

✅ Great For

• Product storefronts — MCP servers, SaaS products, digital goods
• Documentation sites — AI-guided doc discovery
• Portfolio sites — Conversational project showcase
• Landing pages — Guide users to conversion
• Service selection — Match users with right offerings

❌ Not Ideal For

• Large web apps — Use React/Vue for complex dashboards
• Content sites — Blogs, news (no need for guide)
• Admin panels — Traditional CRUD interfaces work better
• High-frequency tools — Email clients, chat apps

---

Browser Support

Browser	Minimum Version
Chrome	90+
Firefox	88+
Safari	14+
Edge	90+

Why modern browsers only?

PACE.js uses ES2020 features (optional chaining, nullish coalescing) for cleaner code. No polyfills = smaller bundle.

---

Performance

Initial load: 15KB (PACE.js) + your products data
Parse time: < 10ms on modern devices
Time to interactive: < 100ms
Memory footprint: ~2MB

Benchmarks:

Framework	Bundle Size	Parse Time	TTI
PACE.js	15KB	8ms	80ms
React + Router	90KB	45ms	350ms
Vue + Router	70KB	35ms	280ms
Next.js (minimal)	120KB	60ms	450ms

Tested on M1 MacBook Pro, throttled to 4x CPU slowdown

---

Getting Started

Ready to build?

Next Steps

• Installation Guide — npm, CDN, or download
• Quick Start Tutorial — 5-minute setup
• Build Your First App — Step-by-step guide
• API Reference — Complete documentation

---

Repository & Support

GitHub: semanticintent/pace.jsNPM: @semanticintent/pace-patternLicense: MIT Version: 1.0.1

View on GitHub →

---

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