Working with notebooks in Juno

Juno lets you work on Jupyter notebooks with much more than just a code editor: it creates an entire notebook workspace, where everything you may need is within easy reach. It makes a powerful and customizable notebook editor designed for iPad and iPhone, which lets you seamlessly navigate, view and edit files in working directory without leaving your notebook.

Working directory browser

What is working directory?
Change working directory
Recapture working directory
Grant access to working directory
File browser in a slide over
Preview files
Text editor
Open notebooks

Notebook editor

Cell menu
Floating action buttons
Keyboard shortcuts
Keyboard extension
Customizable toolbar
Cell templates
Output media viewer

Overview

Notebook workspace interface consists of two major components: working directory browser and notebook editor. When opened on an iPad in fullscreen, working directory browser is displayed on the left, and notebook editor is displayed on the right.

Juno's notebook workspace

Working directory browser

The file navigator you see on the left of the notebook editor is the working directory browser. It works just like any file browser: you can navigate the file system, copy, move, delete and rename files and folders, and do other file management things. The key here is the location it lets you browse: it is your notebook’s CWD (short for current working directory).

What is working directory?

Working directory (or CWD) in Juno is the directory where all relative file system paths in your Python scripts begin. For example, you can read a .csv file into a Pandas DataFrame by either specifying file’s absolute (full) path:

df = pd.read_csv('/Users/alice/Projects/Iris/iris.csv')

Or, if your notebook’s working directory is /Users/alice/Projects/Iris, you could simply use the file name:

df = pd.read_csv('iris.csv')

Relative paths are much easier to work with on iOS, where absolute paths are frequently changed by the system, and where you need to explicitly ask for permissions from the OS to access certain locations. And Juno makes working with paths relative to your working directory much easier by displaying its contents right next to your code.

File actions in the CWD browser

The browser lets you get a relative path quickly by long-pressing the file and selecting Copy Relative Path in the pop-up context menu — this will copy the path relative to your notebook’s CWD into the clipboard, which you can use in your code to read file contents, for example.

You can read more about the concept of working directory (also known as current working directory, or CWD) in our File system permissions and paths doc.

Back to top

Change working directory

Working directory is a per-notebook setting, and is set to notebook’s location by default. You can change it in the Ellipsis circle icon overflow menu by selecting Change Directory — Juno will remember this setting and will use selected location as this notebook’s working directory every time you open it.

Back to top

Recapture working directory

In some cases Juno may show an option to recapture the working directory:

CWD browser with blurred content and action button to recapture working directory

This can happen if you have multiple Juno windows open, and more than one notebook is on screen and active. This is due to how the concept of working directory works on the OS level: it is actually not a per-window setting under the hood, but rather a configuration of the entire process (or app in case of iOS and iPadOS). And although the apps on iPadOS can have more than one window these days, they still operate within a single process. To make working with your notebooks more seamless on iOS, Juno dynamically changes its CWD to accommodate the notebook you are (most likely) working on at this very moment. So, if at some point it guesses wrong, you can explicitly “recapture” the CWD for the window it was “stolen” from.

Back to top

Grant access to working directory

When you open a notebook for the first time, you would expect the CWD set to the directory the notebook file is in — so that you can read files sitting next to it by only using their file names, for example. However, if you open a notebook outside of Juno’s on-device storage (e.g. in iCloud, or in another app’s folder), iOS will not let you access this directory by default — you need to explicitly grant access to it.

So if the notebook you open doesn’t already have a CWD that Juno can access, it will give you an option to select a working directory, suggesting location of the notebook file by default.

CWD browser with blurred content and action button to select working directory

Juno will remember the working directory for each of your notebooks and will retain access permissions, which means you will only need to grant access to the notebook’s directory once, and Juno will take care of the rest from that point on.

Back to top

File browser in a slide over

CWD browser presented as a slide-over

You can toggle working directory browser with the Sidebar left icon button, or swipe from the screen edge while the browser is hidden to reveal it as an overlay on top of the notebook editor — great if you don’t need the CWD browser open all the time, and only need to peek at it occasionally (works on iPhone, too!).

Back to top

Preview files

CWD browser presenting a modal view with a file preview

The working directory browser comes with powerful file preview capabilities, powered by system’s Quick Look, which supports most standard file types out of the box. When selecting a file, the browser will show a compact preview by default, which you can expand by selecting the Arrow up left and arrow down right icon button. Expanded preview will open in a bigger modal view, giving you more space and showing more file actions, like annotating an image, for example. Both compact and expanded previews let you view file as text with the Doc plaintext icon button, which will open the file in the built-in text editor.

