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

npm install pulse-js-framework

Quick Start

Create a new project

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

Or with TypeScript

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

Or from a template

Create projects from built-in example apps:

# 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

Or use directly

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

el('div')                    // <div></div>
el('.container')             // <div class="container"></div>
el('#app')                   // <div id="app"></div>
el('button.btn.primary')     // <button class="btn primary"></button>
el('input[type=text]')       // <input type="text">
el('h1', 'Hello World')      // <h1>Hello World</h1>

Reactivity

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

@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

# Project Creation
pulse create <name>              # Create new project
pulse create <name> --typescript # Create TypeScript project
pulse create <name> --ecommerce  # Create from E-Commerce template
pulse create <name> --todo       # Create from Todo App template
pulse create <name> --blog       # Create from Blog template
pulse create <name> --chat       # Create from Chat template
pulse create <name> --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 <file>             # 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 <name>       # Generate test file

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

# Creating .pulse Files
pulse new <name>                 # Create component (src/components/<Name>.pulse)
pulse new <name> --type page     # Create page (src/pages/<Name>.pulse)
pulse new <name> --type layout   # Create layout (src/layouts/<Name>.pulse)
pulse new <name> --props         # Include props section

# Scaffolding
pulse scaffold component <name>  # Generate component
pulse scaffold page <name>       # Generate page
pulse scaffold store <name>      # Generate store module
pulse scaffold hook <name>       # Generate custom hook
pulse scaffold service <name>    # Generate API service
pulse scaffold context <name>    # Generate context provider
pulse scaffold layout <name>     # 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

Router

import { createRouter, lazy } from 'pulse-js-framework/runtime/router';

const router = createRouter({
  routes: {
    '/': HomePage,
    '/users/:id': UserPage,
    '/dashboard': lazy(() => import('./Dashboard.js'))
  }
});

Store

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

Form

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)]
  }
);

Async

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

Accessibility

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:

pulse mobile init
pulse build
pulse mobile build android
pulse mobile run android

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

VS Code

cd vscode-extension && bash install.sh

IntelliJ IDEA / WebStorm

cd intellij-plugin && ./gradlew buildPlugin

Features: Syntax highlighting, code snippets, bracket matching.

TypeScript Support

Full type definitions included:

import { pulse, Pulse } from 'pulse-js-framework/runtime';
import { createRouter, Router } from 'pulse-js-framework/runtime/router';

const count: Pulse<number> = 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
Weather App	API integration, async data fetching
Sports News	HTTP client with interceptors
HMR Demo	Hot module replacement
Router Demo	SPA routing
Store Demo	State with undo/redo
Electron App	Desktop notes app
Server Actions	Rate limiting, CSRF protection
LESS Example	LESS preprocessor support
Stylus Example	Stylus preprocessor support
Webpack	Webpack 5 loader integration
Rollup	Rollup plugin with tree-shaking
ESBuild	ESBuild ultra-fast builds
Parcel	Parcel zero-config bundling
SASS Example	SASS/SCSS preprocessor support
Form Validation	useForm, validators, file upload

Server-Side Rendering

Pulse supports full SSR with hydration and async data fetching:

// 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(`
    <!DOCTYPE html>
    <html>
      <body>
        <div id="app">${html}</div>
        <script>window.__PULSE_STATE__ = ${serializeState(state)};</script>
        <script type="module" src="/client.js"></script>
      </body>
    </html>
  `);
});

// 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