# Soren-N Qt Web Bridge
[](https://badge.fury.io/py/soren-n-qt-web-bridge)
[](https://pypi.org/project/soren-n-qt-web-bridge/)
[](https://www.gnu.org/licenses/gpl-3.0)
Clean Qt WebView widgets for hosting modern web UIs without styling conflicts.
## ✨ Features
- **🎨 Zero Qt Styling Conflicts** - No interference with your web content's CSS
- **🔗 Clean Python-JavaScript Bridges** - Simple bidirectional communication via WebChannel
- **🚀 Easy Integration** - Drop into any Qt application with minimal setup
- **🛠️ Development Friendly** - Support for both development and production content loading
- **📦 QtPy Compatible** - Works with PySide6, PyQt6, PySide2, and PyQt5
- **🎯 Minimal API** - Small, focused API surface for easy learning
## 🚀 Quick Start
### Installation
```bash
# Install the package
pip install soren-n-qt-web-bridge
# For examples and development
pip install soren-n-qt-web-bridge[examples]
```
### Basic Usage
```python
from qtpy.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget
from qt_web_bridge import BridgedWebView
app = QApplication([])
# Create main window
window = QMainWindow()
central_widget = QWidget()
window.setCentralWidget(central_widget)
layout = QVBoxLayout(central_widget)
# Create and setup WebView
webview = BridgedWebView()
webview.set_web_content("path/to/your/web/dist")
layout.addWidget(webview)
# Load content
webview.load_content()
window.show()
app.exec()
```
### With Python-JavaScript Bridge
```python
from qt_web_bridge import BridgedWebView, DataBridge, ActionBridge
# Create WebView
webview = BridgedWebView()
webview.set_web_content("web-content")
# Create bridges
data_bridge = DataBridge()
action_bridge = ActionBridge()
# Set up data
items = [
{"id": "1", "name": "Item 1", "description": "First item"},
{"id": "2", "name": "Item 2", "description": "Second item"}
]
data_bridge.set_items(items)
# Register action handler
def handle_button_click(params):
print(f"Button clicked with params: {params}")
return {"status": "success", "message": "Button click handled"}
action_bridge.register_action_handler("button_click", handle_button_click)
# Register bridges with WebView
webview.register_bridge_object("data", data_bridge)
webview.register_bridge_object("actions", action_bridge)
# Load content
webview.load_content()
```
### JavaScript Side
```html
<!DOCTYPE html>
<html>
<head>
<title>My Web UI</title>
<script src="qrc:///qtwebchannel/qwebchannel.js"></script>
</head>
<body>
<div id="app">Loading...</div>
<script>
new QWebChannel(qt.webChannelTransport, function(channel) {
// Access Python bridges
const data = channel.objects.data;
const actions = channel.objects.actions;
// Get data from Python
const itemsJson = data.get_all_items();
const items = JSON.parse(itemsJson);
console.log('Items from Python:', items);
// Call Python action
function handleClick() {
actions.execute_action('button_click', JSON.stringify({
button: 'test',
timestamp: Date.now()
}));
}
// Listen for data updates from Python
data.items_loaded.connect(function(itemsJson) {
const items = JSON.parse(itemsJson);
updateUI(items);
});
});
</script>
</body>
</html>
```
## 🔧 Core Components
### `BridgedWebView`
Main WebView widget with zero Qt styling interference.
### `WebViewBridge`
Base class for Python-JavaScript communication.
### `DataBridge`
Specialized bridge for data synchronization.
### `ActionBridge`
Specialized bridge for handling user actions.
### `WebViewPanel`
Optional panel wrapper for host application integration.
## 🎯 Use Cases
- **Houdini Plugin UIs** - Integrate React/Vue UIs into Houdini panels
- **Maya Tools** - Modern web UIs without Qt styling conflicts
- **Desktop Applications** - Hybrid Qt/Web applications
- **Data Visualization** - Interactive charts and dashboards
## 🔍 Examples
Run the included examples:
```bash
# Simple WebView demo
python examples/simple_webview_example.py
# Bridge communication demo
python examples/bridge_communication_example.py
```
## 📄 License
GPL v3 or later - see [LICENSE](LICENSE) file for details.
Raw data
{
"_id": null,
"home_page": null,
"name": "soren-n-qt-web-bridge",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.11",
"maintainer_email": null,
"keywords": "bridge, javascript, pyside6, qt, qtpy, webview",
"author": null,
"author_email": "Soren N <soren@example.com>",
"download_url": "https://files.pythonhosted.org/packages/30/94/b1fde8b802e6119aec2a5a2cea4e6caf9a5aec72947dfc66e50ad8fc4a94/soren_n_qt_web_bridge-0.1.0.tar.gz",
"platform": null,
"description": "# Soren-N Qt Web Bridge\n\n[](https://badge.fury.io/py/soren-n-qt-web-bridge)\n[](https://pypi.org/project/soren-n-qt-web-bridge/)\n[](https://www.gnu.org/licenses/gpl-3.0)\n\nClean Qt WebView widgets for hosting modern web UIs without styling conflicts.\n\n## \u2728 Features\n\n- **\ud83c\udfa8 Zero Qt Styling Conflicts** - No interference with your web content's CSS\n- **\ud83d\udd17 Clean Python-JavaScript Bridges** - Simple bidirectional communication via WebChannel\n- **\ud83d\ude80 Easy Integration** - Drop into any Qt application with minimal setup\n- **\ud83d\udee0\ufe0f Development Friendly** - Support for both development and production content loading\n- **\ud83d\udce6 QtPy Compatible** - Works with PySide6, PyQt6, PySide2, and PyQt5\n- **\ud83c\udfaf Minimal API** - Small, focused API surface for easy learning\n\n## \ud83d\ude80 Quick Start\n\n### Installation\n\n```bash\n# Install the package\npip install soren-n-qt-web-bridge\n\n# For examples and development\npip install soren-n-qt-web-bridge[examples]\n```\n\n### Basic Usage\n\n```python\nfrom qtpy.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget\nfrom qt_web_bridge import BridgedWebView\n\napp = QApplication([])\n\n# Create main window\nwindow = QMainWindow()\ncentral_widget = QWidget()\nwindow.setCentralWidget(central_widget)\nlayout = QVBoxLayout(central_widget)\n\n# Create and setup WebView\nwebview = BridgedWebView()\nwebview.set_web_content(\"path/to/your/web/dist\")\nlayout.addWidget(webview)\n\n# Load content\nwebview.load_content()\n\nwindow.show()\napp.exec()\n```\n\n### With Python-JavaScript Bridge\n\n```python\nfrom qt_web_bridge import BridgedWebView, DataBridge, ActionBridge\n\n# Create WebView\nwebview = BridgedWebView()\nwebview.set_web_content(\"web-content\")\n\n# Create bridges\ndata_bridge = DataBridge()\naction_bridge = ActionBridge()\n\n# Set up data\nitems = [\n {\"id\": \"1\", \"name\": \"Item 1\", \"description\": \"First item\"},\n {\"id\": \"2\", \"name\": \"Item 2\", \"description\": \"Second item\"}\n]\ndata_bridge.set_items(items)\n\n# Register action handler\ndef handle_button_click(params):\n print(f\"Button clicked with params: {params}\")\n return {\"status\": \"success\", \"message\": \"Button click handled\"}\n\naction_bridge.register_action_handler(\"button_click\", handle_button_click)\n\n# Register bridges with WebView\nwebview.register_bridge_object(\"data\", data_bridge)\nwebview.register_bridge_object(\"actions\", action_bridge)\n\n# Load content\nwebview.load_content()\n```\n\n### JavaScript Side\n\n```html\n<!DOCTYPE html>\n<html>\n<head>\n <title>My Web UI</title>\n <script src=\"qrc:///qtwebchannel/qwebchannel.js\"></script>\n</head>\n<body>\n <div id=\"app\">Loading...</div>\n \n <script>\n new QWebChannel(qt.webChannelTransport, function(channel) {\n // Access Python bridges\n const data = channel.objects.data;\n const actions = channel.objects.actions;\n \n // Get data from Python\n const itemsJson = data.get_all_items();\n const items = JSON.parse(itemsJson);\n console.log('Items from Python:', items);\n \n // Call Python action\n function handleClick() {\n actions.execute_action('button_click', JSON.stringify({\n button: 'test',\n timestamp: Date.now()\n }));\n }\n \n // Listen for data updates from Python\n data.items_loaded.connect(function(itemsJson) {\n const items = JSON.parse(itemsJson);\n updateUI(items);\n });\n });\n </script>\n</body>\n</html>\n```\n\n## \ud83d\udd27 Core Components\n\n### `BridgedWebView`\nMain WebView widget with zero Qt styling interference.\n\n### `WebViewBridge`\nBase class for Python-JavaScript communication.\n\n### `DataBridge` \nSpecialized bridge for data synchronization.\n\n### `ActionBridge`\nSpecialized bridge for handling user actions.\n\n### `WebViewPanel`\nOptional panel wrapper for host application integration.\n\n## \ud83c\udfaf Use Cases\n\n- **Houdini Plugin UIs** - Integrate React/Vue UIs into Houdini panels\n- **Maya Tools** - Modern web UIs without Qt styling conflicts \n- **Desktop Applications** - Hybrid Qt/Web applications\n- **Data Visualization** - Interactive charts and dashboards\n\n## \ud83d\udd0d Examples\n\nRun the included examples:\n\n```bash\n# Simple WebView demo\npython examples/simple_webview_example.py\n\n# Bridge communication demo \npython examples/bridge_communication_example.py\n```\n\n## \ud83d\udcc4 License\n\nGPL v3 or later - see [LICENSE](LICENSE) file for details.\n",
"bugtrack_url": null,
"license": "GPL-3.0-or-later",
"summary": "Clean Qt WebView widgets for hosting modern web UIs without styling conflicts",
"version": "0.1.0",
"project_urls": {
"Documentation": "https://qt-web-bridge.readthedocs.io/",
"Homepage": "https://github.com/soren-n/qt-web-bridge",
"Issues": "https://github.com/soren-n/qt-web-bridge/issues",
"Repository": "https://github.com/soren-n/qt-web-bridge.git"
},
"split_keywords": [
"bridge",
" javascript",
" pyside6",
" qt",
" qtpy",
" webview"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "9735cea975bb39d34ca1e60073c5c7eb576a4b53b33b025bfbc4d6562c86c2dc",
"md5": "afb8f6e0efe134c14dc51b5dcef3e8fe",
"sha256": "0c1fd9786f87b4496dbef1071e9d61a8ff40156dbb28ddc207ce798cb36a71ac"
},
"downloads": -1,
"filename": "soren_n_qt_web_bridge-0.1.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "afb8f6e0efe134c14dc51b5dcef3e8fe",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.11",
"size": 26133,
"upload_time": "2025-08-22T13:22:53",
"upload_time_iso_8601": "2025-08-22T13:22:53.377090Z",
"url": "https://files.pythonhosted.org/packages/97/35/cea975bb39d34ca1e60073c5c7eb576a4b53b33b025bfbc4d6562c86c2dc/soren_n_qt_web_bridge-0.1.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "3094b1fde8b802e6119aec2a5a2cea4e6caf9a5aec72947dfc66e50ad8fc4a94",
"md5": "02eb46c7fc592a6b53a66576d184a9e7",
"sha256": "84e9af00c409b543ab30221e8ee60b2c6ae7ef3a893fad17e050ad00997e5096"
},
"downloads": -1,
"filename": "soren_n_qt_web_bridge-0.1.0.tar.gz",
"has_sig": false,
"md5_digest": "02eb46c7fc592a6b53a66576d184a9e7",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.11",
"size": 33837,
"upload_time": "2025-08-22T13:22:54",
"upload_time_iso_8601": "2025-08-22T13:22:54.438631Z",
"url": "https://files.pythonhosted.org/packages/30/94/b1fde8b802e6119aec2a5a2cea4e6caf9a5aec72947dfc66e50ad8fc4a94/soren_n_qt_web_bridge-0.1.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-08-22 13:22:54",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "soren-n",
"github_project": "qt-web-bridge",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "soren-n-qt-web-bridge"
}
JSON
