1. 1Sign up or sign in from the navbar.
2. 2Open Workspace (/notes) and click Create note, or go directly to /notes/create.
3. 3Add a title, write the body in the rich-text editor, optionally add tags, pick a snippet language, and paste code.
4. 4Save — your note appears on the workspace dashboard and in the full library at /notes/all.

Code Notebook is a developer notebook for capturing how you solved something: a title, a rich-text explanation, optional tags, and an optional code snippet with syntax highlighting.

Everything is private to your account. Notes sync to the cloud so your library is available whenever you sign back in.

The workspace (/notes) is your dashboard — recent notes and shortcuts to create or open the full library.

All notes (/notes/all) is the paginated grid with search, tag filters, and per-card actions.

Every note has four main parts: title, rich-text body, optional tags, and an optional code snippet with a language.

Create and edit use the same layout: note details and body at the top, code snippet in the middle, and an AI Explanation section below after you click Explain.

The content field supports headings, bullet and numbered lists, links, tables, and inline code. Use it for steps, context, links to docs, or interview takeaways.

Pick from 35+ languages in a grouped dropdown — Essentials, Systems & backend, Data & APIs, Web, DevOps, and more.

Every snippet panel includes a Copy button that puts the code on your clipboard and shows "Copied!" for two seconds.

Add tags when creating or editing a note — press Enter or comma after each one. Click × on a badge to remove a tag before saving.

Tags appear as badges on your note cards in the library.

When your notes have tags, a filter bar appears below search with an All chip and one chip per unique tag.

Click a tag to show only matching notes; click again or choose All to clear the filter.

Smart search across all your notes — title, body, snippet code, and tags.

Results update as you type. Clear the field or use the × button to reset. Pagination resets when the query changes.

Each note card has a menu with View, Edit, and Delete options.

Note view shows your formatted body text and code snippet in read-only mode, plus the created date and language badge.

Use Edit note to jump back to editing or Library to return to the grid.

Every snippet panel on create, edit, and read view includes an Explain button in the toolbar (next to Copy). It streams a plain-English explanation powered by AI.

Output appears in the AI Explanation section below the code — two short paragraphs plus a Worth knowing list. Code terms render as purple inline chips (e.g. useMemo, flatMap).

On read view and edit, explanations are saved to the note when streaming finishes. They reload automatically next time you open the note. Use Clear to remove and save an empty explanation.

On create, explanations are temporary until you save the note — open the saved note and click Explain again to keep it.

You can run up to 10 explain requests per hour while signed in.

The Copy button on every snippet panel writes the raw snippet text to your clipboard. It works on create, edit, and read views.

On read view only, Copy screenshot captures a syntax-highlighted PNG of the full snippet — useful for Slack, Notion, or tickets where you want colors preserved.

If clipboard image paste is unavailable in your browser, the capture may download instead.

In create or edit, enable Make this note public to publish a read-only URL at /notes/[id]/public — no sign-in required for viewers.

When public is on, use Copy link to grab the URL. Turn it off anytime to revoke access; the link stops working immediately.

When signed in, press Cmd+K (Mac) or Ctrl+K (Windows/Linux) anywhere in the app to open the command palette.

Search notes by title and tags, or run actions: New note, Open workspace, Open library.

Install Code Notebook from the VS Code Marketplace first — then connect it with an API key from the web app.

1. 1Open VS Code and click Extensions in the left sidebar (or press Ctrl+Shift+X on Windows/Linux, Cmd+Shift+X on Mac).
2. 2Search for Code Notebook. Pick the extension published by Code Notebook — it should match the screenshot below.

   

3. 3Click Install and wait until it finishes. You can leave Auto Update on.

The extension uses an API key — not your browser sign-in. Create a key in the web app, then paste it into VS Code.

1. 1Sign in to Code Notebook in your browser. Open Settings from the avatar menu (top right) or the Settings link in the navbar.
2. 2Under API keys, click Create key and give it a name you'll recognize (e.g. VS Code laptop).
3. 3Copy the key immediately — it is only shown once. Keep it handy for the next step.
4. 4In VS Code, open Settings (gear icon → Settings, or Ctrl+, / Cmd+,). Search code notebook and paste your key into Code Notebook: Api Key — see the screenshot below.

   

5. 5Select code in a file, right-click → Save to Code Notebook, enter a title, and check that the note appears in your workspace.

Sign in or sign up from the navbar to access your workspace and manage notes in the web app.

Notes are private to your account by default.

Settings lets signed-in users create, list, and revoke API keys for the VS Code extension.

Each key has a label and creation date. The full key is shown only once when you create it — copy it to your password manager or VS Code settings right away.

1. 1Sign in and open Settings from the navbar or avatar menu.
2. 2Enter a name and click Create key.
3. 3Copy the key when shown — you cannot view it again.
4. 4Paste the key into the Code Notebook extension settings in VS Code.
5. 5Delete a key anytime to revoke it — create a new one if you need to reconnect.