If you’re already spending most of your day in VS Code, switching to a browser tab every time you need to check or edit a note breaks your flow. The official HackMD extension for Visual Studio Code brings your notes directly into the editor, so you can write, edit, and sync your Markdown documentation without leaving the tools you already use.
In this guide, we’ll walk through the full setup: creating an API token in your HackMD account, installing the extension, connecting it, and accessing your notes from the VS Code sidebar. The whole process takes about five minutes.
What You’ll Need
Before you start, make sure you have:
- A HackMD account (free or paid)
- Visual Studio Code or fork of VSC installed on your machine
That’s it. No extra dependencies, no configuration files to manage.
Step 1: Open Your HackMD Account Settings
Log in to your HackMD account. Click on your profile avatar in the bottom-left corner of the dashboard to open the account menu. From the dropdown, select Settings.
This takes you to your account settings page where you can manage your profile, teams, billing, and API access.
Step 2: Navigate to the API Section
On the Settings page, look for the API tab in the left sidebar navigation. Click it to open the API token management page.
This is where you create and manage the access tokens that allow external tools (like the VS Code extension) to communicate with your HackMD account.
Step 3: Create a New API Token
On the API settings page, you’ll see the Create token section with a brief description of the HackMD API and a link to the Developer’s Portal for additional resources.
Click the + Create API token button.
Step 4: Name Your Token and Confirm
A dialog will appear asking you to name your token. Give it a descriptive name like VSCode so you can easily identify what this token is used for later. Then click Create.
Once created, HackMD will display the token. Copy it immediately and store it somewhere safe. After you close this dialog, you won’t be able to see the full token again. If you lose it, you’ll need to revoke it and create a new one.
Step 5: Install the HackMD Extension in VS Code
Open Visual Studio Code and navigate to the Extensions panel (you can use the shortcut Ctrl+Shift+X on Windows/Linux or Cmd+Shift+X on macOS). Search for hackmd in the marketplace search bar.
You’ll see the official HackMD extension published by HackMD. Click Install.
The extension description reads “The official HackMD Markdown…” and it’s the one you want. After installation, VS Code may prompt you to reload the window.
Step 6: Enter Your API Token in VS Code
After installing the extension, VS Code will prompt you to enter your HackMD access token. A text input will appear at the top of the editor window labeled HackMD Access Token. Paste the API token you copied in Step 4 and press Enter to confirm.
If the prompt doesn’t appear automatically, you can trigger it manually by opening the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) and searching for HackMD.
Step 7: Access Your Notes from the Sidebar
Once authenticated, a new HackMD Notes panel will appear in your VS Code sidebar. This panel displays your personal notes under My Notes and your team notes under Team Notes. Your existing HackMD notes will populate automatically.
From here, you can click on any note to open it in the editor. Edits sync automatically — changes you make in VS Code update in HackMD, and changes made in the HackMD web app update in VS Code.
What You Can Do with the Extension
With the HackMD extension connected, your workflow opens up in a few practical ways:
Edit notes in your preferred environment. You get access to your VS Code themes, keybindings (including Vim mode), and all the editor features you’re used to. Your HackMD Markdown renders with full syntax support, including Mermaid diagrams and code highlighting.
Sync automatically. You don’t need to manually push or pull. Edits flow between VS Code and the HackMD web app in real time. This means you can draft in VS Code and share the live link with your team in the browser — everyone stays on the same page.
Create notes directly from VS Code. You can use the Command Palette to create new HackMD notes or even turn selected code into a shareable code snippet on HackMD.
Save notes locally. The extension makes it easy to save notes as local .md files for backup, version control with Git, or offline access.
Two Common Workflows
Workflow A: Edit in HackMD, save locally via VS Code. You write and collaborate on a note in the HackMD web app. When you’re ready, open it in VS Code, save the file locally, and push it to GitHub for version control.
Workflow B: Edit locally in VS Code, sync back to HackMD. You draft or update a note in VS Code using your local setup. The changes sync to HackMD automatically. From there, you can pull updates from GitHub into HackMD if your team uses the GitHub integration.
Both approaches let you keep documentation close to your codebase without sacrificing the real-time collaboration that HackMD provides.
Wrapping Up
The HackMD VS Code extension is a small setup with a big payoff if documentation is part of your daily workflow. You don’t need to context-switch between your editor and a browser to update notes, draft specs, or contribute to shared documentation. Everything stays in one place.
If you want to take it further, check out the HackMD Developer Portal to explore API endpoints, build custom integrations, or connect HackMD to your CI/CD pipelines.
Read more: Vibe Coding in 2026: A Guide to AI-Assisted App Development
