Visual Editor for
Astro Content Collections
Write markdown visually, manage frontmatter with smart auto-generated forms, and edit content straight from your dev server.
Quick Start
Get up and running in under a minute.
# Install the integration
npx astro add @writenex/astro
# Start your dev server
astro dev
# Open the editor
http://localhost:4321/_writenexThat's it! Writenex will auto-discover your content collections and you can start editing.
Everything You Need
A complete editing experience for your Astro content collections.
Zero Config
Auto-detects your content collections from the src/content folder. Just install and start editing with no setup required.
Filesystem-based
Reads and writes directly to your content files. No database or sync layer. Everything stays inside your repository.
Smart Schema Detection
Identifies your frontmatter fields from existing content. Creates ready-to-use forms for titles, dates, tags, and more.
Image Upload
Drag and drop images with colocated or public storage options. Files are placed next to your content or in the public folder.
Version History
Creates automatic shadow copies on save. Restore any earlier version with one click and keep your work protected.
Autosave
Saves your work automatically at a configurable interval. Every change is stored instantly so progress is never lost.
Search and Filter
Locate content quickly with built-in search and draft filters. Navigate large collections with confidence and ease.
Preview Links
Open a live preview of your content in the browser. Check how updates look without leaving your editing flow.
Keyboard Shortcuts
Speed up your workflow with keyboard shortcuts. Press Ctrl+S to save, Alt+N to create new content, and more.
Configuration
Zero config by default, fully customizable when needed.
import { defineConfig } from "@writenex/astro";
export default defineConfig({
collections: [
{
name: "blog",
path: "src/content/blog",
filePattern: "{slug}.md",
previewUrl: "/blog/{slug}",
schema: {
title: { type: "string", required: true },
description: { type: "string" },
pubDate: { type: "date", required: true },
heroImage: { type: "image" },
tags: { type: "array", items: "string" },
draft: { type: "boolean", default: false },
},
},
],
images: {
strategy: "colocated", // or "public"
},
});Schema Field Types
| Type | Form Component | Example Value |
|---|---|---|
string | Text input | "Hello World" |
number | Number input | 42 |
boolean | Toggle switch | true |
date | Date picker | "2024-01-15" |
array | Tag input | ["astro", "tutorial"] |
image | Image uploader | "./hero.jpg" |
Image Strategies
Choose how images are stored in your project.
Colocated
DefaultImages stored alongside content files in a folder with the same name. Best for content-specific images.
src/content/blog/
├── my-post.md
└── my-post/
├── hero.jpg
└── diagram.pngReference: 
Public
Images stored in the public directory. Best for shared images used across multiple content items.
public/
└── images/
└── blog/
└── my-post-hero.jpgReference: 
File Patterns
Flexible file naming with automatic token resolution.
| Pattern | Example Output | Use Case |
|---|---|---|
{slug}.md | my-post.md | Simple (default) |
{slug}/index.md | my-post/index.md | Folder-based |
{date}-{slug}.md | 2024-01-15-my-post.md | Date-prefixed |
{year}/{slug}.md | 2024/my-post.md | Year folders |
{year}/{month}/{slug}.md | 2024/06/my-post.md | Year/month folders |
{lang}/{slug}.md | en/my-post.md | Multi-language |
{category}/{slug}.md | tutorials/my-post.md | Category folders |
Patterns are auto-detected from existing content or can be configured explicitly.
Keyboard Shortcuts
Familiar shortcuts for efficient editing.
Production Safe
@writenex/astro is disabled by default in production builds. The editor only runs during development to prevent accidental exposure of filesystem write access.
If you need to enable it for staging environments, use the allowProduction: true option with proper authentication.
Ready to Get Started?
Add @writenex/astro to your project and start editing visually.
Looking for a Standalone Editor?
Try Writenex Editor - a free WYSIWYG markdown editor that works in your browser. No sign-up required.