Write, Run & Share JavaFX code online using OneCompiler's JavaFX online compiler for free. It's one of the robust, feature-rich online compilers for JavaFX, running on JavaFX 17. The window your code creates is streamed live into the browser — no JDK install, no javafx-sdk to download, no --module-path flags to remember. The editor shows sample boilerplate code when you choose language as JavaFX and start coding.
JavaFX is the modern successor to Swing — first released by Sun in 2008 and now maintained as an open-source project under OpenJFX. It brings hardware-accelerated 2D and 3D graphics, a retained-mode scene graph, CSS-driven styling, FXML markup, and observable properties to Java desktop development. If you want a Java GUI that looks at home next to a 2020s web app — gradients, transitions, animations, real CSS — JavaFX is the toolkit to reach for.
Every JavaFX app extends Application and overrides start(Stage stage). launch(args) kicks off the JavaFX runtime; the start method is your entry point.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class Main extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage stage) {
Label label = new Label("Hello, JavaFX!");
label.setStyle("-fx-font: 20 'SansSerif'; -fx-font-weight: bold;");
stage.setTitle("My App");
stage.setScene(new Scene(new StackPane(label), 360, 220));
stage.show();
}
}
JavaFX organises the UI as a tree of Node objects rooted at the Scene, which is hosted by a Stage (the OS window). Every control, shape, and layout container is a Node — that's how the same APIs (setOnMouseClicked, setStyle, transforms) work across the whole framework.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class Main extends Application {
public static void main(String[] args) { launch(args); }
@Override
public void start(Stage stage) {
Label title = new Label("Counter");
Label value = new Label("0");
Button inc = new Button("+1");
int[] count = {0};
inc.setOnAction(e -> value.setText(String.valueOf(++count[0])));
VBox root = new VBox(12, title, value, inc);
root.setStyle("-fx-padding: 20; -fx-alignment: center;");
stage.setScene(new Scene(root, 280, 200));
stage.setTitle("Counter");
stage.show();
}
}
JavaFX ships with the controls you'd expect — buttons, text fields, checkboxes, choice boxes, sliders, progress bars, tables, and trees.
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class Main extends Application {
public static void main(String[] args) { launch(args); }
@Override
public void start(Stage stage) {
TextField name = new TextField(); name.setPromptText("Your name");
PasswordField pw = new PasswordField(); pw.setPromptText("Password");
CheckBox remember = new CheckBox("Remember me");
ChoiceBox<String> lang = new ChoiceBox<>();
lang.getItems().addAll("Python", "Java", "Go");
lang.setValue("Java");
Slider slider = new Slider(0, 100, 50);
ProgressBar bar = new ProgressBar(0.7);
VBox root = new VBox(8, name, pw, remember, lang, slider, bar);
root.setPadding(new Insets(20));
stage.setScene(new Scene(root, 320, 320));
stage.show();
}
}
JavaFX layouts are nodes themselves — drop other nodes into them and they handle the geometry. The everyday ones are VBox, HBox, BorderPane, GridPane, and StackPane.
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;
public class Main extends Application {
public static void main(String[] args) { launch(args); }
@Override
public void start(Stage stage) {
GridPane grid = new GridPane();
grid.setHgap(8); grid.setVgap(8);
grid.setPadding(new Insets(20));
grid.add(new Label("Email:"), 0, 0);
grid.add(new TextField(), 1, 0);
grid.add(new Label("Password:"), 0, 1);
grid.add(new TextField(), 1, 1);
grid.add(new Button("Sign in"), 1, 2);
stage.setScene(new Scene(grid, 320, 180));
stage.setTitle("Login");
stage.show();
}
}
Every JavaFX node accepts a CSS class and inline styles. The property names are prefixed with -fx- but otherwise behave like the CSS you already know.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class Main extends Application {
public static void main(String[] args) { launch(args); }
@Override
public void start(Stage stage) {
Button primary = new Button("Primary");
primary.setStyle(
"-fx-background-color: #2563eb;" +
"-fx-text-fill: white;" +
"-fx-padding: 10 20;" +
"-fx-background-radius: 8;" +
"-fx-font-size: 14;");
Button outline = new Button("Outline");
outline.setStyle(
"-fx-background-color: transparent;" +
"-fx-border-color: #2563eb;" +
"-fx-text-fill: #2563eb;" +
"-fx-padding: 10 20;" +
"-fx-border-radius: 8;");
HBox root = new HBox(12, primary, outline);
root.setStyle("-fx-padding: 30; -fx-alignment: center;");
stage.setScene(new Scene(root, 320, 140));
stage.show();
}
}
JavaFX properties are observable — bind a label's text to a slider's value and the label updates automatically as the user drags.
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class Main extends Application {
public static void main(String[] args) { launch(args); }
@Override
public void start(Stage stage) {
Slider slider = new Slider(0, 100, 50);
Label value = new Label();
value.textProperty().bind(Bindings.format("Value: %.0f", slider.valueProperty()));
VBox root = new VBox(12, slider, value);
root.setStyle("-fx-padding: 20;");
stage.setScene(new Scene(root, 320, 120));
stage.show();
}
}
For 2D graphics, drop Shape nodes (Rectangle, Circle, Line, Path) into the scene graph, or grab a GraphicsContext from a Canvas for immediate-mode drawing.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class Main extends Application {
public static void main(String[] args) { launch(args); }
@Override
public void start(Stage stage) {
Canvas canvas = new Canvas(400, 260);
GraphicsContext g = canvas.getGraphicsContext2D();
g.setFill(Color.web("#0f172a"));
g.fillRect(0, 0, 400, 260);
g.setFill(Color.web("#f59e0b"));
g.fillOval(40, 40, 100, 100);
g.setStroke(Color.web("#22d3ee"));
g.setLineWidth(3);
g.strokeRect(180, 40, 180, 100);
g.setFill(Color.WHITE);
g.fillText("Hello, Canvas!", 40, 200);
stage.setScene(new Scene(new Pane(canvas), 400, 260));
stage.show();
}
}
JavaFX has a built-in animation framework — TranslateTransition, FadeTransition, RotateTransition, and the general-purpose Timeline for arbitrary KeyValue interpolation.
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class Main extends Application {
public static void main(String[] args) { launch(args); }
@Override
public void start(Stage stage) {
Circle ball = new Circle(30, 130, 24, Color.CRIMSON);
Pane root = new Pane(ball);
TranslateTransition t = new TranslateTransition(Duration.seconds(1.4), ball);
t.setByX(300);
t.setAutoReverse(true);
t.setCycleCount(TranslateTransition.INDEFINITE);
t.play();
stage.setScene(new Scene(root, 400, 260));
stage.show();
}
}