Security News
Vite+ Joins the Push to Consolidate JavaScript Tooling
Evan You announces Vite+, a commercial, Rust-powered toolchain built on the Vite ecosystem to unify JavaScript development and fund open source.
By Sarah Gooding - Oct 15, 2025
Introducing Socket Firewall: Free, Proactive Protection for Your Software Supply Chain.Learn More →
@oxog/praxis
Advanced tools
@oxog/praxis
A high-performance reactive JavaScript framework with enterprise-grade features for modern web applications
⚡ Praxis
A high-performance reactive JavaScript framework with enterprise-grade features for modern web applications.
Praxis delivers exceptional performance, security, and accessibility with declarative data binding and reactive components in just 8.5KB.
✨ Why Praxis?
- 🚀 High Performance with fine-grained reactivity and optimized updates
- 📦 Lightweight - Only 8.5KB minified and gzipped
- 🔒 Enterprise Security with XSS prevention and CSP compliance
- ♿ Accessibility First - WCAG 2.1 AA compliance out of the box
- 🛠️ Complete Toolchain with CLI, testing, and build optimization
- 🔄 Familiar Syntax - Easy to learn and migrate to
🚀 Quick Start
CDN (Fastest way to try)
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@oxog/praxis@latest/dist/praxis.min.js"></script>
</head>
<body>
<div x-data="{ count: 0 }">
<button x-on:click="count++">Count: <span x-text="count"></span></button>
</div>
<script>
praxis.start();
</script>
</body>
</html>
NPM Installation
npm install @oxog/praxis
import praxis from '@oxog/praxis';
praxis.start();
Create New Project
npm install -g @oxog/praxis-cli
praxis create my-app
cd my-app
npm run dev
📖 Documentation
- Usage Guide - Complete guide to using Praxis
- API Reference - Detailed API documentation
- Architecture - Framework internals and design
- Migration Guide - Migration from other frameworks
🎯 Core Features
Reactive Directives
<!-- Data binding -->
<div x-data="{ message: 'Hello World' }">
<p x-text="message"></p>
<input x-model="message">
</div>
<!-- Conditional rendering -->
<div x-data="{ show: true }">
<p x-show="show">Visible content</p>
<p x-if="show">Conditionally rendered</p>
</div>
<!-- Event handling -->
<button x-on:click="alert('Clicked!')" x-on:keydown.enter="handleEnter()">
Click me
</button>
<!-- List rendering -->
<ul x-data="{ items: ['Apple', 'Banana', 'Cherry'] }">
<template x-for="item in items" :key="item">
<li x-text="item"></li>
</template>
</ul>
Advanced Directives
<!-- Intersection Observer -->
<div x-intersect="handleVisible()" x-intersect.threshold-50>
Triggers when 50% visible
</div>
<!-- Resize Observer -->
<div x-resize="updateDimensions()" x-resize.debounce>
Handles resize events
</div>
<!-- Click outside detection -->
<div x-clickaway="closeModal()" x-clickaway.escape>
Click outside or press escape to close
</div>
<!-- Keyboard shortcuts -->
<div x-hotkey="'ctrl+k'" x-on:keydown="openSearch()">
Global keyboard shortcuts
</div>
<!-- Focus management -->
<div x-focus-trap.auto x-show="modalOpen">
Automatically manages focus
</div>
<!-- Screen reader announcements -->
<div x-live-region.polite x-text="announcement">
Announces changes to screen readers
</div>
Global State Management
import { defineStore } from '@oxog/praxis-store';
const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
history: []
}),
getters: {
doubleCount: (state) => state.count * 2,
lastChange: (state) => state.history[state.history.length - 1]
},
actions: {
increment() {
this.$state.count++;
this.$state.history.push({ action: 'increment', timestamp: Date.now() });
},
async fetchInitialCount() {
const response = await fetch('/api/count');
this.$state.count = await response.json();
}
}
});
// Use in components
const store = useCounterStore();
store.increment();
console.log(store.doubleCount); // Reactive getter
🏗️ Architecture
Signal System
interface Signal<T> {
value: T;
peek(): T; // Read without tracking
subscribe(fn: () => void): () => void;
}
interface ComputedSignal<T> extends Signal<T> {
readonly value: T;
}
interface Effect {
execute(): void;
dispose(): void;
dependencies: Set<Signal<any>>;
}
Performance Features
- Batch Updates: Updates are batched using
requestIdleCallbackorMessageChannel - Fine-grained Reactivity: Only updates what actually changed
- Memory Management: Automatic cleanup with WeakMaps and FinalizationRegistry
- Efficient Scheduling: Smart update scheduling prevents unnecessary work
🧪 Examples
Counter with Computed Values
<div x-data="{ count: 0 }">
<button x-on:click="count++">+</button>
<span x-text="count"></span>
<button x-on:click="count--">-</button>
<p x-show="count > 0">Positive!</p>
<p x-show="count < 0">Negative!</p>
<p x-show="count === 0">Zero!</p>
</div>
Form Handling
<div x-data="{ name: '', email: '' }">
<input x-model="name" placeholder="Name">
<input x-model="email" type="email" placeholder="Email">
<div x-show="name && email">
<p>Hello <span x-text="name"></span>!</p>
<p>Email: <span x-text="email"></span></p>
</div>
</div>
🚀 Development
# Install dependencies
npm install
# Run tests
npm test
# Run tests with coverage
npm run test:coverage
# Build
npm run build
# Run benchmarks
npm run benchmark
📊 Performance
Praxis is designed for performance. Run the benchmarks to see the framework capabilities:
# Core reactivity benchmarks
npm run benchmark
# DOM manipulation benchmarks (open in browser)
open benchmarks/dom-benchmark.html
Key performance advantages:
- Signals: Efficient reactive system with fine-grained updates
- Batch Updates: Prevents layout thrashing
- Memory Efficient: WeakMap-based tracking prevents memory leaks
- Smaller Bundle: Lightweight core with tree-shakeable modules
🔒 Security
- XSS Prevention: Expression sandboxing and HTML sanitization
- CSP Compliant: Works with strict Content Security Policy
- Trusted Types: Supports browser security APIs
- Input Validation: Comprehensive validation and sanitization
🧪 Testing
# Run all tests
npm test
# Test with coverage
npm run test:coverage
# Test specific features
npm run test:security
npm run test:accessibility
npm run test:performance
🚀 Performance
Benchmark Results:
- 📊 Fast initial render with optimized DOM updates
- 🔄 Efficient reactive updates with minimal overhead
- 📦 Small bundle size at 8.5KB minified+gzipped
- 💾 Memory efficient with WeakMap-based tracking
🛠️ Build Tools
Vite Plugin
import { praxis } from '@oxog/praxis-vite-plugin';
export default {
plugins: [praxis({
optimize: true,
ssr: true
})]
};
Webpack Loader
module.exports = {
module: {
rules: [
{
test: /\.html$/,
use: '@oxog/praxis-webpack-loader'
}
]
}
};
🌐 Browser Support
- ✅ Chrome 63+
- ✅ Firefox 60+
- ✅ Safari 13+
- ✅ Edge 79+
📊 Bundle Analysis
# Analyze bundle size
praxis analyze
# Generate performance report
praxis report --performance
# Check for security issues
praxis audit --security
🤝 Contributing
We welcome contributions! Please see our Contributing Guide for details.
📄 License
MIT License - see LICENSE for details.
🌐 Links
- Website: praxisjs.com
- GitHub: github.com/praxijs
- NPM: @oxog/praxis
FAQs
A high-performance reactive JavaScript framework with enterprise-grade features for modern web applications
We found that @oxog/praxis demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 01 Jul 2025
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Ruby Central Faces Backlash After Publishing Incident Timeline on RubyGems Access Dispute
Ruby Central’s incident report on the RubyGems.org access dispute sparks backlash from former maintainers and renewed debate over project governance.
By Sarah Gooding - Oct 14, 2025
Research
/Security News
Weaponizing Discord for Command and Control Across npm, PyPI, and RubyGems.org
Socket researchers uncover how threat actors weaponize Discord across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
By Olivia Brown - Oct 11, 2025