Everything Included

PowerfulFeatures

Everything you need to build fast, secure, and scalable WordPress sites. From modern tech stack to premium blocks, FlatWP has you covered.

Technology Stack

Built on Modern Technologies

FlatWP combines the best tools in the ecosystem for optimal developer experience and production performance.

Next.js 15

15.1

App Router, Server Components, and streaming for optimal performance.

TypeScript

5.7

Full type safety with auto-generated types from GraphQL schema.

GraphQL

16.x

Efficient data fetching with WPGraphQL and Apollo Client.

TailwindCSS

3.4

Utility-first CSS with custom design system and dark mode.

Shadcn/UI

Beautiful, accessible components built on Radix primitives.

WordPress 6.4+

Full WordPress CMS with Gutenberg editor and ACF Pro support.

Performance

Blazing Fast Out of the Box

FlatWP is optimized for performance at every level. Static generation, image optimization, and smart caching deliver exceptional speed.

95+
Lighthouse Score
<0.8s
First Contentful Paint
<1.2s
Time to Interactive
<100KB
Bundle Size

Incremental Static Regeneration

Get the best of both worlds: the speed of static sites with the freshness of dynamic content. Pages automatically revalidate when WordPress content changes via webhooks.

  • On-demand revalidation via WordPress webhooks
  • Automatic cache invalidation on content updates
  • Zero downtime deployments and updates
  • Configurable revalidation intervals per route

Automatic Image Optimization

Images are automatically optimized, resized, and converted to modern formats. Lazy loading and blur placeholders provide instant perceived performance.

  • WebP and AVIF format conversion
  • Responsive srcset generation
  • Blur placeholder data URLs
  • CDN-ready with cache headers
Customization

Fully Customizable

Override any component, extend the design system, and build your own blocks. FlatWP is designed to be extended, not replaced.

Component Overrides

Replace any WordPress block renderer with your own custom components. The block renderer system is fully composable and type-safe.

  • Custom block renderers for any WordPress block
  • Full access to block attributes and innerBlocks
  • TypeScript types for all block data
  • Nested block support with recursive rendering
components/PageContent.tsx
// Example: Custom block rendering
import { BlockRenderer } from '@/components/blocks';

export function PageContent({ blocks }) {
  return (
    <div className="prose dark:prose-invert">
      {blocks.map((block, index) => (
        <BlockRenderer
          key={index}
          block={block}
          // Custom component overrides
          components={{
            'core/paragraph': CustomParagraph,
            'flatwp/hero': CustomHero,
          }}
        />
      ))}
    </div>
  );
}

Design System Integration

FlatWP uses Tailwind CSS with a fully customizable design system. Colors, typography, spacing, and components all follow a consistent design language.

  • CSS variables for theming and dark mode
  • Shadcn/UI component library included
  • Custom Tailwind configuration
  • Responsive breakpoints and containers
Developer Experience

Built for Developers

Modern tooling, type safety, and documentation make FlatWP a joy to work with.

TypeScript First

Full type safety from WordPress GraphQL to React components.

GraphQL Codegen

Auto-generated types from your WordPress GraphQL schema.

ESLint & Prettier

Pre-configured linting and formatting for consistent code.

Turbo Monorepo

Efficient build system with caching and parallel execution.

terminal
# Clone the starter
git clone https://github.com/flatwp/flatwp-starter.git my-site
cd my-site

# Install dependencies
pnpm install

# Configure WordPress endpoint
echo "NEXT_PUBLIC_WORDPRESS_API_URL=https://your-wp-site.com/graphql" > .env.local

# Start development
pnpm dev
WordPress Integration

Seamless WordPress Connection

Full WordPress feature support with real-time preview, menu sync, and ACF integration.

Secure & Isolated

Your WordPress backend is completely isolated from your frontend. No WordPress PHP code is exposed to visitors, eliminating common security vulnerabilities.

  • WordPress admin completely hidden from public
  • GraphQL authentication and rate limiting
  • Webhook security with shared secrets
  • No WordPress PHP executed on frontend

Preview & Draft Support

Preview unpublished content directly on your Next.js frontend. The FlatWP plugin adds preview buttons and handles authentication automatically.

  • Live preview for drafts and scheduled posts
  • Preview links in WordPress admin bar
  • Secure preview authentication
  • Works with custom post types
Blocks & Components

18+ Premium Gutenberg Blocks

Beautiful, accessible blocks designed for modern websites. All blocks work in the WordPress editor and render perfectly on the Next.js frontend.

Hero
Hero Minimal
Features
FAQ
Statistics
Team
CTA
Pricing
Cards
Logo Row
Image Text
Section

Plus full support for all WordPress core blocks: Paragraph, Heading, Image, Gallery, List, Quote, and more.

View Block Gallery
Open Source & Free

Ready to Get Started?

Download FlatWP and start building your next WordPress project in minutes.