01 — Your first document
What you will have at the end: a document you wrote, watched render, and saved — including code, a diagram and an equation — and the handful of keystrokes that make the rest of the app quick.
What you need: a browser. An account is optional — if you do not have one, everything here works in the sandbox and step 7 is where you keep the work. If you are already signed in, it all works the same and you can skip step 7.
1. Open it and start typing
Go to markdown-den.com. If you do not have an account, you land in a live sandbox: a real workspace that lives in your browser, with no sign-up in front of it. If you are signed in, you land in your own workspace instead. Everything in this tutorial works either way.
The screen is three columns:
| Column | What it is |
|---|---|
| Left | The file explorer — your workspaces and their documents |
| Middle | The editor. Markdown source, syntax-highlighted |
| Right | The preview. What the document actually looks like, updating as you type |
What you are reading sits over the middle and right columns. It is a page the app brings with it rather than a file, so there is nothing in it to edit and it never enters your tree. In a fresh sandbox that is also why the explorer on the left is empty: you have not written anything yet. If you are signed in, your existing documents are sitting there instead.
2. Make a document of your own
Press Ctrl+Alt+N — a name prompt appears. Call it notes.md and hit Enter.
Your new file opens in its own tab, this page steps aside, and the file appears in the explorer on the left. Type a heading into the middle column:
# My first note
The right-hand side renders it as you go. That is the whole loop: you write markdown, you see the document.
Now paste this in underneath and watch the right-hand side:
# Notes
Some **bold** text, some `inline code`, and a list:
- one
- two
- nested
```ts
const kind: "human" | "agent" = "human";
```
> A quote, for the look of it.
Three things worth noticing while you are here:
- The code block is syntax-highlighted in the preview, by language.
- The list nests on two spaces of indent.
- Nothing has been saved yet. Look at the tab: a
●has appeared before the filename. That dot means unsaved changes.
3. Diagrams, math, code and images
The preview does more than headings and lists. Several things render that usually need a separate tool, and they are all just fenced blocks or ordinary markdown syntax.
Code, in a fence with the language after the backticks. You saw this in step 2
— the language is what gets it highlighted, so ts and python and sql each
look like themselves.
Diagrams, in a fence marked mermaid. You describe the diagram in text and it
is drawn for you:
```mermaid
flowchart LR
Idea([Idea]) --> Draft[Draft]
Draft --> Review{Good?}
Review -->|yes| Ship[Ship it]
Review -->|no| Draft
```
Which comes out as:
The useful part is that a diagram is text, so it lives in the document, diffs like prose, and an agent can edit it. Flowcharts, sequence diagrams, state diagrams and Gantt charts all work — Mermaid's own documentation is the reference for what you can draw.
Math, with dollar delimiters, rendered by KaTeX. Two dollars around a block on its own line:
$$
\int_a^b f(x)\,dx = F(b) - F(a)
$$
Which comes out as:
Double dollars work inline too, so sits in a sentence like this one.
A bare $…$ is deliberately left as ordinary text, so a line about prices costing
$5 and $10 survives being written down.
Images, and the easy way is not to type anything: copy an image and paste it straight into the editor. It is uploaded into the workspace and the markdown to display it is written for you at your cursor. You can also drag a file into the explorer on the left, which uploads it into the tree — that route does not write anything at your cursor, so you reference it yourself.
What a paste writes looks like this — an exclamation mark, the alt text in square brackets, and the path in round ones:
Two things about that are worth knowing. The alt text you get is the file name with its extension dropped, which is a placeholder rather than a description — replace it with what the picture actually shows, because that is what a screen reader says and what appears when the image cannot load. And the path is written from the workspace root, not from the document.
You can write either. A path is looked up from the root first and relative to the
document second, so images/diagram.png and ../shared/logo.png both resolve.
The angle brackets are worth keeping — they are what lets a filename contain
spaces without breaking the link.
Two things follow, and both save an afternoon:
- A root path survives moving the document. A path relative to the document does not, unless the image moves with it — and a broken image is something the preview shows you immediately rather than something you find later.
- A path that works in the preview works everywhere — in a shared link, on someone else's screen, on your phone. There is no separate step that makes an image public.
A rule of thumb for all of these: if it does not render, the fence is usually the reason. A missing closing fence swallows the rest of the document, and a misspelled language name gives you a plain block rather than an error. The preview is the fastest check you have — it updates as you type, so you find out immediately rather than after publishing.
4. Save it
Press Ctrl+S. The dot goes.
Your work is also saved automatically about a second after you stop typing, so a
closed tab does not lose it — to this browser while you are in the sandbox, and to
your account once you sign in. The dot is still the honest signal of what has not
been written yet, and Ctrl+S is what clears it.
5. The four keys
You can drive everything from here without learning anything else:
| Key | What it does |
|---|---|
Ctrl+P | Jump to a file by name. Start typing, hit Enter |
Ctrl+Shift+P | Every command in the app, searchable. When you do not know where something is, it is here |
Ctrl+S | Save the file you are in |
Ctrl+B | Hide the explorer when you want the width |
Ctrl+Shift+P is the one to remember. Themes, new workspace, upload files,
save all, share the current file — they are all in that list, and you can find
them by typing three letters of what you want rather than hunting for a button.
Some of them want an account and appear once you have one.
Try it now: press Ctrl+Shift+P, type theme, and press Enter. The theme picker
previews each one as you arrow through the list. There are twenty-four; pick the
one you want to look at all day.
6. Give yourself more room
Press Ctrl+Alt+V to cycle the layout: Editor only → Side by side →
Preview only, and back.
Preview-only is not a read-only mode. Click anywhere in the rendered document and you get a caret, and you can type straight into it. The markdown is still the source of truth underneath; you are just not looking at it.
7. Keep it
If you are already signed in, skip this step — your work is on the server already, and the tutorials that follow assume it is.
If you came in through the sandbox without an account, everything so far lives in this browser and nowhere else. Clear your browser data and it is gone, and it is not on your phone.
Click Sign in in the top right. The form asks Bring your sandbox work along? — leave it on Save it and the documents you just wrote land in your account rather than being replaced by an empty workspace. Signing in is also what unlocks the things that need a server: collaborators, comments, share links, and AI agents.