PureMix is an HTML-first full-stack framework that lets you mix JavaScript, TypeScript, and Python in the same file. Native Python integration, server-side rendering, simple development.
npx puremix create my-app
cd my-app && npm run dev<loader>
async function loadDashboard(request, actionResult) {
// Use analysis result from action if available
if (actionResult && actionResult.success) {
return {
data: {
sales: actionResult.predictions,
confidence: actionResult.confidence_score,
timeframe: actionResult.timeframe,
sampleSize: actionResult.sample_size
}
};
}
// Default initial load
return {
data: {
timeframe: request.query.timeframe || 'month',
pendingAnalysis: true
}
};
}
</loader>
<div class="dashboard">
<h1>Sales Analysis Dashboard</h1>
{loadDashboard.data.pendingAnalysis ?
<div>
<p>Click the button below to run Python ML analysis:</p>
<form onsubmit="analyzeSales">
<button type="submit" class="btn-primary">
🐍 Run Python Analysis
</button>
</form>
</div>
:
<div>
<h2>Results for {loadDashboard.data.timeframe}</h2>
<p><strong>Sales Forecast:</strong> {loadDashboard.data.sales}</p>
<p><strong>Confidence:</strong> {loadDashboard.data.confidence}%</p>
<p><small>Based on {loadDashboard.data.sampleSize} months of data</small></p>
<button onclick="analyzeSales" class="btn-secondary">
🔄 Run Again
</button>
</div>
}
</div>
<script server lang="python">
def analyzeSales(formData, request):
"""Run ML analysis on sales data"""
import pandas as pd
import numpy as np
# Sample data for demo
sample_sales = [
{'date': '2024-01', 'sales': 1200},
{'date': '2024-02', 'sales': 1500},
{'date': '2024-03', 'sales': 1350},
{'date': '2024-04', 'sales': 1800},
{'date': '2024-05', 'sales': 2100},
{'date': '2024-06', 'sales': 1950}
]
df = pd.DataFrame(sample_sales)
predictions = float(df['sales'].mean())
std_dev = float(df['sales'].std())
confidence = round(95 - (std_dev / predictions * 100), 2)
return {
'success': True,
'predictions': predictions,
'confidence_score': confidence,
'timeframe': formData.get('timeframe') or 'month',
'sample_size': len(sample_sales)
}
</script>Mix Python and JavaScript seamlessly. Call NumPy, Pandas, and ML libraries directly from your web app.
Node.js 22+ runs TypeScript natively. No webpack, no bundlers, no complex configuration.
Write familiar HTML with server-side logic. No JSX compilation, no virtual DOM, just pure web development.
React-style components with props and selective updates. Smart DOM diffing for zero-flicker UI.
Fast initial page loads with complete SSR. Loader/action pattern for data fetching and mutations.
Instant feedback during development. File watching with automatic server restart and browser refresh.
PureMix is a framework that lets you use Python using familiar ES6 import syntax. Multiple ways to use Python, from inline execution to ES6 imports.
Embed Python functions directly in .puremix files
<script server lang="python">
def calculate_roi(data, js_context=None):
import numpy as np
investment = np.array([d['cost'] for d in data])
revenue = np.array([d['revenue'] for d in data])
roi = ((revenue - investment) / investment) * 100
return {
'success': True,
'roi': float(roi.mean()),
'breakdown': roi.tolist()
}
</script>
<form onsubmit="calculate_roi">
<button type="submit">Calculate ROI</button>
</form>Execute Python code dynamically within loaders
const result = await request.python.call('analyze', data, `
import pandas as pd
def analyze(data, js_context=None):
df = pd.DataFrame(data)
stats = df.describe()
return {
'success': True,
'statistics': stats.to_dict()
}
`);Import Python functions like JavaScript modules!
// Import Python functions using standard ES6 syntax!
import { validate_data, analyze_portfolio } from '../lib/data_processor'
import { calculate_loan } from '../services/financial_analyzer'
async function loadPage(request) {
// Call Python functions using familiar ES6 import syntax!
const validation = await validate_data({ userId: 123 });
const analysis = await analyze_portfolio(portfolioData);
const loan = await calculate_loan({ principal: 300000 });
return { data: { validation, analysis, loan } };
}Zero imports needed - Python functions available everywhere
// No imports required! All Python modules auto-discovered
async function loadPage(request) {
// Call any Python function globally
const result = await validate_data({ userId: 123 });
const processed = await process_data(result);
const formatted = await format_text({ text: 'hello' });
return { data: { result, processed, formatted } };
}Use Pandas, NumPy, Matplotlib directly in your web apps
Integrate Scikit-learn, TensorFlow, PyTorch models
Leverage SciPy, SymPy for complex calculations
Build trading platforms, risk models, portfolio analyzers
Understanding PureMix's data fetching and mutation pattern (inspired by Remix)
<script server>), the action's return value becomes available as actionResult in the loader function. The loader then runs again with this data.
User visits /products/123 or submits a form
GET /products/123
POST /products/123File-based routing matches URL to .puremix file
app/routes/products/[id].puremixServer function processes form data or API mutations
<script server>
async function updateProduct(formData, request) {
const product = await saveProduct({
id: request.params.id,
name: formData.get('name'),
price: formData.get('price')
});
return {
success: true,
product,
message: 'Product updated!'
};
}
</script>Fetch data for rendering (receives action result if POST)
<loader>
async function loadProduct(request, actionResult) {
const productId = request.params.id;
const product = await getProduct(productId);
return {
data: {
product,
// Include action result for feedback
updateSuccess: actionResult?.success,
message: actionResult?.message
}
};
}
</loader>Server-side rendering with loader data
<div>
{loadProduct.data.updateSuccess ?
<div class="success">{loadProduct.data.message}</div> :
null
}
<h1>{loadProduct.data.product.name}</h1>
<p>Price: ${loadProduct.data.product.price}</p>
<form onsubmit="updateProduct">
<input name="name" value="{loadProduct.data.product.name}">
<input name="price" value="{loadProduct.data.product.price}">
<button type="submit">Update</button>
</form>
</div>Complete rendered page sent to browser
HTTP/1.1 200 OK
Content-Type: text/html
<!DOCTYPE html>
<html>...</html>Works without JavaScript, enhanced with JavaScript
TypeScript support for request, formData, and responses
Complete HTML rendered server-side
No client-side data fetching waterfall
npx puremix create my-appRequires Node.js 22+ for native TypeScript support
puremix create my-app
# Choose template:
# - basic: Tailwind CSS with animations
# - minimal: Zero dependencies
# - advanced: MongoDB + authenticationcd my-app
npm run dev
# Server starts at http://localhost:3000
# Hot reload enabled - changes reflect instantly!