Live Blog Writer

A VS Code extension for writing and publishing blog posts with built-in HTML and Markdown editors. Supports WordPress, Blogger, Ghost, Substack, and Dev.to.

Full-featured WYSIWYG blog post editor experience:

Blog Editor

The blog connections manager screen:

Blog Connections Manager

Add a new blog from WordPress, Blogger, Ghost, Substack, or Dev.to:

Add New Blog

Features

Dual Editor Modes: HTML editor (TinyMCE) and Markdown editor (EasyMDE)
Markdown Publishing Support:
- Publish Markdown directly to Dev.to
- Publish Markdown to HTML-based platforms via Markdown→HTML conversion at publish time
Multi-Platform Support: Publish to WordPress, Blogger, Ghost, Substack, and Dev.to
Multiple Blogs: Configure and manage multiple blogs across different platforms
Visual Blog Management: Intuitive webview interface for managing all blog connections
Default Blog: Set a default blog for quick publishing
Blog Selection: Choose which blog to publish to directly from the editor
Edit Published Posts: Fetch and edit posts that are already published on your blog
Post Templates: Save and reuse post structures for consistent formatting
Keyboard Shortcuts: Quick access to common actions (New Post, Save Draft, Publish)
Localization: Full internationalization support (English, Spanish, German, Portuguese, Italian, and French included)
Metadata Management: Easy-to-use left panel for managing post details:
- Blog selection dropdown
- Post title
- Post status (Draft, Published, Pending Review, Private)
- Publish date/time
- Post excerpt
- Tags
- Categories
Draft Management: Save and manage drafts locally
Auto-save: Automatically saves your work every 30 seconds
Secure Credentials: All passwords, tokens, and API keys stored securely
Clean Interface: Focused writing environment within VS Code

Installation

Install the extension from the VS Code Marketplace
- Or search for "Live Blog Writer" in VS Code Extensions (Ctrl+Shift+X)
Configure your blog credentials using the visual Blog Connections Manager
Start writing and publishing!

Configuration

Quick Start: Managing Blog Connections

The easiest way to set up your blogs is using the built-in Blog Connections visual interface:

Open Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
Run: "Live Blog Writer: Manage Blog Connections"
Click "+ Add Blog" button
Fill in the form for your platform
Optionally set credentials immediately or later

NOTE: Read the QUICKSTART docs for Substack blog configuration carefully. There are some special steps that must be taken to connect to your Substack account.

The visual interface provides:

Card-based view of all your blogs
Status indicators showing which blogs have credentials configured
One-click default blog selection
Direct authentication for Blogger OAuth
Connection testing
Easy credential management

Supported Platforms

WordPress

Requirements: Site URL, username, application password
Command: "Live Blog Writer: Set WordPress Password"
Note: Supports self-hosted and WordPress.com blogs

Blogger

Requirements: Blog ID
Command: "Live Blog Writer: Authenticate with Blogger"
Note: Requires Google authentication

Ghost

Requirements: Site URL, Admin API key
Command: "Live Blog Writer: Set Ghost API Key"
Setup: Generate key from Ghost Admin → Settings → Integrations

Substack

Requirements: Hostname, connect.sid cookie (recommended) OR email/password
Command: "Live Blog Writer: Set Substack API Key"
Setup: Get cookie from browser DevTools while logged into Substack (recommended) or use email/password (may not work due to API restrictions)
Note: Cookie authentication is more reliable. Enter hostname without https:// prefix (e.g., myblog.substack.com)

Dev.to

Requirements: Dev.to API key
Command: "Live Blog Writer: Set Dev.to API Key"
Setup: Create an API key in Dev.to Settings → Account → DEV API Keys
Note: Dev.to publishing requires Markdown content (set "Content format" to Markdown)

Detailed Setup Guides

For detailed platform-specific setup instructions, see:

Blog Connections UI Guide - Visual interface for managing blogs
Multi-Blog Platform Guide
Markdown Editor Guide
Dev.to Setup Guide
Editing Published Posts Guide
Migration Guide (for existing users)

Legacy Configuration (Deprecated)

The old single-blog configuration still works but is deprecated. Please migrate to the new multi-blog system:

Run: "Live Blog Writer: Manage Blog Configurations"
Select: "Migrate Legacy Settings"

Old settings format:

{
  "liveBlogWriter.platform": "wordpress",
  "liveBlogWriter.wordpress.url": "https://example.com",
  "liveBlogWriter.wordpress.username": "myusername"
}

