Scene Builder

Scene Builder is a free visual editor for FXML files. You drag controls with the mouse from a palette into the window and change properties in a side panel, without typing XML by hand. The editor saves an ordinary FXML file, the same kind we wrote by hand, so you can switch freely between the editor and the text.

Installing

Scene Builder is maintained by Gluon. Installers for Windows, macOS and Linux are on the gluonhq.com/products/scene-builder page. Take the latest version; it opens files written for JavaFX 25.

In IntelliJ IDEA set the path to the program in the settings: Languages & Frameworks → JavaFX → Path to SceneBuilder. After that, the context menu of an .fxml file gets an Open In SceneBuilder item.

The editor window

Panel	Where	What it holds
Library	Top left	The palette: Containers, Controls, Shapes and other groups
Document → Hierarchy	Bottom left	The node tree, like the scene graph
Document → Controller	Bottom left	The controller class
Inspector → Properties	Right	Text, font, style, CSS classes
Inspector → Layout	Right	Sizes, padding, growing, the `GridPane` cell
Inspector → Code	Right	`fx:id` and event handlers

The window itself is in the middle. A control from the palette is dragged either straight into the window or to the right place in the Hierarchy tree; in the tree it is easier to land inside the right container.

Connecting the controller

Open main-view.fxml with File → Open.
In Document → Controller, type com.example.notes.MainController into the Controller class field.
Select a button and in Inspector → Code set its fx:id, for example addButton, and addNote in the On Action field.
The View → Show Sample Controller Skeleton menu shows a class template with fields for every fx:id. It is handy to copy into the controller:

// src/main/java/com/example/notes/MainController.java — fields from the skeleton
@FXML
private Button addButton;
@FXML
private Button deleteButton;

To preview the window use Preview → Show Preview in Window: buttons and fields work there, but the controller code does not run.

What changes in the file

Scene Builder writes markup in its own way. After saving, the bottom row of buttons looks like this:

<!-- src/main/resources/com/example/notes/main-view.fxml — after Scene Builder -->
<HBox spacing="8.0" BorderPane.alignment="CENTER">
    <children>
        <Button fx:id="addButton" mnemonicParsing="false" onAction="#addNote" text="Add" />
        <Button fx:id="deleteButton" mnemonicParsing="false" onAction="#deleteNote" text="Delete" />
    </children>
    <padding>
        <Insets top="12.0" />
    </padding>
</HBox>

The meaning is the same: an explicit <children> tag, numbers with a fractional part and the mnemonicParsing="false" attribute, which turns off underlined letters for Alt shortcuts. The order of attributes and the indentation change too, so in Git history the first save from Scene Builder looks like a big edit.

What to use when

Task	Better tool
Sketching a new window, tuning spacing	Scene Builder
Renaming an `fx:id` in many places, comparing versions	The text
Repeated elements, data from a database	Java code in the controller

Common mistake

A fresh Scene Builder writes the version of its own JavaFX into the root tag, for example xmlns="http://javafx.com/javafx/26". If the application runs on JavaFX 25, the launch prints WARNING: Loading FXML document with JavaFX API of version 26 by JavaFX runtime of version 25.0.4. The window opens, but controls that your version does not have cannot be loaded. Keep the project's JavaFX version no lower than the editor's, or remove the number from xmlns.

Thanks for reading!