📝 Publish to Dev.to

A tiny publishing helper for Obsidian. Write your article in your vault like always, click the dev.to logo, and it lands on dev.to as a draft or a live post — Obsidian-flavored Markdown translated along the way, so you never have to copy-paste into the dev.to editor again.

Desktop only 📱🚫

✨ Features

• One-click draft or publish, from a dev.to logo icon in the left sidebar and in the header of every note.
• Smart create vs. update: after the first send, the plugin remembers your article (devto_id and devto_url in the frontmatter), so the next click updates it instead of creating a duplicate.
• Safe by default: new articles are always created as drafts, and going public always asks for confirmation first.
• Converts Obsidian syntax into dev.to-friendly Markdown: wikilinks, callouts, highlights, comments and embeds.
• Frontmatter-powered: title, description, tags, series, canonical URL and cover image are all picked up automatically.
• Friendly warnings for things dev.to can't handle (like local images), shown as a notice and in the console.

📦 Installation

This little guy isn't in the Obsidian Community Plugins directory, so for now it's a manual install.

1. Put this folder at:

   <your-vault>/.obsidian/plugins/obsdian-dev-to/
   

2. Install dependencies and build main.js:

   npm install
   npm run build
   

3. In Obsidian, go to Settings → Community plugins, disable Safe Mode if needed, and enable Publish to Dev.to. 🎉

🔑 Setup

1. On dev.to, go to Settings → Extensions and generate an API key.
2. In Obsidian, open Settings → Publish to Dev.to and paste the key.

⚠️ The key is stored in plain text in the plugin's data.json. Don't commit that file (the .gitignore already skips it).

🚀 Usage

Click the dev.to logo — in the ribbon on the left, or in the top-right of the note — and pick one:

Action	What it does
Send as draft / update	New note: creates a draft. Note with devto_id: updates the article and keeps its current state (draft or published).
Publish final version	Creates or updates the article and makes it public, after a confirmation.

Prefer the keyboard? The same two actions are in the command palette as Send / update on dev.to and Publish on dev.to.

🧾 Frontmatter

All fields are optional:

---
title: My article                           # default: the file name
description: Short summary
tags: [qa, testing]                         # or "qa, testing"; max 4, lowercase, a-z and 0-9 only
series: My series
canonical_url: https://example.com/post
cover_image: https://example.com/cover.png  # must be a public URL
devto_id: 123456                            # filled in automatically
devto_url: https://dev.to/...               # filled in automatically
---

Deleted the article on dev.to and want to start over? Remove devto_id from the frontmatter and send again.

🔄 Obsidian → dev.to conversion

Code blocks and inline code are left untouched. Everything else gets a little makeover:

Obsidian	Becomes
%% comment %%	removed
![[image.png]] / ![[note]]	removed, with a warning
	removed, with a warning
[[Note]], [[Note|text]], [[Note#Section]]	a link if the target note has a devto_url, plain text otherwise
> [!tip] Title	> **Title** (or the callout type, if there's no title)
==highlight==	**highlight**

Handy trick: publish your notes in order, and links between them turn into real dev.to links automatically. 🔗

🖼️ About images

The public dev.to API has no image upload endpoint, so local images can't be sent. Host them somewhere public (GitHub, Cloudinary, Imgur…) and use the URL in your note — or upload them in the dev.to editor and paste the URL back. The same goes for cover_image.

🛠️ Development

The source lives in src/ and is bundled into main.js with esbuild — Obsidian only loads that single file, so edit src/, never main.js directly.

npm run build   # type-check and bundle into main.js once
npm run dev     # rebuild main.js on every change (then reload the plugin in Obsidian)

File	What's in it
main.ts	Plugin entry point: loads settings, registers commands and icons.
src/commands.ts	Command palette entries.
src/actions.ts	The send/update and publish actions, shared by commands and icons.
src/icons.ts	The dev.to logo icon for the ribbon and note header, plus its action menu.
src/send.ts	Builds the article from the note and calls the dev.to API.
src/convert.ts	Obsidian → dev.to Markdown conversion.
src/helpers.ts	Tag normalization and API error formatting.
src/modals.ts	The "are you sure?" publish confirmation.
src/settings.ts	Settings type and the settings tab.

📚 Handy links

• dev.to API docs (Forem)
• Logo from Simple Icons