New settings format:

{
  "liveBlogWriter.blogs": [
    {
      "name": "My Blog",
      "platform": "wordpress",
      "id": "https://example.com",
      "username": "myusername"
    }
  ],
  "liveBlogWriter.defaultBlog": "My Blog"
}

Usage

Creating a New Blog Post

Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on Mac)
Type "Live Blog Writer: New Blog Post" and press Enter
The blog editor will open in a new panel
Or use the keyboard shortcut: Ctrl+Alt+N (Cmd+Alt+N on Mac)

Writing Your Post

Left Panel - Post Details:
- Select Blog: Choose which blog to publish to from the dropdown
- Title: Enter your post title
- Status: Select the post status (Draft, Published, etc.)
- Publish Date: Optionally set a publish date/time
- Excerpt: Add an excerpt (brief summary)
- Tags: Add tags by typing and pressing Enter
- Categories: Add categories by typing and pressing Enter
Main Editor:

Choose a "Content format":
- HTML (TinyMCE)
- Markdown (EasyMDE)
Write your content using the selected editor

Publishing Your Post

Select your target blog from the "Selected Blog" dropdown (if not already selected)
Click the "Save Draft" button to save your work locally (or press Ctrl+Alt+S)
Click the "Publish Post" button to publish to your selected blog (or press Ctrl+Alt+P)
- If no blog is selected, you'll be prompted to choose one
Or use the Command Palette: "Live Blog Writer: Publish Post"

Editing Published Posts

You can edit posts that are already published on your blog:

Method 1: Using the Command Palette

Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
Type "Live Blog Writer: Edit Published Post" and press Enter
A post selector popup appears in the editor
Select your blog from the dropdown
Click on a post to select it, then click "Load Post"
Make your changes in the editor
Click "Publish Post" to update the live post
Click "View Post" in the success message to see your changes

Method 2: From the Blog Editor

Open a new blog post or use an existing editor
Click the "Load Published Post" button in the toolbar
Follow the same steps to select and load a post

Supported platforms: WordPress, Blogger, Ghost, and Dev.to (Substack is read-only)

See Editing Published Posts Guide for detailed information.

Post Templates

Save and reuse post templates for consistent formatting across posts:

Saving a Template:

Create or open a blog post with the content you want to reuse
Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
Type "Live Blog Writer: Save as Template"
Enter a name for the template (e.g., "Weekly Newsletter")
The template saves title, content, tags, categories, excerpt, and content format

Creating a Post from a Template:

Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
Type "Live Blog Writer: New Post from Template"
Select a template from the list
A new editor opens pre-populated with the template content

Templates are stored locally in your Documents/LiveBlogWriter/Templates/ folder.

Keyboard Shortcuts

Action	Windows/Linux	Mac
New Blog Post	`Ctrl+Alt+N`	`Cmd+Alt+N`
Save Draft	`Ctrl+Alt+S`	`Cmd+Alt+S`
Publish Post	`Ctrl+Alt+P`	`Cmd+Alt+P`

Localization

The extension supports multiple languages. Currently included:

English (default)
Spanish (es)
German (de)
Portuguese (pt)
Italian (it)
French (fr)

The extension automatically uses your VS Code display language. To add a new language, contribute translations via the GitHub repository.

Features in Detail

WYSIWYG Editor

The extension uses TinyMCE, providing:

Text formatting (bold, italic, underline, etc.)
Headings and paragraphs
Lists (ordered and unordered)
Links and images
Code blocks
Tables
And more...

Metadata Panel

The left sidebar provides organized access to all post metadata:

Title: Required field for your post title
Status: Choose between Draft, Published, Pending Review, or Private
Publish Date: Schedule posts for future publication
Excerpt: Write a brief summary that appears in blog listings
Tags: Add multiple tags (press Enter after each)
Categories: Add multiple categories (press Enter after each)

Auto-save

Your work is automatically saved every 30 seconds, preventing data loss.

Requirements

VS Code 1.85.0 or higher
Active internet connection for publishing
One of the supported platforms:
- WordPress site with REST API enabled (self-hosted or WordPress.com)
- Blogger account with Google authentication
- Ghost site with Admin API access
- Substack newsletter/blog
- Dev.to account with a DEV API key

Known Limitations

