Page Builder CMS
A page builder and CMS: a React and TypeScript editor builds pages from sections, columns and eighteen kinds of widget, and Rails 8 validates them, keeps their versions, publishes them now or at a set time and serves them from a cache.
- Type
- Personal project
- Area
- Builders & CMS
- Main stack
- Ruby on Rails · React · TypeScript · Ruby
Key features
- • Sections, columns and eighteen kinds of widget, dragged by mouse or keyboard
- • Rich text written on the canvas, undo and redo, values of its own for tablet and phone
- • Header and footer built in the same editor
- • Version history with restore, scheduled publishing, and a conflict to settle between two tabs
- • Media library in Active Storage, and form answers read in the editor
- • Published pages drawn on the server and cached, with ETag and 304
- • Checked with axe on every state of the editor, and a full keyboard path
About the project
A page builder and CMS in two parts that speak through one described API: a React 19 and TypeScript editor that builds the pages, and a Rails 8.1 application that keeps, versions, publishes and serves them.
The editor composes a page from sections, columns and eighteen kinds of widget, from headings and galleries to forms, maps and menus, with drag and drop by mouse or keyboard, rich text written where it stands on the canvas, undo and redo, and a tablet’s and a phone’s own values. The site’s header and footer are built in the same editor, and every published page shows them.
Rails holds each page as one JSON document that a single schema describes: it refuses a document the schema or its rules refuse, answering 422 with the JSON pointer of each fault, and keeps one draft per page at a revision, so a stale save from a second tab gets a 409 and a conflict to settle instead of overwriting. It publishes now or at a set time through a Solid Queue job, draws the published page in ERB with no script on it, and caches it whole and block by block with an ETag and a 304, on SQLite, Solid Cache and Active Storage, with no Redis and no Docker.
The same page is drawn by React in the editor and by Ruby on the server, and parity tests on random pages keep the two the same; the API is described in OpenAPI, and the Rails tests hold every answer to that description. The editor also runs with no server at all, keeping its pages in the browser’s IndexedDB: that is the demo, held to the same battery of cases as the CMS’s storage.
There is no sign-in and no user management, by choice: the API listens on the local machine only, and the interface is in English.
Technologies used
Ruby on Rails
React
TypeScript
Ruby
SQLite
Solid Queue
Solid Cache
Active Storage
Vite
Zustand
Tiptap
dnd-kit
JSON Schema
OpenAPI
Playwright
axe-core
Vitest
Minitest