automattic/wp-calypso

★ 12,630TypeScriptAudience · developerComplexity · 4/5LicenseSetup · moderate

Mindmap

mindmap
  root((wp-calypso))
    What it does
      WordPress.com UI
      Manage all sites
      Single-page app
    Tech stack
      React frontend
      Redux state
      Node.js server
    Setup
      Git and Node.js
      Yarn install
      Hosts file entry
    Contributing
      Pull requests
      Code of conduct
      HackerOne bugs
    License
      GPL v2 or later

mindmap root((wp-calypso)) What it does WordPress.com UI Manage all sites Single-page app Tech stack React frontend Redux state Node.js server Setup Git and Node.js Yarn install Hosts file entry Contributing Pull requests Code of conduct HackerOne bugs License GPL v2 or later

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Run the WordPress.com dashboard locally to develop or test customizations to the management interface.

USE CASE 2

Contribute new features or bug fixes to the WordPress.com frontend codebase.

USE CASE 3

Study a large production-grade React and Redux codebase as a learning reference.

USE CASE 4

Build a custom WordPress management interface using Calypso as a starting point.

Tech stack

TypeScriptJavaScriptNode.jsExpressReactRedux

Getting it running

Difficulty · moderate Time to first run · 1h+

Requires editing your local machine's hosts file and having Node.js and Yarn installed before starting the dev server.

You can use, modify, and distribute this software under the GPL v2 or later, but any distributed derivative work must also be released under the same license.

In plain English

Calypso is the frontend interface for WordPress.com, the hosted version of WordPress. Rather than the traditional server-rendered pages you might expect from an older web application, Calypso is a single-page web app, meaning it loads once in the browser and then updates dynamically without full page reloads. It is the interface you use when you manage posts, settings, and themes on WordPress.com. The technology stack is built on JavaScript throughout. The server layer is lightweight, using Node.js and Express to handle requests and deliver the app. The visible interface is built with React.js, a popular library for building interactive user interfaces, and Redux, which manages the state of the application as you move between sections. It communicates with the WordPress.com REST API to fetch and save content across all of your WordPress sites in one place. Anyone who wants to run Calypso locally needs Git, Node.js, and Yarn (a JavaScript package manager) installed. The setup requires adding a hostname entry to your local machine's hosts file and then running a couple of commands to install dependencies and start the development server. More detailed instructions are provided in a separate installation document in the repository. The project is open source and Automattic, the company behind WordPress.com, actively accepts contributions. The README points to a contributing guide with technical details for pull requests, and the project follows the Contributor Covenant code of conduct. Security vulnerabilities can be reported through Automattic's disclosure program or a bug bounty page on HackerOne. Calypso is licensed under the GNU General Public License version 2 or later and supports the latest two versions of all major browsers.

Copy-paste prompts

Prompt 1

How do I set up wp-calypso locally so I can run the WordPress.com interface on my own machine? Walk me through the hosts file change and dev server startup.

Prompt 2

In the wp-calypso codebase, how is Redux used to manage state when navigating between sections of the dashboard?

Prompt 3

How does wp-calypso communicate with the WordPress.com REST API to fetch and save blog posts?

Prompt 4

I want to add a new settings page to wp-calypso. What files do I need to create and where do I register the new route?

Prompt 5

How does wp-calypso handle authentication and session management for multiple WordPress.com accounts?

Open on GitHub → Explain another repo

← automattic on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.