A modern, AI-built blog and publishing template for writers, journalists, and content creators. Keep WordPress as your editor and authoring backend, then ship a blazing-fast headless Next.js front end that publishes at the speed of thought, outshines the competition, and ranks #1 on Google.
🌐 Demo: winx.gallop.software
🎨 Template: gallop.software/templates
📦 Repository: github.com/gallop-software/winx
🏷️ Category: Headless WordPress Blog Template
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.
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.
| Gallop AI Editor | VS Code | |
|---|---|---|
| Best for | Writers, non-programmers, junior and advanced programmers | Advanced programmers |
| AI built in | Yes — Claude AI ready to go | No (optional extensions available) |
| AI setup requirement | Enter Claude API keys | Install extensions manually |
| Template browser | Built-in marketplace | Download ZIP from GitHub |
| Media manager | Built-in Studio with CDN sync | Manual file management |
| Font manager | Built-in Studio with WOFF2 font generation | No support |
| SEO Audit | Analyze SEO & Structured Data | No support |
| Git | Better Git UI with modal diff viewer | Default Git UI |
| Node.js | Built-in installer and version manager | Install Node.js separately |
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.
- Go to gallop.software and download the installer for your platform
- Open the installer and follow the prompts
- Launch the Gallop AI Editor
- If prompted, the editor will walk you through installing Node.js automatically — just follow the on-screen steps
From the built-in template marketplace:
- Click the Templates tab in the sidebar
- Find Winx and click Clone
- Choose a folder on your computer (like your Desktop)
- The editor will download and set up the project for you
Or from a ZIP download:
- 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)
- In the Gallop AI Editor, click Open Project and select the unzipped
winxfolder
- Click the Terminal tab at the bottom of the editor
- Click Install to install dependencies, then click Start to run the dev server
- Open http://localhost:3000 in your browser to see your blog
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.
VS Code is a good choice if you prefer to work without AI assistance. You'll need to install a few things manually.
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).
- Open VS Code
- Click File → Open Folder
- Select the unzipped
winxfolder - Click Open
Open the terminal in VS Code (Ctrl+`` on Mac/Windows) and run:
npm install
npm run devOpen http://localhost:3000 to see your blog. Press Ctrl+C to stop the server.
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.
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.
When you're ready to share your blog with the world, you'll need a free GitHub account to store your code and a free Vercel account to host your site.
Just ask your AI assistant:
Help me create a GitHub account, push this project to GitHub, and deploy to Vercel
The AI will walk you through every step. When you're done, your blog will be live with a URL you can share.
If you're comfortable with Git:
Ask your AI assistant:
Help me clone my new GitHub repository and run it locally
Or run these commands in your terminal:
git clone https://github.com/YOUR-USERNAME/YOUR-REPO-NAME.git
cd YOUR-REPO-NAME
npm install
npm run devOpen http://localhost:3000 to view your blog. Press Ctrl+C to stop the server. When ready to test production, run npm run build then npm start.
Select your repository, and Vercel will automatically deploy whenever you push changes.
Congratulations! Your blog is now live to the world. Share your new URL and start growing your readership. Ready for a custom domain? See Vercel's domain setup guide.
Want access to all premium blocks and post layouts? Purchase Winx Pro and clone from the Pro repository, which includes all Pro blocks ready to use.
Winx is part of the Gallop template ecosystem. Gallop templates are designed to be built with AI — just describe what you want in plain English and watch your blog come to life.
The Gallop AI Editor is a desktop code editor built specifically for AI-powered web development. It combines a full code editor, Claude AI assistant, visual Git interface, integrated terminal, media manager, and template marketplace into one app. Everything is preconfigured to work with Gallop templates out of the box — no extensions, no plugins, no setup.
Key highlights:
- Claude AI built in — Chat with Claude to write posts, debug issues, and learn as you go. Supports Opus 4.6, Sonnet 4.6, and Haiku 4.5 models
- Agent and Plan modes — Agent mode lets AI apply changes automatically. Plan mode shows you what AI wants to do before it does it, so you stay in control
- Screenshot capture — Press
Cmd+Ctrl+3to screenshot your running blog and share it with AI for visual feedback - Built-in template marketplace — Browse and clone Gallop templates without leaving the editor
- Visual Git — Stage, commit, and merge with a 3-column visual interface. No command line required
- Studio media manager — Manage post images, fonts, and assets with thumbnail previews and CDN sync
- Node.js manager — Install and switch Node.js versions without touching the terminal
- Auto-updates — The editor keeps itself up to date automatically
Every Gallop template includes @gallop.software/canon, a system of ESLint rules and AI instructions that keep your AI assistant on track. Canon ensures:
- Consistent architecture - AI follows the same patterns across your entire codebase
- No breaking changes - Guardrails prevent AI from introducing common mistakes
- Faster writing and publishing - AI already knows the project structure, components, and conventions
- Quality code - Enforced best practices for performance, SEO, AI discoverability, and maintainability
Think of Canon as training wheels that never come off. AI stays within proven patterns, so you get reliable results every time.
Canon Commands:
npm run check- Run ESLint and TypeScript checks togethernpm run audit- Audit the codebase for Canon compliancenpm run unused- Detect unused files and exports with Knip
Already invested in WordPress? Keep it. Winx pairs with the free Gallop WP plugin to turn your WordPress site into a headless authoring backend for this Next.js front end — so editors keep the admin they know while readers get a fast, modern, decoupled experience.
Gallop WP exposes a purpose-built REST API (/wp-json/gallop/v1) shaped for Next.js, so your front end stays simple:
- One request per page — resolve a front-end URI straight to a post or category and get the post body, SEO block, and site data back in a single round trip, instead of chaining multiple core WordPress REST calls
- Built-in authentication — cookie-based login, session, and logout endpoints with out-of-the-box brute-force rate limiting, so you can build membership and gated content without wiring up a JWT layer
- UI-driven custom post types — register REST-enabled custom post types from the WordPress admin with no
register_post_type()boilerplate - Yoast SEO integration — when Yoast is active, canonical URLs, meta descriptions, OpenGraph fields, and robots flags flow straight into the API response
- Optional front-end redirect — point Gallop at your production Next.js URL and it 301-redirects public WordPress requests to the matching headless path, while leaving the admin, REST API, and previews untouched
Prefer to skip WordPress entirely? You can. Winx also authors posts directly as TSX in src/blog/ — headless WordPress is an option, not a requirement.
This template was crafted from the ground up to get your articles ranked #1 on Google and cited by AI assistants like ChatGPT and Google's Gemini. The software architecture, semantic HTML structure, article metadata system, and structured data are optimized for both search engine crawlers and AI models that surface content to readers.
AI citations are becoming more important than traditional SEO. When someone asks an AI assistant a question, you want your post to be the source it quotes. Gallop templates ship with the Article, BlogPosting, and Author structured data that AI models rely on to understand and surface your writing. Writers using this template are already ranking on Google and getting discovered by AI assistants.
- Publish with AI - Let AI draft, edit, and format posts while you provide the ideas and voice
- Skip the boring work - Let AI help with SEO, image optimization, tags, and tedious metadata updates
- Pixel-perfect article design - TailwindCSS integration for rapid styling without leaving component files
- Automate workflows - AI-powered scripts for sitewide SEO improvements, search indexing, RSS feeds, and image regeneration
- Get found online - Battle-tested foundation with article structured data for search engines and AI assistants
- Deploy instantly - Next.js architecture on Vercel for cheap, fast hosting
The team behind Gallop has decades of combined experience building websites, apps, and web applications for top global brands. We've helped publishers achieve #1 Google rankings in competitive markets and understand what it takes to build world class editorial sites. That expertise is baked into every template, every component, and every line of code.
winx/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── (default)/ # Default layout route group
│ │ │ ├── layout.tsx
│ │ │ ├── page.tsx # Blog home / latest posts
│ │ │ ├── _blocks/ # Home page blocks
│ │ │ ├── [year]/ # Yearly archive pages
│ │ │ ├── author/ # Author archive pages
│ │ │ │ └── [slug]/
│ │ │ ├── category/ # Category archive pages
│ │ │ │ └── [slug]/
│ │ │ ├── tag/ # Tag archive pages
│ │ │ │ └── [slug]/
│ │ │ ├── search/ # Search results page
│ │ │ ├── contact/
│ │ │ └── .../ # Other routes with _blocks/
│ │ ├── api/ # API routes (likes, share counts, etc.)
│ │ ├── global-error.tsx # Error boundary
│ │ ├── global-not-found.tsx # 404 page
│ │ ├── layout.tsx # Root layout
│ │ ├── metadata.tsx # Site metadata
│ │ ├── robots.ts # Robots.txt config
│ │ ├── *-sitemap.xml # Generated sitemaps (post, author, category, tag)
│ │ └── *.png, *.ico # App icons and favicon
│ ├── blog/ # Blog post content (TSX files)
│ ├── components/ # React components
│ │ ├── blog/ # Blog post components
│ │ ├── footer/ # Footer config and components
│ │ ├── form/ # Form components
│ │ ├── lightbox/ # Lightbox gallery for post images
│ │ ├── search/ # Search components
│ │ ├── sidebar-stack/ # Sidebar panel stack
│ │ ├── navigation.tsx # Main navigation
│ │ ├── page-wrapper.tsx # Page wrapper with structured data
│ │ ├── button.tsx
│ │ ├── card-testimonial.tsx
│ │ ├── gallery.tsx
│ │ ├── heading.tsx
│ │ ├── image.tsx
│ │ ├── section.tsx
│ │ └── ...
│ ├── fonts/ # Font configuration files
│ ├── hooks/ # Custom React hooks
│ ├── styles/ # Global styles
│ │ └── tailwind.css # Tailwind CSS entry
│ ├── tools/ # Utility tools
│ ├── utils/ # Helper functions
│ └── state.ts # Global state management
├── prisma/ # Prisma schema (share counts, etc.)
├── public/
│ ├── favicon.png # Favicon
│ ├── images/ # Processed images
│ ├── screenshot.jpg # Featured image
│ └── search-index.json # FlexSearch index
├── _fonts/ # Font source files (managed by Studio)
├── _data/ # Generated metadata
│ ├── _blog.json # Blog post metadata
│ └── _studio.json # Studio/image metadata
├── _scripts/ # Build scripts
│ ├── generate-blog-metadata.mjs
│ ├── generate-search.mjs
│ └── ...
├── next.config.mjs # Next.js configuration
├── tsconfig.json # TypeScript config
├── postcss.config.js # PostCSS config
├── package.json # Dependencies & scripts
├── knip.config.js # Unused file detection config
├── eslint.config.mjs # ESLint config
└── .prettierrc # Prettier config
npm run dev- Start development server at http://localhost:3000npm run build- Build for production (runs blog metadata first)npm run start- Start production servernpm run lint- Run ESLint on all source filesnpm run lint:file- Run ESLint on a specific filenpm run lint:gallop- Run Gallop Canon lint rules on blocksnpm run ts- TypeScript type checking without emittingnpm run prettier- Format all files with Prettiernpm run check- Run lint and TypeScript checks
npm run audit- Audit codebase with Gallop Canonnpm run audit:strict- Strict audit modenpm run audit:json- Output audit results as JSON
npm run blog- Generate blog post metadata to_data/_blog.json→ docsnpm run search- Build FlexSearch index for site search → docsnpm run bust:kv- Bust the KV cache for likes and share countsnpm run blocks- Regenerate the block index for/blockdemo previews (_block-index.ts)
npm run env- Push.env.productionto Vercel → docsnpm run env:prod- Push to production environmentnpm run env:prev- Push to preview environment
npm run update:check- Check for package updatesnpm run update:patch- Update to latest patch versionsnpm run update:minor- Update to latest minor versionsnpm run update:major- Update to latest major versionsnpm run update:interactive- Interactively choose updatesnpm run update:doctor- Update and test changes incrementally
npm run db:generate- Regenerate the Prisma clientnpm run db:migrate- Run Prisma migrations in development
npm run unused- Find unused files and exports with Knipnpm run refresh- Remove node_modules and .next, then reinstallnpm run clean- Remove node_modules, .next, and package-lock.json, then reinstall
Every dependency is battle-tested in production and chosen for stability, performance, and long-term maintainability.
- Next.js
16.2.4- React framework with App Router - React
19.2.5- UI library - Tailwind CSS
4.2.2- Utility-first CSS framework - Headless UI
2.2.10- Unstyled accessible components - Prisma
7.2.0- Database ORM for share counts and dynamic data - Vercel KV
3.0.0- Edge cache for likes and share counts - Valtio
2.3.1- State management - Swiper
12.1.4- Modern slider/carousel for post galleries - Yet Another React Lightbox
3.31.0- Image gallery for post media - FlexSearch
0.8.212- Full-text post search - Algolia Autocomplete
1.19.8- Search autocomplete - Framer Motion
12.38.0- Animation library - Luxon
3.7.2- DateTime library for post dates - React Intersection Observer
10.0.3- Scroll-based animations and lazy loading - React Highlight Words
0.21.0- Search result highlighting - html-react-parser
6.0.1- HTML-to-React parsing for rich content - Iconify Icons - Icon sets (Heroicons, Lucide, Material Design, Simple Icons)
- clsx
2.1.1- Conditional className utility - Vercel Analytics
1.6.1- Analytics integration - Next Third Parties
16.2.4- Third-party script optimization
Tools for building and developing the blog:
- TypeScript
5- Type safety and IntelliSense - ESLint
9- Code linting - Prettier
3.8.1- Code formatting - Prettier Plugin Organize Imports
4.3.0- Auto-organize imports - Prettier Plugin Tailwindcss
0.7.2- Sort Tailwind classes - PostCSS
8.5.8- CSS transformations - Gallop Canon - ESLint rules and AI rules generator
Build-time tools for content and asset generation:
- Sharp
0.34.5- Image processing and optimization for post images - Puppeteer
24.40.0- Screenshot generation (featured images) - jsdom
27.4.0- DOM parsing for search index generation - @sindresorhus/slugify
3.0.0- URL-friendly slugs for posts, tags, and authors
- Documentation: gallop.software
- Issues: GitHub Issues
- Slack: Join Community
- Professional Services: Web Plant Media, LLC
MIT License - see LICENSE for details
Contributors:
Built with ❤️ by the team at Gallop