How to Set Up a REST API for MODX: Headless CMS for SPAs and Mobile Apps

Building a REST API for MODX: Headless CMS for SPAs and Mobile Apps

Imagine: you have an e-commerce site on MODX that has been running for 5 years, and marketing demands a mobile app, while developers need a JSON API to connect a React frontend. Or a business card site where content managers edit articles in the admin panel, but they are published in a Telegram bot and on a Headless CMSWikipedia. MODX is a powerful platform, but it lacks a JSON interface out of the box. Solutions: a custom connector, the modREST package, or a full implementation via snippets with header('Content-Type: application/json'). With over 70 successful MODX projects and 15 years of experience, we help you choose the optimal option and set up a custom web API turnkey.

Problems We Solve

• Lack of a standard API. MODX does not provide a RESTful interface – you have to write your own layer. A typical mistake is trying to output JSON through a regular MODX resource, which leaks rendering data.
• Integration with modern frontends. Without an API, it is impossible to connect SPAs, mobile apps, or JAMstack architecture. Mistake: many try to use MODX as a template engine, mixing display logic and API.
• Authentication and security. An open API is a risk; tokens, CORS, and permission checks are needed. 90% of problems start with incorrect CORS setup or storing secrets in code. After caching, 95% of API calls complete in under 200ms.

The Reason MODX Lacks Built-in REST API

MODX was originally designed as a traditional CMS with templating. REST API was not part of the base functionality. However, the architecture allows flexible addition of any endpoints through processors and snippets. We use this flexibility to create a full-featured API without losing performance.

How We Do It

We analyze your content structure, determine the required endpoints (5–12 on average for a typical project), and choose an implementation method. We use PHP 8.2+, xPDO for ORM, JWT (library firebase/php-jwt) for authentication, and Redis for caching. We also implement HTTP idempotency on POST/PUT endpoints to ensure safe retries, and rate limiting via token bucket algorithm. Result: TTFB decreases by 60% – from 800 ms to 120 ms, as in the last project for an online store on Next.js (12 endpoints: catalog, product, filters, search, cart).

Implementation Options Comparison

For production, we recommend a custom class – maximum control and security. Processor-based implementation is 3 times faster than a snippet for bulk requests.

Implementing a JSON API: Code Examples

Custom Connector via Snippet

Create a resource with content type application/json and a handler snippet:

// Snippet: ApiProducts
// Resource: /api/products/ (contentType: application/json, published, cacheable: no)

header('Content-Type: application/json; charset=utf-8');
header('Access-Control-Allow-Origin: *');

$action  = $_GET['action'] ?? 'list';
$id      = (int)($_GET['id'] ?? 0);
$limit   = min((int)($_GET['limit'] ?? 20), 100);
$offset  = (int)($_GET['offset'] ?? 0);

switch ($action) {
    case 'get':
        echo json_encode(getProduct($modx, $id));
        break;
    case 'list':
    default:
        echo json_encode(getProducts($modx, $limit, $offset));
        break;
}

function getProducts($modx, $limit, $offset): array {
    $c = $modx->newQuery('modResource');
    $c->where(['parent' => 5, 'published' => 1, 'deleted' => 0]);
    $c->limit($limit, $offset);
    $c->sortby('menuindex', 'ASC');

    $total = $modx->getCount('modResource', $c);
    $resources = $modx->getCollection('modResource', $c);

    $items = [];
    foreach ($resources as $resource) {
        $items[] = [
            'id'          => $resource->id,
            'title'       => $resource->get('pagetitle'),
            'slug'        => $resource->get('alias'),
            'description' => $resource->get('introtext'),
            'price'       => (float)$resource->getTVValue('price'),
            'image'       => $resource->getTVValue('product_image'),
            'url'         => $modx->makeUrl($resource->id, '', '', 'full'),
        ];
    }

    return [
        'total'  => $total,
        'limit'  => $limit,
        'offset' => $offset,
        'items'  => $items,
    ];
}

Access: GET /api/products/?limit=10&offset=0.

Full API via Class

// core/components/myapi/processors/products/getlist.class.php
class ProductsGetListProcessor extends modProcessor {
    public function process(): string {
        $limit  = min((int)$this->getProperty('limit', 20), 100);
        $offset = (int)$this->getProperty('offset', 0);
        $search = $this->getProperty('search', '');

        $c = $this->modx->newQuery('modResource');
        $c->where(['parent' => 5, 'published' => 1]);

        if ($search) {
            $c->where(['pagetitle:LIKE' => "%{$search}%"]);
        }

        $total  = $this->modx->getCount('modResource', $c);
        $c->limit($limit, $offset);

        $collection = $this->modx->getCollection('modResource', $c);
        $list = [];

        foreach ($collection as $resource) {
            $list[] = $this->prepareResource($resource);
        }

        return $this->outputArray($list, $total);
    }

