frontity.org Open in urlscan Pro
192.0.78.201  Public Scan

Form analysis
0 forms found in the DOM

Text Content

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.

 * LEARN
 * SHOWCASE
 * COMMUNITY
 * CONTRIBUTING
 * BLOG
 * 
 * * Repository
   * Changelog
   * Roadmap





 * LEARN
 * SHOWCASE
 * COMMUNITY
 * CONTRIBUTING
 * BLOG
 * 
 * * Repository
   * Changelog
   * Roadmap

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
npx frontity create my-app
cd my-app
npx f



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.

CreateConnectStyleDeploy


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!




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




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

> Well hey, this looks great.
> 
> Frontity: https://t.co/6CqtWqd30Z
> 
> Build WordPress themes with React, with server-side rendering as a first-class
> feature, powered by Node cloud functions.
> 
> — Chris Coyier (@chriscoyier) April 22, 2020

> From its easy routing or the APIs sourcing to the CLI, @Frontity might just be
> my next tool for WordPress.
> 
> — R. Abril (@Rafael_AbrilSA) January 24, 2021

> Frontity’s docs are easy to use. Love seeing well-written documentation.
> 
> — mayowa. (@Wana____) April 12, 2021

> I had a moment to play with @frontity today…and my mind was blown 🤯🤯
> 
> From reading the docs, to grabbing my @wordpress data via REST, to publishing
> on @zeithq took 15 minutes.
> 
> No plugins. No workarounds. It just worked! 👏👏
> 
> 👉 https://t.co/BfkWesI2cM
> 
> — Greg Rickaby (@GregRickaby) May 21, 2019

> just tried @Frontity and fall in love
> 
> — Deb Debashish (@av3y) November 26, 2020


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

 * Quick Start
 * Tutorial
 * API Reference
 * Guides
 * Features

FRONTITY

 * Showcase
 * Releases
 * GitHub
 * License

RESOURCES

 * Learn
 * Community
 * Blog
 * Twitter
 * Youtube

COMPANY

 * About Us
 * Case Studies
 * Partners
 * Brand Assets

LEGAL

 * Legal Notice
 * Privacy Policy
 * Cookies

--------------------------------------------------------------------------------

© Frontity 2021

Accelerated by Google. Invested by Automattic.






↑
Cookie consent

This website uses cookies that help the website to function and also to track
how you interact with our website. But for us to provide the best user
experience, enable the specific cookies from Settings, and click on Accept.Read
More

PreferencesReject AllAccept All
Privacy Policy
Necessary
Functional
Analytics
Performance
Advertisement
Others
Save my preferences
Privacy Policy

This website uses cookies to improve your experience while you navigate through
the website. Out of these cookies, the cookies that are categorized as necessary
are stored on your browser as they as essential for the working of basic
functionalities of the website.

We also use third-party cookies that help us analyze and understand how you use
this website, to store user preferences and provide them with content and
advertisements that are relevant to you. These cookies will only be stored on
your browser with your consent to do so. You also have the option to opt-out of
these cookies.But opting out of some of these cookies may have an effect on your
browsing experience.

Necessary


Necessary cookies are crucial for the basic functions of the website and the
website will not work in its intended way without them.

These cookies do not store any personally identifiable data.

CookieTypeDurationDescriptionJSESSIONIDhttpssessionUsed by sites written in JSP.
General purpose platform session cookies that are used to maintain users' state
across page requests.cky-active-checkhttps1 dayThe cookie is set by CookieYes to
check if the consent banner is active on the website.cookieyesIDhttps1
yearUnique identifier for visitors used by CookieYes with respect to the
consentcky-consenthttps1 yearThe cookie is set by CookieYes to remember the
user's consent to the use of cookies on the website.cookieyes-necessaryhttps1
yearThis cookie is set by CookieYes and is used to remember the consent of the
users for the use of cookies in the 'Necessary'
category.cookieyes-functionalhttps1 yearThis cookie is set by CookieYes and is
used to remember the consent of the users for the use of cookies in the
'Functional' category.cookieyes-analyticshttps1 yearThis cookie is set by
CookieYes and is used to remember the consent of the users for the use of
cookies in the 'Analytics' category.cookieyes-performancehttps1 yearThis cookie
is set by CookieYes and is used to remember the consent of the users for the use
of cookies in the 'Performance' category.cookieyes-advertisementhttps1 yearThis
cookie is set by CookieYes and is used to remember the consent of the users for
the use of cookies in the 'Advertisement' category.cookieyes-otherhttps1
yearThis cookie is set by CookieYes and is used to remember the consent of the
users for the use of cookies categorized as 'Other'.cky-actionhttps1 yearThis
cookie is set by CookieYes and is used to remember the action taken by the
user.connect.sidhttps1 monthThis cookie is used for authentication and for
secure log-in. It registers the log-in information. __cfruidhttpssessionThis
cookie is set by the provider Cloudflare. This cookie is used for load balancing
and for identifying trusted web traffic.

Functional


Functional cookies help to perform certain functionalities like sharing the
content of the website on social media platforms, collect feedbacks, and other
third-party features.

CookieTypeDurationDescriptionlanghttpssessionThis cookie is used to store the
language preferences of a user to serve up content in that stored language the
next time user visit the website.bcookiehttps2 yearsThis cookie is set by
linkedIn. The purpose of the cookie is to enable LinkedIn functionalities on the
page.lidchttps1 dayThis cookie is set by LinkedIn and used for
routing.__cf_bmhttps30 minutesThis cookie is set by CloudFlare. The cookie is
used to support Cloudflare Bot Management.

