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.

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, and its search functionality, which also gives you an overview of the possibilities:

Text transformations

To change the text formatting, the “•••” button next to each block can be used. We use it here to delete a section, and to turn our bulleted list into a numbered list:

Selecting text gives you the selection toolbox. You can use it to add text styles (like bold, italic, strikethrough, code block), or to make it a link:

Inline formulas

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

Keyboard shortcuts

Inside the Editor, you have the keyboard shortcuts at hand through the commands palette; you can open it at any time via Cmd J , or by clicking on the “Commands” tab in the top right corner of your screen. Further, a list of handy keyboard shortcuts can be found here.

Adding and executing code

Code cells are a special content type in Nextjournal, allowing you to execute code seamlessly in different programming languages within the same notebook. The currently supported languages are Bash, Python, Clojure, R, Julia, and Agda.

To find and add a code cell, you can use the “+” button and its menu. Alternatively, you can just type ```<language name> Space for any of the above languages. If you type ``` Space without specifying a language, you'll add a code cell with the language that you used most recently.

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 Shift 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 "Hi!" to standard output (stdout). Nextjournal’s code cells display stdout in a scrolling window, that you can collapse - this can be convenient if your stdout gets too noisy and distracts from the actual result, that may be also part of the cell output.

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 simply by 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, select your code, and click the '+' button from the selection toolbox, or simply press Ctrl/Cmd E.

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 (and that's a lot), you can have a look at the rest of our documentation. Or you can just start experimenting with your own notebook!