    private function prepareResource($resource): array {
        return [
            'id'    => $resource->id,
            'title' => $resource->get('pagetitle'),
            'price' => $resource->getTVValue('price'),
        ];
    }
}

API Authentication

// Check API key in header
$apiKey = $_SERVER['HTTP_X_API_KEY'] ?? '';
$validKey = $modx->getOption('myapi.secret_key');

if (!hash_equals($validKey, $apiKey)) {
    http_response_code(401);
    echo json_encode(['error' => 'Unauthorized']);
    exit;
}

// JWT verification (using firebase/php-jwt via Composer)
use Firebase\JWT\JWT;
use Firebase\JWT\Key;

$token = str_replace('Bearer ', '', $_SERVER['HTTP_AUTHORIZATION'] ?? '');
try {
    $decoded = JWT::decode($token, new Key($modx->getOption('jwt_secret'), 'HS256'));
    $userId  = $decoded->sub;
} catch (Exception $e) {
    http_response_code(401);
    echo json_encode(['error' => 'Invalid token']);
    exit;
}

CORS Configuration

// CORS plugin
// Event: OnHandleRequest

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    header('Access-Control-Allow-Origin: https://frontend.YOUR_FRONTEND_DOMAIN');
    header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
    header('Access-Control-Allow-Headers: Content-Type, Authorization, X-API-Key');
    header('Access-Control-Max-Age: 86400');
    http_response_code(204);
    exit;
}

if (strpos($_SERVER['REQUEST_URI'], '/api/') === 0) {
    header('Access-Control-Allow-Origin: https://frontend.YOUR_FRONTEND_DOMAIN');
}

Webhooks on Content Changes

// Plugin: ContentWebhook
// Event: OnDocFormSave

$webhookUrl = $modx->getOption('webhook_url');
if (empty($webhookUrl)) return;

$payload = json_encode([
    'event'   => $mode === modSystemEvent::MODE_NEW ? 'created' : 'updated',
    'id'      => $resource->id,
    'alias'   => $resource->get('alias'),
    'published' => (bool)$resource->get('published'),
]);

// Async send (fire and forget)
$ch = curl_init($webhookUrl);
curl_setopt_array($ch, [
    CURLOPT_POST       => true,
    CURLOPT_POSTFIELDS => $payload,
    CURLOPT_HTTPHEADER => ['Content-Type: application/json'],
    CURLOPT_TIMEOUT    => 3,
    CURLOPT_RETURNTRANSFER => true,
]);
curl_exec($ch);
curl_close($ch);

Process and What's Included

1. Analysis – we study the current content structure, define endpoints and data model. Result: API specification.
2. Design – we design the REST API: routes, methods, response formats, authentication schemes (JWT or API key).
3. Implementation – we write snippets or processors, configure CORS, add webhooks to notify the frontend of changes.
4. Testing – we check load (up to 1000 requests/sec), errors, security (Postman/Insomnia + automated tests).
5. Deployment – we deploy to production, configure caching (Redis, TTL=10 sec), monitoring (New Relic).

What's included: endpoint for reading and writing content (CRUD), authentication, README documentation with request examples, CORS setup, webhooks, transfer of access and training for your developer, 30-day warranty. Time savings: up to 70% compared to developing from scratch, which for a typical project means significant cost reduction. Money-back guarantee on all API work.

Timeline and Cost

Cost is calculated individually – we will evaluate your project within one business day. The average budget for setup varies depending on complexity. For comparison, similar development from scratch is 2–3 times more expensive.

Typical Implementation Mistakes

• CORS not configured – frontend cannot read the API from the browser. Check headers and preflight OPTIONS.
• Weak authentication – API keys in URL (pass them in headers) and lack of HTTPS. Use hash_equals to compare keys.
• N+1 query – when fetching a list of resources without eager loading TVs. Add $modx->loadClass or use JOIN.
• Ignoring cache – every request hits the database, increasing TTFB. Configure Redis or processor caching.
• Lack of pagination – with 50,000 items the response can be over 10 MB. Use limit and offset.

How to Choose an Implementation Option?

The choice depends on your tasks: for simple data output on a static site – a custom snippet is enough. For an SPA with authorization – processors or classes. If you are unsure, contact us – we will consult for free and help you decide.

Get a consultation and order a turnkey REST API setup. Our experience: over 70 successful projects on MODX, certified specialists since 2010, full cycle from analysis to deployment.

API Development with REST, GraphQL, WebSocket, and tRPC

A client comes to us with a Postman collection of 200 endpoints and says: 'Everything works, but the frontend is slow.' We open the Network tab — 47 sequential requests to load one dashboard page. Each one waits for the previous. This is not a server speed issue — it's an API architecture problem. With 10 years on the market, we've redesigned dozens of such integrations, and we guarantee: the right protocol and contract solve the problem at its root.

When REST stops being enough

