This guide aims at making you familiar with the basic UI components of Nextjournal, so that you can immediately start working on your first interactive notebook.

Let's start!

The Dashboard

Once you have logged into Nextjournal, you will see your dashboard, which shows (among other things) the list of all your notebooks. Any new notebook that you create will appear here. For more details about the dashboard, see here.

Creating a notebook

Creating a notebook is as simple as clicking on the + New button just above the top right corner of your dashboard, which will bring you to your newly created notebook's editor.

The Editor

Great! Now you can start writing. Or programming. Or both :)

You can either continue with an empty notebook, or pick one of the existing templates, which come with code included to help you get started with each language.

Here, we continue with an empty notebook.

You can think of your notebook as a document consisting of blocks of different content types, such as text, files, code (in the form of code cells), and so on.

The Command Bar

There's a lot you can do in Nextjournal. The Command Bar at the bottom of your screen is a central component of our interface, and is there to help you discover all the possible actions, as well as their shortcuts. The Command Bar will also suggest possible actions depending on the context, i.e., what you are interacting with at that moment in the notebook.

Adding and formatting text

Writing and formatting text in Nextjournal is intuitive and easy, and there are multiple ways to do it.

Using Markdown

The Nextjournal editor supports Markdown syntax, allowing for smooth text formatting and structuring. For example, typing - Space at the beginning of a new block will give you a bulleted list, ### Space will give you a heading, and so on (you can find some Markdown basics here). If you change your mind about the text element you've just formatted, pressing Backspace removes the formatting.

You can write (and add some code! but we'll get to that in a bit) without ever getting your hands off the keyboard, like we do here:

Using the Interface

Another way is to use the “+” button located below each block, or press Ctrl/Cmd E; this will give you an overview of the possibilities:

Text transformations

To change the text formatting, use the “•••” button next to each block to open the Options menu. Alternatively, press Shift Ctrl/Cmd O. You can, e.g., turn a bulleted list into a numbered list:

To add text styles (like bold, italic, strikethrough, code), or to make it a link, select the text that you wish to format, and click on one of the Command Bar suggestions at the bottom of your screen (or use their shortcuts):

Inline formulas

You can write your formulas in LaTeX and surround them with $, and they will be displayed as math.

Keyboard Shortcuts

Everything (or almost everything) you can do in Nextjournal can also be done with a keyboard shortcut. To discover an action, together with its corresponding shortcut, you have the Command Bar always at hand at the bottom of your screen. In the Command Bar you'll also find different suggestions that depend on the context, i.e., what you are interacting with at that moment. Pretty neat!

Adding and executing code

In Nextjournal, you can execute code in different programming languages within the same notebook. The currently supported languages are Bash, Python, Clojure, R, Julia, and Agda.

To add a code cell for a specific language, you can use the “+” button, or press Ctrl/Cmd E , and find the corresponding option from the menu.

Alternatively, type ```<language name>, and then press Space for any of the above languages. If you type ``` Space without specifying a language, you'll add a code cell in your most recently used language (or, if you used none, a Julia code cell).

Let's add a code cell to use the R programming language, and use it to make a plot with the mtcars dataset that comes included with R. Once the cell has executed (with Ctrl/Cmd Enter), the result is displayed below it — in this case our scatter plot:

Let's quickly add another code cell, that uses Python this time:

This code cell prints to standard output (stdout) in a collapsible, scrolling window.

What is the "Runtimes" section on the Sidebar?

Every time you create a code cell, Nextjournal takes care of setting up and configuring the environment that your code needs in order to be executed, the so-called runtime. A different runtime is created each time you add a code cell for a different programming language - you can see it if you look at the sidebar of our R and Python example above. Further, multiple code cells of the same language share the same runtime - unless you change it.

Having independent and configurable runtimes is a powerful feature. For a more in-depth look into runtimes, their configuration, and how to leverage them, see here.

Adding files

Uploading a file is fairly straightforward; this can be done either with the “+” button, as seen previously, or by just dragging and dropping the file into the notebook:

Now, the file will be accessible from any code cell within the notebook.

To insert the path to the file inside a code cell, press Shift Ctrl/Cmd E. Or look for the option in the Command Bar!

For a more detailed look into how you can work with code and data, see our corresponding guide.

What's next?

That was it for our Quickstart guide. To get more insight into what you can do with Nextjournal, check out the rest of our documentation. Or just go ahead, and start experimenting with your own notebook!