QSS_Editor

Edit Qt style sheets (.qss) with an interactive .ui preview.

Original by Niklas Henning; adapted for Flex GUI / LinuxCNC by rdtsc/mj1911.

A .qss and .ui being worked on together; a deleted } shows the editor flagging the error.

Features (v1.1.0)

• Live preview: your QSS applies to 30+ built-in widget states, or to your own .ui, ~3s after you stop typing
• QScintilla editor: CSS syntax highlighting, code folding, brace matching, QSS-aware autocompletion
• Structural lint: syntax mistakes get a wavy underline and a margin marker (hover for the message)
• Stray-character detection: something that breaks the .qss (like an extra ') alerts the user
• Hover a previewed ui widget to see its #objectName; click to copy that name
• Draggable split between the editor and preview
• Each pane zooms independently
• Find and replace
• Window geometry, split, zoom levels, and recent files persist between sessions
• Pure Python; cross-platform (Windows, Linux, macOS)

How to use

Open a .qss (File → Open QSS…, Ctrl+O) or start typing one. The left pane is the editor; the right pane previews a .ui — the bundled widget gallery (default.ui) by default, or your own via File → Open UI… (Ctrl+Shift+O). Your QSS applies live to whichever .ui is shown; promoted/custom widgets render as their base Qt class.

• View → Apply (Ctrl+Enter) — apply now instead of waiting ~3s.
• Zoom .ui — Ctrl+= / Ctrl+- / Ctrl+0 scale the preview (a checkerboard shows the .ui's true extents)
• Zoom QSS - Ctrl+] / Ctrl+[ / Ctrl+\ size the editor font.
• View → Ignore widget style overrides (default on) — strips styleSheet properties baked into the .ui so only the editor QSS applies.
• Opening a .ui that carries embedded stylesheet data offers to extract it to a .qss and to save a stylesheet-free copy of the .ui.
• View → Revert to default UI / QSS — revert to default.ui / default.qss.

On first run, the editor loads the bundled default.qss — QtDark by Emanuel Claesson (Apache-2.0) — and default.ui; after that it reopens whatever you last used.

Original (historical) examples

Run

pip install -r requirements.txt
python qss_editor.py

Needs PyQt6 and PyQt6-QScintilla: the PyQt6.Qsci bindings must be importable (not just the qscintilla C++ library), or the app exits with a message. On Arch / Manjaro, python-pyqt6 + python-qscintilla-qt6 also work.

Development

pip install -r requirements-dev.txt
pytest

• Kept clean using pyright (pyrightconfig.json) and ruff check / ruff format.
• qsseditor_logic.py — Qt-free logic (modified-state detection, asset paths, structural lint), unit-tested in tests/.
• editor.py — the QssEditor pane: a QsciScintilla with the CSS lexer, lint rendering, and autocompletion.
• uiloader.py — loads an arbitrary .ui, mapping promoted widgets to their base class.
• tests/smoke.py — manual end-to-end check (QT_QPA_PLATFORM=offscreen python3 tests/smoke.py).
• Bundled resources: default.ui (the widget gallery) with default.qss (its default preview theme.) chrome.qss is the separate app-chrome stylesheet. Test .ui fixtures live in tests/fixtures/ui/.

Status

Intended for use with Flex GUI. No download package is provided here.

Authors

Niklas Henning · RDTSC

License

MIT — see license.txt.