Tags and categories in WordPress use simplified handling
- Full tag/category ID mapping to be implemented in future versions
Blogger combines tags and categories as "labels"
Image uploads must be handled separately (external image links work)
Substack email/password authentication may not work due to API restrictions (use cookie-based auth instead)
Substack supports limited HTML conversion (paragraphs and headings primarily)
Substack does not support updating published posts via API
Dev.to update workflow (updating existing articles) is now implemented
Dev.to supports a maximum of 4 tags (this extension trims combined tags/categories to 4)
Edit published posts feature fetches the 10 most recent posts (older posts not yet accessible)

Troubleshooting

"WordPress configuration is incomplete"

Make sure you have set:

WordPress URL (without trailing slash)
WordPress username
WordPress password using the "Live Blog Writer: Set WordPress Password" command

"WordPress password not set"

Run the command:

Open Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
Type "Live Blog Writer: Set WordPress Password"
Enter your WordPress application password (not your regular password)

"OAuth credentials not configured"

This means the extension's OAuth credentials are not properly set up. This typically only happens if you're building from source. For regular users, the extension includes built-in credentials.

For Developers: If you're building from source, see OAUTH_CREDENTIALS_SETUP.md for complete setup instructions including Azure Key Vault integration.

"Access blocked: authorization error" or "Error 401: invalid_client"

If you're using custom credentials:

Verify the Blogger API v3 is enabled in your Google Cloud project
Check that the redirect URI http://localhost:54321/callback is added correctly
Ensure you added yourself as a test user in the OAuth consent screen

See the Google OAuth Setup Guide for detailed instructions.

"Blogger configuration is incomplete"

Make sure you have set:

Blogger Blog ID in settings
Run "Live Blog Writer: Authenticate with Blogger" to authenticate

"Google authentication is required"

Run the command:

Open Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
Type "Live Blog Writer: Authenticate with Blogger"
Sign in with your Google account and grant permissions

Posts not appearing

Check that your post status is set correctly
For WordPress, ensure your user has permission to create posts
For Blogger, verify your API key has the correct permissions

Development

Building from Source

npm install
npm run compile

Note for Production Builds: To include OAuth credentials in the packaged extension, see OAUTH_CREDENTIALS_SETUP.md for instructions on setting up Azure Key Vault integration.

Running the Extension

Open the project in VS Code
Press F5 to start debugging
A new VS Code window will open with the extension loaded

Running Tests

npm test

Developer Documentation

docs/OAUTH_CREDENTIALS_SETUP.md - Complete guide for OAuth credential management with Azure Key Vault
docs/GOOGLE_OAUTH_SETUP.md - User-facing guide for setting up Google OAuth
docs/BLOGGER_OAUTH_SETUP.md - Technical documentation for Blogger OAuth implementation
docs/QUICKSTART.md - Quick start guide for new users
.github/workflows/README.md - GitHub Actions CI/CD setup

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

See LICENSE file for details.

Roadmap

[x] Multiple blog platform support (WordPress, Blogger, Ghost, Substack)
[x] Visual blog connection management interface
[x] Default blog selection
[x] Draft management (list and edit existing drafts)
[x] Edit published posts feature
[x] Keyboard shortcuts for common actions
[x] Localization support (English, Spanish, German, Portuguese, Italian, French)
[x] Post templates (save and reuse)
[ ] Support for featured images
[ ] Direct image upload to blog platforms
[ ] Support for custom post types
[ ] Post scheduling
[ ] Additional blog platform support (Hashnode, Medium, etc.)
[ ] Additional language translations (community contributions welcome)
[ ] Search and filter published posts for editing
[ ] Pagination for fetching more than 10 posts

Support

For issues, questions, or suggestions, please visit the GitHub repository.

Live Blog Writer

alvinashcraft

Live Blog Writer

Features

Installation

Configuration

Quick Start: Managing Blog Connections

Supported Platforms

WordPress

Blogger

Ghost

Substack

Dev.to

Detailed Setup Guides

Legacy Configuration (Deprecated)

Usage

Creating a New Blog Post

Writing Your Post

Publishing Your Post

Editing Published Posts

Post Templates

Keyboard Shortcuts

Localization

Features in Detail

WYSIWYG Editor

Metadata Panel

Auto-save

Requirements

Known Limitations

Troubleshooting

"WordPress configuration is incomplete"

"WordPress password not set"

"OAuth credentials not configured"

"Access blocked: authorization error" or "Error 401: invalid_client"

"Blogger configuration is incomplete"

"Google authentication is required"

Posts not appearing

Development

Building from Source

Running the Extension

Running Tests

Developer Documentation

Contributing

License

Roadmap

Support