Back to top

Text editor

CWD browser presenting a built-in text editor

The working directory browser shows previews for text-based files by default, with an option to edit the file in a built-in text editor. Juno’s text editor may seem minimalistic, but it still packs a lot:

  • Syntax highlighting for the formats you’re likely to work with (like Python source files, JSON, YAML, Markdown, XML, LaTeX, R and others).
  • Powerful Find and Replace capabilities.
  • Basic file management functionality, like renaming, moving or duplicating a document.
  • Configurable view options, like text size, line wrapping, invisible characters and more.
  • Customizable toolbar.

Back to top

Open notebooks

Selecting another Jupyter notebook in your working directory browser can either open it in the same window, replacing currently open notebook, or — if your device supports multiple windows — can create a new Juno window for this notebook. Juno will ask what to do the first time you try to open a notebook, and you can adjust this behaviour later in settings.

Back to top

Notebook editor

Notebook editor

Juno offers a familiar experience of working with Jupyter notebooks in a first-class citizen app for iOS and iPadOS. It follows the same conventions as desktop JupyterLab and Jupyter Notebook applications: notebook documents can have Code cells, where you write Python code with the execution output appended below; and Markup Text cells, where you can add Markdown text, HTML or LaTeX equations. Selected cell has a gray vertical bar on the left, which changes to blue while you are editing cell contents. Each markup cell either appears rendered, with final formatting applied, or as markup source (unrendered). You can render a markup cell by executing it just as you would a code cell (or selecting Render Markup in the Bolt icon menu), and you can view its markup source by double-tapping it (or selecting Show Source in the Bolt icon menu).

Cell menu

You can access the cell menu either from a floating action Bolt icon button, or from a Bolt icon button on the toolbar. It lets you manipulate the selected cell: you can change cell type, cut/copy/paste or move cell within the notebook, manipulate code cell output and perform other actions.

Back to top

Floating action buttons

Notebook editor displays floating action buttons at the bottom, for easier access to certain actions. You can configure or disable the buttons you don’t need in Settings behind the editor’s Ellipsis circle icon overflow menu.

Play icon Run button executes the selected cell. Long press the button to change its run action — for example, to run all cells in the notebook instead.
Bolt icon Cell Menu button shows actions for manipulating the selected cell.
Plus icon Add Cell button inserts an empty code cell below the selected one; long press to choose another cell type.
Arrow up to line icon Scroll to Cell button only appears when selected cell is scrolled off screen; it brings selected cell back into view.

Back to top

Keyboard shortcuts

Notebook editor showing all key shortcuts

Juno works great with all hardware keyboards, offering key shortcuts for all cell and notebook actions. Hold the ⌘ Command key on your hardware keyboard to see all shortcuts available in the notebook editor.

Back to top

Keyboard extension

Notebook editor showing all key shortcuts

Juno’s notebook editor extends your on-screen keyboard with additional buttons and actions:

Increase indent icon Decrease indent icon buttons change selected text indentation;
Number icon button toggles selected code as commented;
Arrow up left and arrow down right with selection pins icon selects all text in the cell;
Arrow left and right with selection pins icon selects current line;
Plus selection pins badge arrow up icon extends text selection to line above;
Plus selection pins badge arrow down icon extends text selection to line below;
Contextual menu and cursor arrow icon shows or hides the selection context menu;
Chevron up icon Chevron down icon buttons navigate the cursor between notebook cells.

These actions will be available even with a hardware keyboard connected, appearing as a floating bar at the bottom.

Back to top

Customizable toolbar

Notebook editor showing customizable toolbar

Notebook editor has a customizable toolbar, where you can rearrange, add or remove items by selecting Customize Toolbar in the editor’s Ellipsis circle icon overflow menu. For example, you could add less frequently used run actions there, or disable the floating action buttons and add buttons with same actions in the toolbar instead.

Back to top

Cell templates

Notebook editor showing cell templates menu

Juno’s notebook editor lets you save a cell with its content as a reusable cell template, which you can then quickly insert in any notebook. Select Cell Templates in the Ellipsis circle icon overflow menu, or the Puzzle piece extension icon icon on the toolbar to select, edit and save new cell templates.

Back to top

Output media viewer

Notebook editor showing cell output image in a modal viewer

Select any image in the code cell output area to open it in an expanded media viewer, where you can zoom, pan, annotate and share images. The media viewer is powered by system’s Quick Look and is perfect for plots, graphs and other code generated media.

Back to top