Pulse Framework


No build. No dependencies. Just JavaScript.

Features

- 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

Installation

``bash
npm install pulse-js-framework
`

Quick Start

$3

`bash
npx pulse-js-framework create my-app
cd my-app
npm install
npm run dev
`

$3

`bash
npx pulse-js-framework create my-app --typescript
cd my-app
npm install
npm run dev
`

$3

Create projects from built-in example apps:

`bash


E-commerce app (products, cart, checkout)

npx pulse-js-framework create my-shop --ecommerce

Todo app (filtering, local storage)

npx pulse-js-framework create my-todos --todo

Blog (posts, sidebar, navigation)

npx pulse-js-framework create my-blog --blog

Chat app (messages, users, emoji picker)

npx pulse-js-framework create my-chat --chat

Dashboard (data visualization)

npx pulse-js-framework create my-dashboard --dashboard
`

$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 Counter

state {
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 directory

Development

pulse dev [port] # Start dev server (default: 3000)
pulse build # Build for production
pulse preview [port] # Preview production build
pulse compile # Compile .pulse file

Code Quality

pulse lint [files] # Validate .pulse files
pulse lint --fix # Auto-fix fixable issues
pulse format [files] # Format .pulse files
pulse analyze # Analyze bundle

Testing

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 file

Project Tools

pulse doctor # Run project diagnostics
pulse doctor --verbose # Detailed diagnostics

Creating .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 section

Scaffolding

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 component

Documentation

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__
});
``

Documentation

- 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

License

MIT