Editor and keyboard shortcuts
From 0.1.296, the remaining packages/displays offer project/per-widget DE/EN/FR languages and optional HA sources, units and Climate controls. The overall Studio shell remains DE/EN; existing settings remain valid.
From Studio 0.1.295, additional Universal functions, radial gradients and larger Material icons are available. Existing settings and cycle-button behavior are retained; new options are explicitly selectable.
From Studio 0.1.294, previews for all eleven Interactive widgets fill their existing sidebar/selector frames in light and dark themes. Settings and runtime behavior are preserved. The source comparison against Inventwo VIS-2 1.10.0 documents remaining differences, especially additional Universal actions/content and radial slider gradients. Complete 1:1 parity has not been reached.
From Studio 0.1.293, the Basic additions following the VIS-2 review are available, including independently selected DE/EN/FR properties. Existing widget settings are retained.
From Studio 0.1.291, Ctrl+C (Copy), Ctrl+X (Cut) and Ctrl+V (Paste) work with single and multiple selected widgets. Use Cmd on macOS. They share the internal widget clipboard with the toolbar and context menu; pasted widgets receive new IDs and retain their values. Undo restores cuts and reverses pastes. Text fields keep native text shortcuts; open dialogs and runtime do not trigger widget actions.
From Studio 0.1.290, Delete opens the same confirmation dialog as the trash button for selected widgets, including multiple selection. Cancel or Escape keeps the widgets; Undo restores confirmed deletions. The optional five-minute suppression also applies to Delete. Text fields, open dialogs and runtime do not trigger widget deletion; holding down the key does not open further prompts.
Hide widgets only in runtime
From Studio 0.1.287, every widget has an In Runtime verstecken (Hide in runtime) checkbox at the top of its WIDGET tab. Check it and save the project: the widget remains visible in the editor but is hidden in runtime. Calculations and value forwarding stay active, for example from a hidden Number widget into Math. The checkbox works independently of z-index. Unchecking restores normal visibility; dedicated data flow widgets remain inherently hidden. Hidden controls cannot be clicked in runtime.
From Studio 0.1.286, explicit z-index −100 or lower hides every widget type in runtime. The widget stays visible and editable in the editor. Calculations and data flow remain active, allowing Number widgets, Math boxes and connecting lines to form an invisible processing chain. This special hiding rule does not apply at −99 or higher. Hidden controls cannot be clicked in runtime.
Page tabs
Starting with Studio 0.1.256, project pages appear as compact tabs above the canvas, between the widget palette and properties. Click a tab to switch pages; the active page is highlighted. Long tab lists scroll horizontally, and truncated names remain available in tooltips. Pages hidden from runtime are still accessible in the editor with a dashed tab border.
When a tab has focus, Left/Right arrows switch to the adjacent page and Home/End switch to the first/last page. Unsaved widget edits remain in the project; selection and open widget actions reset on page changes. Names and order follow the existing Pages menu. Creating, renaming, duplicating, visibility and deletion remain in that menu. These tabs are an editor aid; runtime keeps its existing page navigation.
Getting started
From 0.1.184, background colors distinguish palette sets: Interactive is olive green, Special blue and Data Flow violet. Basic keeps its existing appearance. Additional installed sets each receive their own color. These colors apply to palette selection buttons; inserted widgets retain their independently configured appearance.
From 0.1.185, selection boxes in every set are flatter: 34 instead of 42 px minimum height, with 32 × 26 px previews. Labels remain readable. Dashboard in widget uses the standard mdi:view-dashboard icon.
Starting with Studio 0.1.115, right-click a widget, group label or empty editor surface to open a context menu: Select, Group widgets, Ungroup, Edit group, Copy, Cut, Paste and Delete. More provides duplication, front/back ordering, lock/unlock, undo/redo and widget import/export. Unavailable actions are disabled; Escape closes the menu and up/down arrows navigate it. Select offers all widgets and widgets under the pointer.
Groups retain freely positioned members and move together when dragging a member or the group label. They persist in project data; copies and multi-widget exports receive independent groups when pasted or imported. Edit group enables individual member editing; Finish editing group or clicking the group label restores group selection. Ungroup preserves positions and dimensions. Undo/redo includes grouping and movement. Groups are flat; SVG connection lines cannot be grouped, and groups containing locked members cannot be dragged. Runtime shows neither group outlines nor editor menus. Grouping does not create tab contents or import VIS2 widgets.
Create a project under Projekte and choose a page under Seiten. Set the page size, use the left widget palette, and add an item from the palette. Search widgets at the top of the palette filters available widgets by name or type; matching groups open during the search without changing their previous expanded state. Clicking a widget selects it and shows its properties on the right. Use Runtime to check the view. Speichern saves manually; auto-save and its delay are under Settings → General. Starting with version 0.1.80, Widget packages can install a local .wg.zip. The initial API 0.1 supports validated text widgets with editable properties; installed packages appear as separate palette sets. Since 0.1.83, widget and package images may be validated SVG or PNG files; widgets without an image use the built-in SVG text symbol. Removal is blocked while a package widget is used by any project. Since 0.1.82, the Tools tab installs local .tp.zip packages. The first declarative tool previews and changes the current page background after confirmation; Undo can revert it. Tool images may also be SVG or PNG; Studio action buttons continue to use SVG icons. GitHub installation and updates will follow.
The widget selector in the top bar lets you select several widgets or clear the selection. The action bar provides cut, copy, paste, duplicate, delete and up to 50 undo/redo steps. The ten alignment actions work on multiple selected normal widgets; the first selected widget is the reference. Pressing Breite or Höhe for about 0.6 seconds opens an exact pixel-size input.
Runtime centers a page when it fits entirely inside the browser window. Larger pages start at the top-left corner; horizontal and vertical scrollbars keep the whole page reachable without changing widget coordinates.
Widget selection, copying and deletion
Starting with Studio 0.1.257, the toolbar Delete, Copy and Cut icons update immediately when widget selection changes. These actions are disabled without a selection, including after switching pages. Delete confirmation and Undo remain available.
Starting with Studio 0.1.196, the list has room for ten compact entries. Additional entries scroll inside the list while the top and bottom actions remain visible. Fewer entries keep the menu shorter. On small screens, the available height determines the number of visible rows.
The checked rows select the same widgets on the canvas. The list stays in front of them; Copy and Delete act on all checked widgets.
Drag any selected widget to move the entire selection, including after copying and pasting. Selected connections and intermediate points move with it; locked widgets prevent the joint move. Undo reverts the drag as one step.
Cancel or Escape stops deletion. The checkbox suppresses further prompts for five minutes in this editor session. Deleted widgets can still be restored with Undo.
Files and image selection
The root is /config/www/studio. Studio creates it when possible; missing write permissions produce a message. Widget image selection uses this folder too, and public paths start with /local/studio/. Search includes all subfolders and matches file names and paths regardless of case; an empty query returns to the open folder. Images, including GIF, can be selected. The up-folder action stays within this root.
Interface language
Open Settings → General → Language → App language, choose an option, then click Save:
| Option | Display language |
|---|---|
| Automatic (Home Assistant) | German when Home Assistant is set to German; English for any other HA language. If the HA language is unavailable, the browser language is used with the same German/English fallback. |
| German | Keep the interface in German. |
| English | Keep the interface in English. |
The choice is stored only in this browser and survives a reload. Other users and browsers keep their own choice. It translates interface text such as menus, dialogs, the widget palette and properties; user-defined project and widget names and widget content are not translated.
Keyboard and mouse
| Action | Control |
|---|---|
| Undo | Ctrl+Z (macOS: ⌘+Z) |
| Redo | Ctrl+Y or Ctrl+Shift+Z (macOS: ⌘+Y or ⌘+Shift+Z) |
| Add or remove a widget from a multi-selection | Hold Ctrl+Shift and click the widget |
| Move a free connection endpoint | Drag the endpoint; use arrow keys on a focused endpoint for 1-pixel steps |
| Move a connection endpoint faster | Hold Shift with an arrow key for 10-pixel steps |
| Detach a connected endpoint | Hold Ctrl and drag it; Ctrl plus an arrow key also works |
| Move an entire connection line | Drag a free line; hold Alt to drag a docked line. This detaches its endpoints. Individual point handles do not move a multi-selection; dragging starts after 6 px of movement. |
| Add an intermediate or collector point | Click the line, choose “Intermediate point” or “Collector point”, then confirm with OK |
Undo/redo shortcuts apply when focus is outside input, text area and select controls. Cut, copy and paste are available as buttons; global Ctrl+X/C/V shortcuts are not currently implemented.
Connection lines and docking points
Enable Andockpunkte in a target widget's properties. All points start off on new widgets. All points switches the twelve positions together; each point can then be adjusted individually. The group checkbox enables or disables the entire section. Drag SVG connection endpoints onto active points. An intermediate point splits the path into additional segments; only an explicitly enabled Sammelpunkt can be selected as a connection by another line. A simple crossing does not connect lines. Available settings include line and zigzag/multi-point paths, colors, width, arrowheads, animation and z-index.
Visibility and filters
Generell and Sichtbarkeit exist on every widget and are disabled by default. “Generell” includes name, comment, CSS class, filter word and lock controls. The editor filter can hide matching widgets or show only matching ones. Runtime visibility can evaluate a Home Assistant state with a condition and comparison value; group evaluation remains unfinished.