DartLab Notebooks
Interactive Dart Notebooks for Visual Studio Code
Write • Run • Explore • Document Dart Code Interactively
What is DartLab?
DartLab brings a modern, interactive notebook experience to the Dart ecosystem directly inside Visual Studio Code.
Inspired by environments like Jupyter, DartLab allows developers to build rich notebooks containing executable Dart code, markdown documentation, interactive tables, and visual graphics—all integrated into a single, version-control-friendly .dnb file format.
Whether you're exploring algorithms, prototyping flutter-ready logic, building interactive guides, or analyzing data sets, DartLab offers a unified and responsive development workflow.
🚀 Key Features
| Feature Area |
Capabilities |
Developer Experience |
| 📓 Native Notebooks |
• Native VS Code Notebook editor association
• Native Markdown and Dart code cells
• Cell execution counts & toolbar actions |
Open, edit, and document Dart logic seamlessly in a native VS Code view. |
| ⚡ Interactive Execution |
• Stateful run sessions persisting variables
• Streamed outputs & real-time error logs
• Run individual cells, selections, or full sheet |
Execute blocks of code sequentially while keeping memory state alive. |
| 🔧 Kernel Control |
• Control toolbar: Interrupt, Restart, Shutdown
• Health status indicators (IDLE, BUSY, OFFLINE) |
Start, stop, or reset the execution environment at any point with one click. |
| 🔍 Variable Explorer |
• Sidebar variable tree mapping active state
• Rich support for Primitives, Lists, Maps, and Objects |
Debug easily by inspecting the value and structure of variables in real time. |
| 🧠 Language LSP |
• Error diagnostics, warnings, and lints
• Smart IntelliSense, Autocomplete, and Hover Tooltips
• Go to Definition & cross-cell Rename symbol |
Keep full Dart Analysis Server code intelligence inside your notebooks. |
| 📊 Rich Output Renderers |
• Interactive, copyable tables for list/map data
• Zoomable image viewer (supports PNG, SVG, GIF, WebP)
• Sandboxed, self-resizing HTML execution iframe |
Beautifully render tables, charts, and interactive markup output. |
| 📤 Notebook Export |
• Export notebook pages to HTML, Markdown, or PDF |
Share tutorials, reports, and execution results with your team. |
⌨️ Command Palette & Menus
The extension exposes the following actions in the notebook toolbar and command menus:
| Command ID |
Title |
Toolbar Icon |
Description |
dartlab.interruptKernel |
Interrupt Execution |
$(terminate) |
Stops the active cell execution in the current VM process. |
dartlab.restartKernel |
Restart Kernel |
$(refresh) |
Resets the Dart stateful process and clears execution counts. |
dartlab.shutdownKernel |
Shutdown Kernel |
$(stop) |
Shuts down the running Dart execution kernel process. |
dartlab.clearOutputs |
Clear Outputs |
$(clear-all) |
Removes output results from all cells in the active editor. |
dartlab.refreshVariables |
Refresh Variables |
$(refresh) |
Manually queries the Dart VM for the latest active variable tree. |
⚙️ Extension Settings
Customize your execution environment in VS Code Settings:
| Setting |
Type |
Default |
Description |
dnb.execution.sandbox |
boolean |
true |
When active, executes cells inside an isolated, sandboxed Dart VM. |
dnb.rendering.maxOutputSize |
number |
100 |
Limits output buffer size (in MB) before alerting the developer. |
📝 Example Notebook
Markdown Cell
# Dart Notebook Demo
This notebook demonstrates basic Dart execution.
Code Cell
var name = "Dart";
print("Hello, $name!");
Output:
Hello, Dart!
Stateful Execution Example
Cell 1:
var counter = 10;
Cell 2:
counter += 5;
print(counter);
Output:
15
DartLab notebooks use the standard .dnb format, designed to be human-readable, lossless, and version-control friendly:
{
"cells": [
{
"kind": "markdown",
"value": "# Welcome"
},
{
"kind": "code",
"value": "print('Hello Dart');"
}
]
}
🏗 Extension Architecture
The extension bridges the VS Code notebook interface, the local Dart VM, and the Dart Analysis Server:
graph TD
subgraph VS Code Extension UI
UI[Notebook UI] <--> Controller[Notebook Controller]
Controller <--> Serializer[DNB Serializer]
Explorer[Variable Explorer]
StatusPanel[Kernel Status Panel]
end
subgraph Extension Backend
Client[Kernel Client]
LSP[Language Client / LSP]
Renderer[Rich Output Renderers]
end
subgraph External Process Layers
Kernel[Dart Kernel Process]
AnalysisServer[Dart Analysis Server]
end
UI --> Serializer
Controller <--> Client
Client <--> Kernel
LSP <--> AnalysisServer
Kernel -.-> Explorer
Kernel -.-> StatusPanel
Kernel -.-> Renderer
Renderer --> UI
📌 Requirements
Before running DartLab, ensure you have the following installed on your machine:
- Visual Studio Code
- Dart SDK 3.0 or newer
Verify your Dart SDK installation using:
dart --version
📥 Installation
From Marketplace
- Open Extensions in VS Code (
Ctrl+Shift+X / Cmd+Shift+X).
- Search for DartLab Notebooks.
- Click Install.
Manual Installation
You can manually install the .vsix package:
code --install-extension dartlab.vsix
🛠 Development
Clone the Repository
git clone https://github.com/manish-12ys/dartlab-vscode.git
cd dartlab-vscode
Install Dependencies & Build
npm install
npm run compile
Launch and Debug
- Open the project directory in VS Code.
- Press
F5 to start a new Extension Development Host session.
- Open or create any
*.dnb file to begin testing.
Testing
Execute unit and integration tests headlessly:
npm test
Packaging
Package a production-ready .vsix extension file:
npx @vscode/vsce package
🗺 Roadmap
📦 Version 0.1
- [x] Native DNB support
- [x] Stateful Dart execution kernel
- [x] Markdown cell formatting
- [x] Sidebar variable explorer
- [x] Rich rendering (tables, zoomable images, HTML)
🚀 Version 0.2
- [ ] Notebook exports (HTML, Markdown, PDF)
- [ ] Matplotlib/Plotly-style plot rendering
- [ ] Interactive debugging
- [ ] Notebook-level package management
🏆 Version 1.0
- [ ] Stable kernel RPC protocol
- [ ] High-performance advanced visualizations
- [ ] Real-time collaborative workflows
- [ ] Memory and performance optimizations
💡 Why DartLab?
While Dart has exceptional tooling, it lacks a dedicated interactive notebook ecosystem similar to Python's Jupyter environment. DartLab fills this gap by bringing a powerful, native, and developer-friendly notebook framework straight to your editor.
🤝 Contributing
Contributions, bug reports, feature requests, and pull requests are welcome. Help us build the future of interactive Dart development!
📄 License
This extension is licensed under the MIT License.
