Docs/Content Editor

Content Editor

Write and edit content with the visual WYSIWYG editor.

Content Editor

PhantomWP includes a visual content editor for Markdown and MDX files. Write blog posts and pages without dealing with markdown syntax.

Content Editor

Switching to Visual Mode

When you open a .md or .mdx file, you'll see two mode buttons in the editor toolbar:

  • Code — Edit raw markdown
  • Visual — Use the WYSIWYG editor

Click Visual to switch to the content editor.

Formatting Options

The visual editor toolbar provides common formatting options:

Text Formatting

  • Bold (⌘B / Ctrl+B)
  • Italic (⌘I / Ctrl+I)
  • ~~Strikethrough~~
  • Code for inline code

Headings

Create headings using the dropdown or keyboard shortcuts:

  • Heading 1: ⌘⌥1 / Ctrl+Alt+1
  • Heading 2: ⌘⌥2 / Ctrl+Alt+2
  • Heading 3: ⌘⌥3 / Ctrl+Alt+3

Lists

  • Bulleted lists
  • Numbered lists
  • Checklists

Links and Media

  • Insert links with ⌘K / Ctrl+K
  • Add images from the media manager
  • Embed videos with the media button

Formatting Toolbar

Working with Frontmatter

Every content file in Astro has frontmatter—metadata at the top of the file. The content editor shows frontmatter in a dedicated panel:

Frontmatter Editor

Common frontmatter fields:

  • title — The page or post title
  • description — Used for SEO
  • pubDate — Publication date
  • author — Content author
  • image — Featured image
  • tags — Categories or tags

Click any field to edit it. The editor validates your input and shows helpful hints.

Inserting Images

From Media Manager

  1. Click the Image button in the toolbar
  2. Select an existing image or upload a new one
  3. Add alt text for accessibility
  4. Click Insert

From WordPress

If you've connected WordPress:

  1. Open the Data Panel (right side)
  2. Find the image in Media
  3. Click to insert it

Image Insert

Code Blocks

Insert code blocks with syntax highlighting:

  1. Click the Code Block button
  2. Select the language
  3. Paste or type your code
// Example code block
function greet(name) {
  return `Hello, ${name}!`;
}

The editor preserves syntax highlighting in the preview.

Tables

Create and edit tables visually:

  1. Click the Table button
  2. Select the number of rows and columns
  3. Click cells to edit content
  4. Use the toolbar to add/remove rows and columns

Supported features:

  • Add rows - supported
  • Add columns - supported
  • Merge cells - coming soon

Callouts and Alerts

Add callout boxes to highlight important information:

💡

This is an info callout. Use it for tips and notes.

⚠️

This is a warning callout. Use it for important cautions.

Insert callouts using the Callout button in the toolbar.

Keyboard Shortcuts

  • Bold - Mac: ⌘B / Windows: Ctrl+B
  • Italic - Mac: ⌘I / Windows: Ctrl+I
  • Link - Mac: ⌘K / Windows: Ctrl+K
  • Heading 1 - Mac: ⌘⌥1 / Windows: Ctrl+Alt+1
  • Heading 2 - Mac: ⌘⌥2 / Windows: Ctrl+Alt+2
  • Heading 3 - Mac: ⌘⌥3 / Windows: Ctrl+Alt+3
  • Bullet List - Mac: ⌘⇧8 / Windows: Ctrl+Shift+8
  • Numbered List - Mac: ⌘⇧7 / Windows: Ctrl+Shift+7
  • Code Block - Mac: ⌘⌥C / Windows: Ctrl+Alt+C
  • Undo - Mac: ⌘Z / Windows: Ctrl+Z
  • Redo - Mac: ⌘⇧Z / Windows: Ctrl+Shift+Z

Tips for Better Content

Use Descriptive Headings

Break your content into sections with clear headings. This helps readers scan and improves SEO.

Add Alt Text to Images

Always add descriptive alt text to images. It's required for accessibility and helps with search rankings.

Keep Paragraphs Short

On the web, shorter paragraphs are easier to read. Aim for 2-4 sentences per paragraph.

Preview Your Work

Use the live preview panel to see exactly how your content will appear to readers.

Switching Back to Code Mode

Click Code in the toolbar to see the raw markdown. This is useful for:

  • Adding custom HTML
  • Troubleshooting formatting issues
  • Using advanced MDX features
  • Adding components

Any changes made in Visual mode are reflected in Code mode and vice versa.

Next Steps

Previous
Understanding Codespaces
Next
AI Assistant