Skip to main content
OlonJS is a content framework built on Next.js 15 (App Router) that lets you define your entire site as structured JSON data. Pages are composed of typed sections — hero banners, post lists, content blocks, and more — each validated against a Zod schema. Content is organized into collections (posts, tags, authors, or anything you model), and a visual Studio editor lets non-developers edit every section without writing a single line of code.

​
What is OlonJS?

Traditional CMS-backed sites separate content from code through a database and an API layer. OlonJS takes a different approach: your content is your code — stored as plain JSON files, co-located with your project, and validated by the same Zod schemas that power your React components. A page in OlonJS is a JSON file that declares an ordered list of sections. Each section has a type (for example, "hero" or "posts-list") and a data object whose shape is enforced by that section’s Zod schema. When Next.js renders the page, it resolves each section type to a React component, passes the validated data as props, and produces the final HTML. Collections — like posts or tags — are first-class entities with their own schemas, their own JSON source files, and their own static endpoints in public/collections/. Pages can reference collection items directly, and OlonJS resolves those relations at build time so your components always receive fully populated data.
All content — pages, collections, and site configuration — is editable through the built-in Studio visual editor at /admin. Studio reads your Zod schemas to generate the editing UI automatically, so every new field you add to a schema appears in the editor without any extra wiring.

​
Key concepts

Pages

Pages are JSON files that declare an ordered list of typed sections. Each page maps to a URL and is rendered by a catch-all Next.js route.

Collections

Collections are typed sets of content items — posts, tags, authors, products — stored as JSON and statically served for zero-latency reads.

Relations

Relations let you reference items from one collection inside another. OlonJS resolves and validates cross-collection links at build time.

Sections

Sections are the composable building blocks of every page. Each section is a React component paired with a Zod schema that validates its data.
/

​
How it fits together

You start by defining Zod schemas for your sections and collections. Those schemas describe the exact shape of the data each component expects — required fields, optional overrides, enum choices, and relational references. Next, you author JSON data files for your pages and collection items; OlonJS validates every file against its schema at build time so malformed content never reaches production. At runtime, the Next.js catch-all route reads the baked page bundle from public/pages/, maps each section’s type to a registered React component, and renders the page as a server component. The Studio editor at /admin reads the same schemas to generate its editing UI, and saves changes back to the source JSON files via the /api/save-to-file route. Finally, OlonJS generates an mcp-manifest.json alongside every page during the prebuild step. This manifest exposes your site’s full content schema to AI agents and tools that support the Model Context Protocol, enabling programmatic content discovery and editing without any custom integration work.

​
What you can build

  • Editorial journals and blogs — author posts in collections, tag them with taxonomy collections, and render paginated post lists with typed relation data.
  • Marketing and product sites — compose landing pages from hero, feature, testimonial, and CTA sections; swap content without touching React code.
  • Content-heavy Next.js apps — use OlonJS as the content layer alongside custom App Router routes, server actions, and third-party APIs.