Docs / Settings and looks
Layout
Put the code and the output side by side or stacked, and give each the room it needs.
The window has two sides: your code, and its output. You choose how they sit, and JSpark keeps the choice for every tab and for the next launch.
Side by Side or Stacked
- Click the Layout button at the right end of the tab strip.
- Under Panes, choose Side by side or Stacked.
The same choices are in the View menu: Side by Side and Stacked. Side by side is the default.
Stacked puts the code on top and the output under it.
When the window is too narrow for two columns of code, JSpark stacks the panes anyway, and the Layout button shows them stacked. The menu then says Too narrow for columns. Widen to switch back. A larger text size needs a wider window for columns.
Swap Panes
To put the output first, on the left or on top, choose Output first in the Layout menu, orView → Swap Panes. Once swapped, the menu offers Code first to swap them back. Each pane keeps its size when it moves.
Resize the panes
- Drag the line between the two panes. Each pane can have from 15% to 85% of the room.
- Double-click the line to share the room evenly again.
- With the keyboard, move to the line and use the arrow keys; Home and End go to the ends, and Enter shares the room evenly.
JSpark remembers where you left the line.
How the output arranges itself
Everything opposite the code is one group: the console alone, the console and the page for a web page, or the console and the Timeline’s panels while you step through a Run. You don’t choose how this group is arranged. It arranges itself from the shape of the room it has.
| The output’s room | In the Timeline |
|---|---|
| Three times as wide as tall, or more | Console, Variables and the Call Stack side by side |
| Wider than tall | Console beside Variables, with the Call Stack under Variables |
| Taller than wide, up to twice | Console above Variables and the Call Stack, side by side |
| More than twice as tall as wide | Console, Variables and the Call Stack stacked |
Timeline · Esc to exit
In this loop
Everywhere
- Turn a panel off, and the others take its room.
- The lines between the panels can be dragged too. Where you leave them is kept when the arrangement changes.
- The Call Stack is JSpark+: The Call Stack.
- For a web page, the console’s heading shares the room with the page: Hide console, Show both or Hide page. See Web pages.
The pictures show JSpark on a Mac. On Windows, the window looks a little different and uses Ctrl for ⌘, but everything works the same way.