A declarative DOM framework with CSS selector-based structure and reactive pulsations
npm install pulse-js-framework


No build. No dependencies. Just JavaScript.
- CSS Selector Syntax - Create DOM elements using familiar CSS selectors
- Reactive Pulsations - Automatic UI updates when state changes
- Custom DSL - Optional .pulse file format for cleaner code
- No Build Required - Works directly in the browser
- Lightweight - Minimal footprint, maximum performance
- Router & Store - Built-in SPA routing and state management
- Form Handling - Validation, async validators, field arrays
- Async Primitives - useAsync, useResource, usePolling with SWR caching
- Server-Side Rendering - Full SSR with hydration and async data fetching
- Hot Module Replacement - Full HMR with state preservation
- Mobile Apps - Build native Android & iOS apps (zero dependencies)
- TypeScript Support - Full type definitions for IDE autocomplete
- DevTools - Time-travel debugging, dependency graph visualization
``bash`
npm install pulse-js-framework
`bash`
npx pulse-js-framework create my-app
cd my-app
npm install
npm run dev
`bash`
npx pulse-js-framework create my-app --typescript
cd my-app
npm install
npm run dev
Create projects from built-in example apps:
`bashE-commerce app (products, cart, checkout)
npx pulse-js-framework create my-shop --ecommerce
$3
`javascript
import { pulse, effect, el, mount } from 'pulse-js-framework';// Create reactive state
const count = pulse(0);
// Build UI with CSS selector syntax
function Counter() {
const div = el('.counter');
const display = el('h1');
effect(() => {
display.textContent =
Count: ${count.get()};
}); const increment = el('button.btn', '+');
increment.onclick = () => count.update(n => n + 1);
div.append(display, increment);
return div;
}
mount('#app', Counter());
`CSS Selector Syntax
`javascript
el('div') //
el('.container') //
el('#app') //
el('button.btn.primary') //
el('input[type=text]') //
el('h1', 'Hello World') // Hello World
`Reactivity
`javascript
import { pulse, effect, computed, batch } from 'pulse-js-framework';const firstName = pulse('John');
const lastName = pulse('Doe');
// Computed values
const fullName = computed(() =>
${firstName.get()} ${lastName.get()});// Effects auto-run when dependencies change
effect(() => console.log(
Hello, ${fullName.get()}!));firstName.set('Jane'); // Logs: "Hello, Jane Doe!"
// Batch updates (effects run once)
batch(() => {
firstName.set('John');
lastName.set('Smith');
});
`.pulse File Format
`pulse
@page Counterstate {
count: 0
}
view {
.counter {
h1 "Count: {count}"
button @click(count++) "+"
button @click(count--) "-"
}
}
style {
.counter { text-align: center; padding: 20px }
}
`See Pulse DSL documentation for full syntax reference.
CLI Commands
`bash
Project Creation
pulse create # Create new project
pulse create --typescript # Create TypeScript project
pulse create --ecommerce # Create from E-Commerce template
pulse create --todo # Create from Todo App template
pulse create --blog # Create from Blog template
pulse create --chat # Create from Chat template
pulse create --dashboard # Create from Dashboard template
pulse init --typescript # Initialize in current directoryDevelopment
pulse dev [port] # Start dev server (default: 3000)
pulse build # Build for production
pulse preview [port] # Preview production build
pulse compile # Compile .pulse fileCode Quality
pulse lint [files] # Validate .pulse files
pulse lint --fix # Auto-fix fixable issues
pulse format [files] # Format .pulse files
pulse analyze # Analyze bundleTesting
pulse test # Run tests with Node.js test runner
pulse test --coverage # Run tests with coverage
pulse test --watch # Watch mode
pulse test --create # Generate test fileProject Tools
pulse doctor # Run project diagnostics
pulse doctor --verbose # Detailed diagnosticsCreating .pulse Files
pulse new # Create component (src/components/.pulse)
pulse new --type page # Create page (src/pages/.pulse)
pulse new --type layout # Create layout (src/layouts/.pulse)
pulse new --props # Include props sectionScaffolding
pulse scaffold component # Generate component
pulse scaffold page # Generate page
pulse scaffold store # Generate store module
pulse scaffold hook # Generate custom hook
pulse scaffold service # Generate API service
pulse scaffold context # Generate context provider
pulse scaffold layout # Generate layout componentDocumentation
pulse docs --generate # Generate API docs (Markdown)
pulse docs --generate -f html # Generate HTML docs
pulse docs --generate -f json # Generate JSON docs
`See CLI documentation for full command reference.
Core Modules
$3
`javascript
import { createRouter, lazy } from 'pulse-js-framework/runtime/router';const router = createRouter({
routes: {
'/': HomePage,
'/users/:id': UserPage,
'/dashboard': lazy(() => import('./Dashboard.js'))
}
});
`$3
`javascript
import { createStore, createActions } from 'pulse-js-framework/runtime/store';const store = createStore({ user: null, theme: 'light' }, { persist: true });
const actions = createActions(store, {
login: (store, user) => store.user.set(user)
});
`$3
`javascript
import { useForm, validators } from 'pulse-js-framework/runtime/form';const { fields, handleSubmit, isValid } = useForm(
{ email: '', password: '' },
{
email: [validators.required(), validators.email()],
password: [validators.required(), validators.minLength(8)]
}
);
`$3
`javascript
import { useAsync, useResource } from 'pulse-js-framework/runtime/async';const { data, loading } = useAsync(() => fetch('/api/users').then(r => r.json()));
const users = useResource('users', fetchUsers, { refreshInterval: 30000 });
`$3
`javascript
import {
// Announcements
announce, createAnnouncementQueue,
// Focus management
trapFocus, onEscapeKey, createFocusVisibleTracker,
// User preferences
prefersReducedMotion, prefersReducedTransparency, forcedColorsMode,
// ARIA widgets
createModal, createTooltip, createAccordion, createMenu,
// Color contrast
getContrastRatio, meetsContrastRequirement,
// Validation
validateA11y
} from 'pulse-js-framework/runtime/a11y';// Screen reader announcements
announce('Item saved successfully');
// Accessible modal dialog
const modal = createModal(dialog, { labelledBy: 'title', closeOnBackdropClick: true });
modal.open();
// Check color contrast (WCAG)
const ratio = getContrastRatio('#333', '#fff'); // 12.63
meetsContrastRequirement(ratio, 'AA'); // true
`See Accessibility documentation for full guide.
See API documentation for full reference.
Mobile Apps
Build native Android and iOS apps:
`bash
pulse mobile init
pulse build
pulse mobile build android
pulse mobile run android
``javascript
import { createNativeStorage, NativeUI } from 'pulse-js-framework/runtime/native';const storage = createNativeStorage();
const theme = storage.get('theme', 'light');
NativeUI.toast('Hello from native!');
`See Mobile documentation for full guide.
IDE Extensions
$3
`bash
cd vscode-extension && bash install.sh
`$3
`bash
cd intellij-plugin && ./gradlew buildPlugin
`Features: Syntax highlighting, code snippets, bracket matching.
TypeScript Support
Full type definitions included:
`typescript
import { pulse, Pulse } from 'pulse-js-framework/runtime';
import { createRouter, Router } from 'pulse-js-framework/runtime/router';const count: Pulse = pulse(0);
`Examples
| Example | Description |
|---------|-------------|
| Todo App | Task management with filters |
| Blog | CRUD, categories, search |
| Chat App | Real-time messaging |
| E-commerce | Shopping cart |
| Dashboard | Admin UI |
| HMR Demo | Hot module replacement |
| Router Demo | SPA routing |
| Store Demo | State with undo/redo |
| Electron App | Desktop notes app |
Server-Side Rendering
Pulse supports full SSR with hydration and async data fetching:
`javascript
// server.js
import { renderToString, serializeState } from 'pulse-js-framework/runtime/ssr';
import App from './App.js';app.get('*', async (req, res) => {
const { html, state } = await renderToString(() => App(), {
waitForAsync: true // Wait for useAsync to resolve
});
res.send(
);
});// client.js
import { hydrate } from 'pulse-js-framework/runtime/ssr';
import App from './App.js';
hydrate('#app', () => App(), {
state: window.__PULSE_STATE__
});
``- API Reference - Complete API documentation
- CLI Commands - Command line interface
- Pulse DSL - .pulse file syntax
- Accessibility - A11y guide and ARIA helpers
- HTTP Client - Fetch wrapper with interceptors
- WebSocket - Real-time with auto-reconnect
- GraphQL - Queries, mutations, subscriptions
- Context API - Dependency injection
- DevTools - Debugging and profiling
- Mobile Apps - Native Android & iOS
- SSR - Server-side rendering and hydration
MIT