Strapi Content Editor

A plug-and-play content editor for Strapi-powered Next.js websites that allows real-time editing without modifying your existing UI code.

🚀 Quick Start

1. Install the Package

npm install @peppersquare/strapi-content-editor

2. Run Setup

npx strapi-editor setup

If running from within your Next.js project (recommended):

• The setup will automatically detect your UI project (current directory)
• You only need to provide the path to your Strapi CMS project

If running from outside your projects:

• You'll need to provide paths to both your UI and CMS projects

3. Start Editing

• Keyboard: Press Ctrl+E (Windows/Linux) or Cmd+E (Mac) on any page
• URL: Add ?edit=true to any page URL
• Button: Click the floating "Edit" button (if enabled)

🎯 Features

• Zero UI Code Changes: Works by injecting a standalone script
• Interactive Setup: Guided configuration process
• Auto-Detection: Automatically detects common project structures
• Dynamic API Mappings: Reads your constants/api.ts file
• Router Detection: Automatically detects Pages Router vs App Router
• Real-time Preview: See changes instantly as you edit
• Media Upload: Built-in media upload with Strapi integration
• Component Support: Full support for Strapi components and repeatable fields

📦 What Gets Set Up

After running the setup, the plugin will:

• ✅ Generate API mappings from your constants/api.ts
• ✅ Create API routes for schema access (/api/schema/*)
• ✅ Build and inject the standalone editor script
• ✅ Detect your router type (Pages/App Router)
• ✅ Automatically inject script tag into _app.tsx or layout.tsx
• ✅ Set up environment variables in your UI project's .env.local
• ✅ Copy all necessary files to your UI project

🔧 Configuration

The plugin supports multiple configuration methods:

1. Interactive Setup (Recommended)

npx strapi-editor setup

2. Configuration File

Create strapi-editor.config.js:

module.exports = {
  uiProject: {
    root: './PSQ UI'
  },
  cmsProject: {
    root: './psq_cms_2024'
  }
};

3. Environment Variables (Auto-Generated)

The setup process will automatically create/update your UI project's .env.local file with the required environment variables:

NEXT_PUBLIC_STRAPI_URL=http://localhost:1337
STRAPI_CMS_DIR=/absolute/path/to/your/cms/project

Note: The STRAPI_CMS_DIR will be set to the absolute path of your CMS project as configured during setup.

4. Package.json Configuration

{
  "strapiEditor": {
    "uiPath": "./PSQ UI",
    "cmsPath": "./psq_cms_2024"
  }
}

🎮 Usage

Activate Edit Mode

• Keyboard: Press Ctrl+E (Windows/Linux) or Cmd+E (Mac)
• URL: Add ?edit=true to any page URL
• Button: Click the floating "Edit" button (if enabled)

Edit Content

1. Select Content Type: Choose from the dropdown in the right panel
2. Edit Fields: Modify text, upload media, add components
3. Live Preview: See changes instantly on the left
4. Publish: Click "Publish" to save to Strapi

📁 Generated Files

After setup, these files are created in your UI project:

PSQ UI/
├── public/
│   └── strapi-editor/
│       ├── api-mappings.json          # ✅ Generated from constants/api.ts
│       └── standalone-injector.js     # ✅ Main editor script
├── pages/
│   ├── _app.tsx                       # ✅ Modified (script tag added)
│   └── api/
│       └── schema/
│           ├── [contentType].ts       # ✅ Generated API route
│           └── components/
│               └── [folder]/
│                   └── [name].ts      # ✅ Generated API route
└── strapi-editor.config.js            # ✅ Configuration file

🎯 Supported Field Types

• Text Fields: String, Text, Rich Text
• Media Fields: Images, Videos, Files
• Component Fields: Single and repeatable components
• Relation Fields: Single and multiple relations
• Date Fields: Date and DateTime
• Boolean Fields: Checkboxes
• Number Fields: Integer, Float, Decimal

🚨 Requirements

• Next.js 14+ (Pages Router or App Router)
• Strapi 4+
• Node.js 18+

🔧 CLI Commands

• npx strapi-editor setup - Run interactive setup
• npx strapi-editor help - Show help information
• npx strapi-editor version - Show version information

🎉 Benefits

• No Code Changes: Your existing UI code remains untouched
• Universal: Works on any page with Strapi content
• Dynamic: Adapts to your API structure automatically
• Real-time: See changes instantly
• Media Ready: Built-in media upload and management
• Component Support: Full Strapi component editing

🔍 Troubleshooting

Setup Issues

• Run npx strapi-editor setup to reconfigure
• Check that your UI and CMS project paths are correct
• Ensure both projects have valid package.json files

Editor Not Loading

• Check browser console for errors
• Verify standalone-injector.js is accessible at /strapi-editor/
• Ensure environment variables are set correctly

Configuration Issues

• Delete strapi-editor.config.js and run setup again
• Check that your project structure matches the expected format

📝 License

MIT

🤝 Support

For issues and questions, please visit our GitHub repository.