Two companions to the Java guides on this site, built as Vue components. Both are rendered to HTML at build time and come alive in the browser when they scroll into view (client:visible). See Using Vue Components in Posts for how that works.
Stream pipeline playground
Build a pipeline out of intermediate operations, then pick a terminal operation. Each step shows how many elements went in and out, and the Java code below updates as you go. Try moving limit above filter, or squaring large numbers: the arithmetic overflows exactly like Java’s 32-bit int.
Intermediate operations
.filter(n -> n % 2 != 0)10 → 73115953.distinct()7 → 43159.sorted(Comparator.reverseOrder())4 → 49531.limit(3)4 → 3953
List<Integer> result = Stream.of(3, 1, 4, 1, 5, 9, 2, 6, 5, 3)
.filter(n -> n % 2 != 0)
.distinct()
.sorted(Comparator.reverseOrder())
.limit(3)
.toList();More on the operations themselves in the Java Stream API guide.
Java collections explorer
The common java.util collections side by side. Filter by interface or property, sort by the cost of an operation, and click a class name for notes on when to use it.
| Order | ||||||
|---|---|---|---|---|---|---|
no nulls | Queue | insertion | — | O(1*) | O(n) | O(n) |
| List | insertion | O(1) | O(1*) | O(n) | O(n) | |
thread-safe·no nulls | Map | none | O(1) | O(1) | O(1) | O(1) |
thread-safe | List | insertion | O(1) | O(n) | O(n) | O(n) |
| Map | none | O(1) | O(1) | O(1) | O(1) | |
| Set | none | — | O(1) | O(1) | O(1) | |
| Map | insertion | O(1) | O(1) | O(1) | O(1) | |
| Set | insertion | — | O(1) | O(1) | O(1) | |
| List, Queue | insertion | O(n) | O(1) | O(n) | O(n) | |
no nulls | Queue | priority | — | O(log n) | O(n) | O(n) |
no nulls | Map | sorted | O(log n) | O(log n) | O(log n) | O(log n) |
no nulls | Set | sorted | — | O(log n) | O(log n) | O(log n) |
Average-case costs. O(1*) is amortized: usually constant, occasionally O(n) when the backing array grows. Click a class name for notes, or a column header to sort.
How they’re built
Both components are single-file Vue 3 components using <script setup> and TypeScript, and they rely on a handful of Vue features:
refandcomputed. The playground keeps only the source text, the list of operations and the terminal operation as state. The per-step trace, the result and the generated Java code are allcomputedfrom those, so nothing has to be kept in sync by hand.v-modelon text, number, radio and checkbox inputs, includingv-model.numberfor operation parameters.<TransitionGroup>animates operations as they’re added, removed and reordered (and stays still if your system asks for reduced motion).- Theme tokens. Both use the site’s Tailwind classes (
bg-accent,border-border,text-muted-foreground), so they switch with the light/dark toggle without any extra code.
Their source is in src/components/StreamPipeline.vue and src/components/CollectionsExplorer.vue.