A modern reactive frontend framework that bridges Flask/Jinja2 with modern UI capabilities
A modern reactive frontend framework that bridges Flask/Jinja2 with modern UI capabilities
NewUI transforms traditional Flask/Jinja2 development by adding reactive capabilities while maintaining the simplicity and server-side rendering benefits that make Flask development straightforward. Build sleek, intuitive frontends that rival modern frameworks without leaving the Flask ecosystem.
🤖 NEW: AI-Powered Development
Flask-NewUI includes the world's first AI Framework Schema (AFS) - making AI tools instant experts in Flask-NewUI development. Get framework-specific code generation, smart recommendations, and expert debugging assistance. Learn more ↓
🎯 Core Capabilities
🤖 AI-Optimized Development
🚀 Phase 1: Foundation
⚡ Phase 2: Enhanced Interactivity
🔥 Phase 3: Advanced Features
pip install flask-newui
# For WebSocket support
pip install flask-newui[websocket]
# For development
pip install flask-newui[dev]
from flask import Flask, render_template_string
from newui import NewUI
from newui import components as ui
app = Flask(__name__)
newui = NewUI(app)
# Simple reactive page
@app.route('/')
def index():
return render_template_string('''
<!DOCTYPE html>
<html>
<head>
<title>NewUI Demo</title>
<link href="{{ url_for('newui.static', filename='newui.css') }}" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Welcome to NewUI!</h1>
<!-- Reactive Counter -->
<div data-ui-component="counter" data-ui-state='{"count": 0}'>
<p>Count: <span data-ui-bind="count">0</span></p>
{{ ui.button("Increment", onclick="increment") }}
{{ ui.button("Reset", onclick="reset") }}
</div>
<!-- AJAX Form -->
<form data-ui-submit="ajax:/api/save">
{{ ui.input("name", placeholder="Enter your name") }}
{{ ui.button("Save", type="submit") }}
</form>
</div>
<script src="{{ url_for('newui.static', filename='newui.js') }}"></script>
<script>
NewUI.registerHandler('increment', function(element, event) {
const componentId = NewUI.getComponentId(element);
const state = NewUI.state[componentId];
NewUI.setStateValue(componentId, 'count', (state.count || 0) + 1);
});
NewUI.registerHandler('reset', function(element, event) {
const componentId = NewUI.getComponentId(element);
NewUI.setStateValue(componentId, 'count', 0);
});
</script>
</body>
</html>
''', ui=ui)
if __name__ == '__main__':
app.run(debug=True)
1. Create a Flask app with NewUI:
from flask import Flask
from newui import NewUI
app = Flask(__name__)
newui = NewUI(app)
2. Use built-in components:
from newui import components as ui
# In your template
{{ ui.button("Click Me", onclick="handleClick") }}
{{ ui.input("email", type="email", placeholder="Enter email") }}
{{ ui.card("Card content", title="My Card") }}
3. Add reactivity:
<!-- State-aware component -->
<div data-ui-component="todo-list" data-ui-state='{"items": []}'>
<!-- Component content with data binding -->
<span data-ui-bind="items.length">0</span> items
</div>
4. Handle events:
NewUI.registerHandler('addTodo', function(element, event) {
const componentId = NewUI.getComponentId(element);
const state = NewUI.state[componentId];
// Update state and UI automatically updates
NewUI.setStateValue(componentId, 'items', [...state.items, newItem]);
});
Developing with AI tools? Flask-NewUI includes the world's first AI Framework Schema (AFS) to make AI your expert coding partner.
The AI Framework Schema is a revolutionary machine-readable documentation format that makes AI models instantly expert in Flask-NewUI. Instead of generic suggestions, AI tools provide:
✅ Framework-specific code generation
✅ Contextual recommendations (when to use Flask-NewUI vs alternatives)
✅ Idiomatic patterns and best practices
✅ Targeted debugging assistance
1. Include the schema in your AI conversations:
Please reference the Flask-NewUI AI Framework Schema when helping me:
[Paste contents of flask-newui.afs.json]
2. Or reference it from the repository:
Use the AI Framework Schema at: /flask-newui.afs.json
to understand Flask-NewUI capabilities and provide expert assistance.
3. Example AI-powered development:
Human: "Create a todo app with real-time updates"
AI: [With AFS] "Perfect! Flask-NewUI is ideal for this. Use WebSocket
integration with component state management..."
flask-newui.afs.json - Complete schema making AI an instant expertafs-spec.md - Full specification for the AFS standardvalidate_afs.py - Tool to validate schema filesAFS-README.md - Comprehensive AFS documentationTry it yourself: Ask your AI assistant about Flask-NewUI while providing the AFS file. Watch it become an instant expert! 🚀
All components are available via the ui global in templates:
ui.button(text, type, variant, onclick, disabled, class_)ui.form(content, action, method, ajax, csrf_token)ui.input(name, type, value, placeholder, label, bind)ui.select(name, options, selected, label, bind)ui.card(content, title, footer, class_)ui.alert(message, type, dismissible, class_)@ui.component('my_component')
def my_component(title, content):
return render_template('components/my_component.html',
title=title, content=content)
<!-- Click handler -->
<button data-ui-click="handleClick">Click me</button>
<!-- AJAX handler -->
<button data-ui-click="ajax:/api/save">Save</button>
<!-- Form submission -->
<form data-ui-submit="ajax:/api/submit">
// Register custom handler
NewUI.registerHandler('handleClick', function(element, event) {
console.log('Button clicked!');
});
// Update component via AJAX
NewUI.updateComponent('component_id', data);
# In your route
ui.state.set_state('component_id', {'count': 0})
state = ui.state.get_state('component_id')
<!-- Two-way data binding -->
<input data-ui-bind="user.name" value="{{ user.name }}">
<!-- State persistence -->
<div data-ui-component="counter" data-ui-state='{"count": 0}'>
@app.route('/dashboard')
@ui.reactive
def dashboard():
# Automatically handles partial updates
return render_template('dashboard.html', data=get_data())
@app.route('/update/<component>')
def update_component(component):
return ui.ajax.component_response(component, data=new_data)
NewUI works seamlessly with any CSS framework:
{{ ui.button("Save", class_="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600") }}
{{ ui.input("email", class_="rounded-lg border-gray-300 shadow-sm focus:ring-blue-500") }}
See the complete example: examples/tailwind_modern_ui.py - A modern dashboard with dark mode, animations, and responsive design.
{{ ui.button("Save", class="btn btn-primary") }}
{{ ui.input("email", class="form-control") }}
Comprehensive examples are included in the examples/ directory:
todo_app.py - Complete todo application with AJAX formsform_binding.py - Two-way data binding demonstrationbasic_forms.py - Simple form handling and validationdynamic_content.py - Dynamic conditional content renderingdynamic_lists.py - Efficient list updates and renderingajax_loading.py - Loading states and progress indicatorscomponent_lifecycle.py - Component lifecycle hooks demotailwind_modern_ui.py - Modern dashboard with Tailwind CSS v4.0 and dark moderealtime_chat.py - Real-time chat with WebSocket integrationstate_management.py - Redux-like state management patternsnested_components.py - Component composition and nestingspa_routing.py - Single-page application routingdebug_tools.py - Development tools and debugging helpersTodo List with Real-time Updates:
from flask import Flask
from newui import NewUI
from newui import components as ui
app = Flask(__name__)
newui = NewUI(app)
todos = []
@app.route('/')
def index():
return render_template_string('''
<div data-ui-component="todo-app" data-ui-state='{"todos": {{ todos | tojson }}}'>
<form data-ui-submit="addTodo">
{{ ui.input("todo", placeholder="Add new todo...") }}
{{ ui.button("Add", type="submit") }}
</form>
<div data-ui-list="todos" data-ui-list-item="todo">
<div class="todo-item">
<span data-ui-bind="todo.text"></span>
{{ ui.button("Delete", onclick="deleteTodo", data_todo_id="todo.id") }}
</div>
</div>
</div>
''', ui=ui, todos=todos)
Real-time Chat:
# With WebSocket support
from newui.websocket import NewUIWebSocket
socketio = SocketIO(app)
ws = NewUIWebSocket(app, socketio)
@socketio.on('send_message')
def handle_message(data):
# Broadcast to all connected clients
ws.broadcast_message({'type': 'new_message', 'message': data})
NewUI(app=None)Main framework class for Flask integration.
from newui import NewUI
newui = NewUI(app) # or newui.init_app(app)
Methods:
init_app(app) - Initialize with Flask appreactive(func) - Decorator for reactive routescomponent(name) - Decorator for custom componentscomponents ModuleBuilt-in UI components.
from newui import components as ui
# Basic components
ui.button(text, onclick=None, type="button", variant="primary", disabled=False, class_="")
ui.input(name, type="text", value="", placeholder="", label=None, bind=None, required=False)
ui.form(action="", method="POST", ajax=False, csrf_token=None, class_="")
ui.select(name, options=[], selected=None, label=None, bind=None, class_="")
# Layout components
ui.card(content, title=None, footer=None, class_="")
ui.alert(message, type="info", dismissible=False, class_="")
ui.modal(content, title=None, id=None, size="md", class_="")
# Advanced components
ui.list_render(items, item_template, bind=None, class_="")
ui.conditional(condition, content, else_content=None)
ui.loading_state(content, loading_text="Loading...", class_="")
// Get component state
const state = NewUI.getState(componentId);
// Set single value
NewUI.setStateValue(componentId, 'key', value);
// Update multiple values
NewUI.updateState(componentId, {key1: value1, key2: value2});
// Subscribe to state changes
NewUI.onStateChange(componentId, callback);
from newui.stores import Store
# Create store
store = Store('myStore', initial_state={'count': 0})
# Dispatch actions
store.dispatch('increment', payload={'amount': 1})
# Subscribe to changes
store.subscribe(lambda state: print(f"New state: {state}"))
from newui.websocket import NewUIWebSocket
ws = NewUIWebSocket(app, socketio)
# Update component state in real-time
ws.update_component_state('component-id', {'count': 42})
# Broadcast to all clients
ws.broadcast_message({'type': 'notification', 'message': 'Hello!'})
# Send to specific room
ws.broadcast_message({'type': 'update'}, room='chat-room')
from newui.devtools import init_debugger
# Enable debugging
debugger = init_debugger(app, enabled=True)
# In templates
{{ debug_code | safe }} # Inject debug client code
flask-newui/
├── newui/ # Core framework
│ ├── __init__.py # Main NewUI class
│ ├── components.py # Built-in components
│ ├── composition.py # Component composition
│ ├── devtools.py # Development tools
│ ├── routing.py # Route-based code splitting
│ ├── stores.py # State management
│ ├── websocket.py # WebSocket support
│ ├── cli.py # Command line interface
│ ├── core/ # Core modules
│ │ ├── ajax.py # AJAX handling
│ │ ├── components.py # Component system
│ │ ├── renderer.py # Template rendering
│ │ └── state.py # State management
│ └── static/ # Static assets
│ ├── newui.js # Core JavaScript
│ └── newui.css # Default styles
├── examples/ # Example applications
├── docs/ # Documentation
├── tests/ # Test suite
└── setup.py # Package configuration
# Install with examples
pip install flask-newui[examples]
# Run todo application
python examples/todo_app.py
# Run modern Tailwind CSS dashboard
python examples/tailwind_modern_ui.py
# Run real-time chat example
python examples/realtime_chat.py
# Run development tools demo
python examples/debug_tools.py
git checkout -b feature-namepython -m pytest tests/ -vIf Flask-NewUI has helped you build amazing applications, consider supporting its continued development:
Bitcoin: 3DEMZi7sx1ZJWwGi8jzq3yqevGoyczFn9X
Your contributions help maintain and improve this open-source project. Thank you for your support! 🙏
MIT License - see LICENSE file for details.
For Flask Developers:
For Modern Development:
For Production:
Get started today and transform your Flask applications with modern UI capabilities!
FAQs
A modern reactive frontend framework that bridges Flask/Jinja2 with modern UI capabilities
We found that flask-newui 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.
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.
Research
/Security News
A flawed sandbox in @nestjs/devtools-integration lets attackers run code on your machine via CSRF, leading to full Remote Code Execution (RCE).
Product
Customize license detection with Socket’s new license overlays: gain control, reduce noise, and handle edge cases with precision.
Product
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.