ObservableHQ Notebook

New: ObservableHQ Notebook 2.0 Support

This extension now supports the new ObservableHQ Notebook 2.0 format! 🎉

Key Features

• Vanilla JavaScript: No need to learn Observable JavaScript dialect
• Open HTML Format: Git-friendly notebooks with clear diffs
• Modern Imports: Support for npm, JSR, and local imports
• Static Site Generation: Build notebooks to static sites
• Backwards Compatibility: Continue using existing .ojsnb format

Quick Start with ObservableHQ Notebook

1. Use Command Palette: "Observable Kit: Create New Notebook"
2. Choose a name (e.g., my-notebook) - will create my-notebook.onb.html
3. Start writing vanilla JavaScript with display() function
4. Use "Observable Kit: Preview" to see live preview
5. Use "Observable Kit: Build Static Site" for deployment

HTML File Detection & View Switching

The extension automatically detects Observable notebooks vs regular HTML files and provides seamless switching:

Smart File Opening: When you open an HTML file, VS Code will:

• Regular HTML files: Open in text editor by default
• Observable notebook files: Show a choice dialog - "Select Editor for .html files" with options:
  • Text Editor (default HTML editor)
  • ObservableHQ Notebook (interactive notebook view)

Seamless View Switching: Once a file is open, you can switch between views using toolbar buttons:

• 📖 Switch to Notebook View - Appears when viewing Observable notebook HTML as text
• 📝 Switch to Text View - Appears when viewing notebook, switches back to HTML source
• No temporary files - Everything works directly with your original .html files

File Extensions:

• *.html - Can be opened as either text or notebook (VS Code will ask)
• *.onb.html - Reserved for explicit notebook files (opens as notebook by default)

Benefits:

• No workflow interruption - You choose how to open files
• Direct file editing - No temporary files or complex file management
• Flexible switching - Toggle between text and notebook views instantly

Manual Commands (always available):

• Right-click menu: Right-click HTML file in Explorer → "Observable Kit: Open HTML as Observable Notebook"
• Command Palette: "Observable Kit: Convert HTML to Observable Notebook" (permanently renames to .onb.html)

Learn more about ObservableHQ Notebook →

Supports

• JavaScript
• ObservableHQ JavaScript
• Markdown
• ObservableHQ Markdown
• HTML
• SQL
• SVG
• GraphViz (DOT)
• Mermaid
• LaTeX

Recommended Extension Pack

To get the full experience, it is recommended to install this extension as part of the JavsaScript Notebook extension pack.

Quick Start with ObservableHQ Notebook-Kit

1. Open a notebook-kitnotebook (extension .html)
2. Click "Switch to Notebook View" in the text toolbar.
3. Edit, run and save your notebook.
4. Optionally click "Switch to Text View" to go back to the HTML source.

Quick Start with Observable Notebooks

1. Select "OJS: Download Notebook" from command palette.
2. Paste URL from ObservableHQ website, for Example: https://observablehq.com/@observablehq/five-minute-introduction
3. Save file to known name and location (Note: Keep the default file extension of "ojsnb").
4. In VS Code open the file.
5. Click "Run All" in the notebook toolbar.

Quick Start with ObservableHQ JavaScript (.ojs) | Markdown (.omd)

1. Create a new file with either the .ojs or .omd extension (optional).
2. Open this file in a VS Code editor instance (optional).
3. Select "OJS: Import Notebook" from command palette.
4. Enter https://observablehq.com/@observablehq/a-taste-of-observable for the import URL.
5. Press Ctrl+K V to preview notebook.
6. Select "OJS: Export to HTML" from the command palette.
7. Double click the exported HTML file to view in browser (Note: You may need to host the file on a webserver if it is importing other libraries).

Commands

All commands are prefixed with "OJS" and are available via the command palette or by default shortcut key mappings

Legacy OJS Commands

ObservableHQ Notebook Commands

Settings

All settings are prefixed with "ojs." and are available via file -> preferneces -> settings menu

Sample OJS File (myfile.ojs)

md`# Generator Test`;

function* range(n) {
  for (let i = 0; i < n; ++i) {
    yield i;
  }
}

{
  for (const i of range(Infinity)) {
    yield Promises.tick(1000, i + 1);
  }
}

md`# Import Test`;

import {viewof selection as cars} from "@d3/brushable-scatterplot";
viewof cars;

md`### Selection:
~~~json
${JSON.stringify(cars, undefined, 2)}
~~~
`;

Sample OMD File (myfile.omd)

# Generator Test

_Simple Generator test_

```
function* range(n) {
  for (let i = 0; i < n; ++i) {
    yield i;
  }
}

{
  for (const i of range(Infinity)) {
    yield Promises.tick(1000, i + 1);
  }
}
```

# Import Test

_Simple Import Test_

```
import {viewof selection as cars} from "@d3/brushable-scatterplot";
viewof cars;
```

### Selection:

```json
${JSON.stringify(cars, undefined, 2)}
```

Credits

This extension would not have been possible without the following:

• ObservableHQ/parser
• ObservableHQ/runtime
• ObservableHQ/inspector
• ObservableHQ/stdlib
• @hpcc-js/observablehq-compiler

Recommended Extensions

Other recommended extensions for working with Observable notebooks formats in VS Code: