Winx

Keep the WordPress editor you already know — but escape the slow themes, plugin sprawl, and clunky front end. Winx goes headless: WordPress (or the AI editor) handles authoring, and a modern Next.js front end handles the experience your readers actually see. Just chat with AI inside your code editor, describe the post, layout, or feature you want, and AI writes the code. Build beautiful article layouts, add smooth reading animations, configure your SEO and AI discoverability instantly, expand endlessly, and get prompting tips from our Gallop community. Go live in minutes.

• 🚀 Next.js 16.2 with App Router
• ⚛️ React 19 for cutting-edge performance
• 🎨 Tailwind CSS 4.2 for pixel-perfect design
• 🔌 Headless WordPress - Keep WordPress as your authoring backend and serve a fast, decoupled Next.js front end
• ✍️ TSX-powered posts - Articles authored in WordPress and exported as TSX components for full design control
• 📚 Rich blog archives - Category, tag, author, and year pages built in
• 🗺️ Auto-generated sitemaps for posts, authors, categories, and tags
• 🖼️ Image processing with automatic optimization via Sharp
• 🔍 Built-in search powered by FlexSearch with Algolia Autocomplete
• 🔦 Lightbox galleries for post images and media
• 🎞️ Swiper carousels for image galleries and sliders
• 💬 Share counts powered by Prisma and Vercel KV cache
• ❤️ Post likes & reactions with persistent storage
• 📧 Newsletter subscribe/unsubscribe API endpoints
• 📝 Form submission API for contact and lead capture
• 📱 Fully responsive and mobile-optimized for readers
• ⚡ Lightning-fast page loads for long-form content
• 🎭 Framer Motion animations
• 🎯 SEO and AI optimized with article structured data
• 🤖 AI-friendly codebase structure
• 🛡️ Gallop Canon - AI guardrails for consistent, reliable code
• 🎨 Iconify icons (Heroicons, Lucide, Material Design, Simple Icons)
• 📊 Vercel Analytics integration

New to this? No problem. You'll have AI guiding you the entire way. Choose your editor below and follow the steps.

Choose Your Editor

We recommend the Gallop AI Editor for the best experience with Gallop templates — whether you're a first-time blogger or an advanced Next.js developer who wants AI-assisted writing and development. It was purpose-built for this workflow and requires zero configuration. VS Code is also a fine choice if you prefer to work without AI assistance.

Option A: Gallop AI Editor (Recommended)

The Gallop AI Editor is a desktop app built specifically for AI-powered web development for Next.js. It includes everything you need — code editor, AI assistant, Git, terminal, media manager, font manager, SEO & structured data scanner, and a template marketplace — all in one window with nothing to configure.

Available for Mac and Windows.

Step 1: Install Gallop AI Editor

1. Go to gallop.software and download the installer for your platform
2. Open the installer and follow the prompts
3. Launch the Gallop AI Editor
4. If prompted, the editor will walk you through installing Node.js automatically — just follow the on-screen steps

Step 2: Open This Template

From the built-in template marketplace:

1. Click the Templates tab in the sidebar
2. Find Winx and click Clone
3. Choose a folder on your computer (like your Desktop)
4. The editor will download and set up the project for you

Or from a ZIP download:

1. Click the green Code button at the top of this GitHub page, then click Download ZIP
2. Unzip the folder somewhere easy to find (like your Desktop)
3. In the Gallop AI Editor, click Open Project and select the unzipped winx folder

Step 3: Start the Dev Server

1. Click the Terminal tab at the bottom of the editor
2. Click Install to install dependencies, then click Start to run the dev server
3. Open http://localhost:3000 in your browser to see your blog

Step 4: Chat with AI

Click the AI Chat panel (or press Cmd+E on Mac / Ctrl+E on Windows) to open the AI assistant. Now just ask:

I'm new to this. Help me customize this blog for my niche.

The AI assistant can read and edit your project files, run commands, and explain anything you're confused about. Just describe what you want in plain English:

Write a new blog post about sourdough baking and add it to the blog

Make the accent color a warm terracotta

Add a new category called Travel

Optimize the SEO and article structured data on my latest post

Tip: Press Cmd+Ctrl+3 (Mac) to take a screenshot of your running blog and attach it to the chat. The AI can see exactly what you see and suggest changes visually.

Option B: VS Code

VS Code is a good choice if you prefer to work without AI assistance. You'll need to install a few things manually.

Step 1: Install Prerequisites

1. Install VS Code
2. Install Node.js (version 20 or higher)
3. Install Git

Step 2: Download This Template

Click the green Code button at the top of this GitHub page, then click Download ZIP. Unzip the folder somewhere easy to find (like your Desktop).

Step 3: Open in VS Code

1. Open VS Code
2. Click File → Open Folder
3. Select the unzipped winx folder
4. Click Open

Step 4: Install and Run

Open the terminal in VS Code (Ctrl+`` on Mac/Windows) and run:

npm install
npm run dev

Open http://localhost:3000 to see your blog. Press Ctrl+C to stop the server.

Step 5: Start Writing

Add new posts as TSX files in src/blog/, then run npm run blog to regenerate metadata. Refer to the Project Structure and Available Scripts sections below for guidance.

Join the Community

Connect with other Gallop users on Slack. Share your progress, swap AI prompting tips, and see how non-programmers are launching blogs that once required a full editorial team.