Frontity Framework is not under active development anymore.

The team is now working on the WordPress Interactivity API, which will unblock the same
type of UX as the Frontity framework, but fully compatible with the new Site Editor.

Frontity Logo

Frontity Logo
Get Started

The React framework for WordPress

Frontity is the easiest way to create lightning fast websites using WordPress and React. Open source and free to use.

Get Started
Try Demo in your Browser

Setting up Frontity...

How Frontity works

A server side, dynamic framework for headless WordPress sites and blogs

WordPress is used as a headless CMS – just for creating and managing your content

The WordPress REST-API allows you to retrieve your content and generate the final HTML

Frontity apps built with React serve your content and run separately on a Node.js server

Learn more

WordPress + React made easy

Frontity connects seamlessly with WordPress so you can focus on building your website or blog.
No complex configuration is left to the developer and the number of concepts you need to learn are minimal.

01

Create your project

  • Create a new Frontity project with a single command.
  • Everything (bundling, transpiling, routing, server rendering…) is already configured for you.
Learn more

  1. npx frontity create my-app

    ✔ Creating package.json.
    ✔ Creating frontity.settings.js.
    ✔ Cloning @frontity/mars-theme.
    ✔ Installing dependencies.

    Frontity project created!

    Run cd my-app && npx frontity dev and have fun! 🎉

  2. cd my-app

02

Connect Frontity to your WordPress site

  • Easily connect your WordPress URL to Frontity.
  • Works with WordPress.org and WordPress.com.
Learn more

// frontity.settings.js

export const settings = {
  packages: [
    {
      name: "@frontity/wp-source",
      state: {
        source: {
          url: "https://frontity.org/"
        },
      },
    }
  ],
};

03

Setup your theme and style it

  • Start with a pre-made theme or create a custom one.
  • Style with next generation CSS-in-JS.
Learn more
import { styled } from "frontity";

const StyledDiv = styled.div`
    width: 100%;
    text-align: center;
    color: white;
`;

04

Deploy anywhere

  • Deploy your site to any Node.js or serverless provider.
  • Use your favorite WordPress hosting.
Learn more

real-time content updates

Keep editing your content in WordPress

Use your WordPress dashboard to create and edit your content just as you usually do.

  • Every time you make an edit to a post or page, the change will automatically be updated on Frontity.
  • No need to rebuild your site as you would with a Static Site Generator each time new content is published.
Learn more

Designed for performance

Frontity is as fast as a static site generator

Provide an instant experience with dynamic content using Serverless Pre-rendering (SPR).

  1. Serverless generates HTML on the fly
  2. The CDN saves the HTML and serves it as static content
  3. Try out the performance right here!

twitter-twenty-twenty-frontity-theme
Check out the demo

Why WordPress?

  • Powers over 43% of the web
  • User-friendly and extensible
  • Powerful block editor extensible using React
  • Largest open source CMS community

Why React?

  • Great developer and user experience
  • Scalable and well-established option
  • Largest open source front-end community

Why Frontity?

Frontity combines the best of both worlds with a great developer experience in mind

Easy

Designed to be used with WordPress, Frontity gives you a big head start by providing many of the common queries already built in.

Zero Setup

Everything is already wired up (React, Webpack, Babel, Routing…) so that you can jump straight in and start creating your site.

SSR and SEO Friendly

Frontity does Server Side Rendering out of the box. This approach works great with dynamic content and is great for SEO.

Lightning Fast Loading

Frontity sends a navigation-ready HTML page that is immediately usable so the initial load feels almost instant.

Extensible

Frontity powers a flexible extensibility pattern similar to WordPress. Themes and extensions can be activated without code changes.

Battle Tested

Used by millions of readers Frontity is proven and ideal for building fast and engaging frontend experiences. Learn more.

Discover all benefits

Need some inspiration?

See what people are building with Frontity

Showcase
Screenshot of Texas Mattress Makers website
Screenshot of TikTok Creator Portal website

Screenshot of Szinhaz Online website

Frequently Asked Questions

How Frontity compares to other React frameworks like Gatsby or Next?

Firstly, Frontity is 100% focused on WordPress. This means the number of concepts you need to learn are minimal. It doesn’t require complex configuration to get started, and the APIs that developers use to request content are pre-configured for the things that they most frequently need.

Secondly, Frontity is opinionated. It has its own state manager and CSS-in-JS solution. Thanks to that you don’t have to figure out how to configure these tools, or learn other technologies such as Redux or GraphQL.

Frontity powers a very flexible extensibility pattern, more similar to that of WordPress itself, rather than that of other JavaScript frameworks. In order to add new functionality, you can use any of the existing Frontity and npm packages without having to build them from scratch. Moreover, Frontity themes and extensions can be activated and deactivated without code changes and are reusable across projects.

Lastly, in Frontity the HTML is rendered dynamically by a Node.js server or a serverless service. This means the HTML does not have to be rebuilt each time the content is edited or new content is published.

Learn more about the differences from other React frameworks in the docs.

What happens with SEO? Is Frontity ready for it?

Yes, it is! Frontity does both server-side and client-side rendering.

This approach works great with dynamic content and SEO. And if you use a CDN, it is as fast as serving static files. It has all the content in the HTML so Google is happy and, once JavaScript takes control of the page, the experience feels like a native app.

Check out this guide for more information on how to optimize the SEO of your Frontity project.

Is Frontity compatible with my current plugins?

Frontity is compatible with all the plugins that are compatible with the REST-API. Many of them just add their output to the content, and that would work by default.

For plugins that are not compatible with the REST-API you have two options. You can adapt the logic in your Frontity project, or you can use PHP to extend the uncooperative plugin either in your WordPress theme’s functions.php file or in a custom plugin.

Can I still work with Custom Post Types and Custom Taxonomies?

Of course! You just have to add a few settings in your Frontity project and it will work. You can check out the docs and this video for a more detailed explanation.

Get help on your project

The Frontity Community Forum is the best place to ask questions, share your knowledge, and build new connections.

Join the community

What people are saying about Frontity

Ready to get started?

Building a React front-end for your WordPress website has never been easier.

Explore the docs

Learn Frontity

We’ve compiled several learning resources to guide you through how to get started with Frontity.

Start learning

Accelerated By Google

Invested By Automattic

DOCS
FRONTITY
  • Showcase
  • Releases
  • GitHub
  • License
RESOURCES
COMPANY

© Frontity 2021

Accelerated by Google. Invested by Automattic.

↑