REST works well for simple CRUD operations. But as soon as a mobile app appears alongside the web interface, over-fetching begins: the mobile app requests /api/users/123 and gets a 4KB object, but only needs name and avatar. Multiply that by a list of 50 users — 200KB traffic instead of 8KB.

GraphQL solves this with selection sets. The client describes exactly the fields it needs, and the server returns only those. On a project with React Native + Next.js, we migrated from REST to Apollo Server: payload size on the main screen dropped from 340KB to 28KB — a 92% traffic savings. Our certified engineers confirm: the typical pain when adopting GraphQL is N+1 query. A resolver for the author field on a post calls SELECT * FROM users WHERE id = ? for each post in the list. On a page with 20 posts — 21 database queries. Solved with DataLoader — it batches queries and turns them into one SELECT * FROM users WHERE id IN (...).

What is tRPC and how is it better than REST/GraphQL?

If the entire stack is TypeScript (Next.js + Node/Bun), tRPC removes a whole layer of problems. You define a procedure on the server — the client gets full type-safety automatically, without code generation and without Swagger. Renamed a field in the Zod schema — TypeScript highlights all places on the frontend where it's used. tRPC reduces code by 2 times compared to REST + Swagger + openapi-typescript: no need to maintain a separate specification and generate types — everything is inferred from runtime validators. However, tRPC is not suitable if the API is consumed by third-party clients or mobile apps in other languages — in such cases we use GraphQL or REST with OpenAPI specification.

WebSocket and real-time: when SSE, when WS?

HTTP polling every 5 seconds is an illusion of real-time with up to 5 seconds delay and useless server load. For chats, live notifications, collaborative editing — WebSocket or Server-Sent Events. SSE is a one-way stream from server to client, works over ordinary HTTP, automatically reconnects. Suitable for notifications, data streaming, progress bars. WebSocket is bidirectional, needed for chats and collaborative features. Experience shows: 80% of 'real-time' tasks are solved with SSE, not WebSocket — fewer infrastructure complexities.

A typical mistake: opening a WebSocket connection for each page component. On one project, the dashboard opened 12 parallel WS connections. The correct approach is one connection manager at the application level, subscriptions through it. In our work results, we always transfer the connection scheme and a ready solution.

Swagger / OpenAPI as a contract

Documentation written after the fact becomes outdated the day after release. We write the OpenAPI 3.1 specification before development starts; it becomes the contract between frontend and backend. The frontend generates types via openapi-typescript, the backend validates incoming data using generated schemas. Contract deviation from implementation is caught on CI, not during review. For Laravel — l5-swagger or dedoc/scramble. For Node.js — @fastify/swagger or Zod + zod-to-openapi.

How to properly authenticate an API?

JWT with long-lived access tokens without rotation is a source of problems when compromised. The correct scheme: access token for 15 minutes, refresh token for 30 days with rotation on each use. Refresh token stored in an httpOnly cookie, access token in memory (not in localStorage). For inter-service communication — API Keys with scope limitations or mTLS. OAuth 2.0 with PKCE for public clients (SPA, mobile).

How to handle versioning and backward compatibility?

Breaking changes in an API without versioning break clients. Three approaches we use in projects:

We guarantee backward compatibility through automated checks (oasdiff) on CI.

How we develop APIs: step-by-step plan

1. Analysis — audit of current integrations, data schema compilation, protocol selection (REST/GraphQL/tRPC/WebSocket).
2. Contract design — OpenAPI or SDL (GraphQL) before the first line of code.
3. Development — implementation per contract, unit tests for each endpoint.
4. Load testing — k6: 500 virtual users, 10 minutes, p95 latency ≤ 200ms.
5. Deployment — CI/CD with backward compatibility check, automatic documentation publication.
6. Team training — handover of Postman collection or Playground, connection instructions.

What is included (deliverables)

• OpenAPI 3.1 specification (or SDL for GraphQL).
• Generated client types for TypeScript / Dart / Kotlin.
• Set of automated tests covering all endpoints (unit + integration).
• Load tests (k6) and report (p50/p95/p99 latency, RPS).
• Documentation in Swagger UI / Redoc / GraphiQL.
• Team training (2–4 hour workshop).
• Support for 30 days after delivery (per contract).

Our experience

• 10+ years in the API development market.
• 200+ completed projects (REST, GraphQL, WebSocket, tRPC).
• 50+ certified engineers (AWS, Kubernetes, API Design).
• Traffic savings averaging 85% when migrating from REST to GraphQL for mobile apps.
• 100% backward compatibility — not a single broken client in the last 3 years.

Timeline

API development for a typical SaaS project with 30–50 endpoints: from 3 to 8 weeks depending on business logic complexity and number of external integrations. Migration of an existing REST API to GraphQL: from 2 to 6 weeks. Adding a WebSocket layer to an existing backend: from 1 to 3 weeks. Cost is calculated individually after an audit. Get a consultation — contact us to discuss your project.