Analytics


Analytical cookies are used to understand how visitors interact with the
website. These cookies help provide information on metrics the number of
visitors, bounce rate, traffic source, etc.

CookieTypeDurationDescription__veroc4httpssessionThis cookie is set by the
provider Getvero. This cookie is used for measuring the conversion of email
campaigns. It also helps in creating segments for retargeting via
email.__vero_visithttpssessionThis cookie is set by the provider Getvero. This
cookie is used for measuring the conversion of email campaigns. It also helps in
creating segments for retargeting via
email.amplitude_id_e1036f3070d909adb35c03daf3213e94frontity.orghttp10 yearsNo
description_gahttps2 yearsThis cookie is installed by Google Analytics. The
cookie is used to calculate visitor, session, campaign data and keep track of
site usage for the site's analytics report. The cookies store information
anonymously and assign a randomly generated number to identify unique
visitors._gidhttps1 dayThis cookie is installed by Google Analytics. The cookie
is used to store information of how visitors use a website and helps in creating
an analytics report of how the website is doing. The data collected including
the number visitors, the source where they have come from, and the pages visted
in an anonymous form._gat_UA-91312941-14https1 minuteThis is a pattern type
cookie set by Google Analytics, where the pattern element on the name contains
the unique identity number of the account or website it relates to. It appears
to be a variation of the _gat cookie which is used to limit the amount of data
recorded by Google on high traffic volume websites._gat_UA-91312941-13https1
minuteThis is a pattern type cookie set by Google Analytics, where the pattern
element on the name contains the unique identity number of the account or
website it relates to. It appears to be a variation of the _gat cookie which is
used to limit the amount of data recorded by Google on high traffic volume
websites.amplitude_cookie_testhttpsessionNo description_gat_UA-91312941-9https1
minuteThis is a pattern type cookie set by Google Analytics, where the pattern
element on the name contains the unique identity number of the account or
website it relates to. It appears to be a variation of the _gat cookie which is
used to limit the amount of data recorded by Google on high traffic volume
websites.CONSENThttps16 years 5 months 10 hours 27 minutesThese cookies are set
via embedded youtube-videos. They register anonymous statistical data on for
example how many times the video is displayed and what settings are used for
playback.No sensitive data is collected unless you log in to your google
account, in that case your choices are linked with your account, for example if
you click “like” on a
video.amplitude_id_e1036f3070d909adb35c03daf3213e94vercel.apphttp10 yearsNo
description_gat_UA-91312941-12https1 minuteThis is a pattern type cookie set by
Google Analytics, where the pattern element on the name contains the unique
identity number of the account or website it relates to. It appears to be a
variation of the _gat cookie which is used to limit the amount of data recorded
by Google on high traffic volume websites.ajs_user_idhttpsneverThe cookie is set
by Segment.io and is used to analyze how you use the
websiteajs_anonymous_idhttpsneverThis cookie is set by Segment.io to check the
number of ew and returning visitors to the website.

Performance


Performance cookies are used to understand and analyze the key performance
indexes of the website which helps in delivering a better user experience for
the visitors.

Advertisement


Advertisement cookies are used to deliver visitors with customized
advertisements based on the pages they visited before and analyze the
effectiveness of the ad campaign.

CookieTypeDurationDescriptiontest_cookiehttps15 minutesThis cookie is set by
doubleclick.net. The purpose of the cookie is to determine if the user's browser
supports cookies.YSChttpssessionThis cookies is set by Youtube and is used to
track the views of embedded videos.VISITOR_INFO1_LIVEhttps5 months 27 daysThis
cookie is set by Youtube. Used to track the information of the embedded YouTube
videos on a website.IDEhttps1 year 24 daysUsed by Google DoubleClick and stores
information about how the user uses the website and any other advertisement
before visiting the website. This is used to present users with ads that are
relevant to them according to the user
profile.yt-remote-device-idhttpsneverThese cookies are set via embedded
youtube-videos.yt-remote-connected-deviceshttpsneverThese cookies are set via
embedded youtube-videos.yt.innertube::requestshttpsneverThese cookies are set
via embedded youtube-videos.yt.innertube::nextIdhttpsneverThese cookies are set
via embedded youtube-videos.bscookiehttps2 yearsThis cookie is a browser ID
cookie set by Linked share Buttons and ad tags.

Others


Other uncategorized cookies are those that are being analyzed and have not been
classified into a category as yet.

CookieTypeDurationDescriptioncookieconsent_statushttps1 yearNo description
available.__tld_test__httpsessionNo descriptionamplitude_testfrontity.orghttpNo
descriptionwp_apihttppastNo descriptionwp_api_sechttpspastNo
descriptiondosphttpsessionNo descriptionloom_anon_commenthttpssessionNo
description available.loom_referral_videohttpsessionNo
descriptionUserMatchHistoryhttps1 monthLinkedin - Used to track visitors on
multiple websites, in order to present relevant advertisement based on the
visitor's preferences.AnalyticsSyncHistoryhttp1 monthNo descriptionli_gchttp2
yearsNo descriptionajs_group_idhttpsneverThis cookie is set by Segment.io. The
purpose of the cookie is currently not identified.debughttpsneverNo description
available.loglevelhttpsneverNo description available.signedInhttpspastNo
description__test__httpsneverNo description
available.destination_urlhttpssessionNo description available.

Powered by CookieYes