Synolink CMS case study
cms.synolink.ai
Visual web builder
A visual web builder in the Webflow and Squarespace class, and one of the three products in the Synolink suite. Pages are assembled from typed elements on a canvas, then published with AI-generated content, SEO- and GEO-optimized output, and i18n built in.
The editor runs on content-builder, a React framework for rich, interactive content editors that I built, inspired by Sanity and Builder.io.
- Status
- Live
- My role
- Led client development
- Suite
- synolink.ai
Architecture
Six layers, from the canvas to publishing.
Canvas and live mode
Drag-and-drop editing with real-time preview. Live mode flips the same page from editing to preview, and full undo and redo history runs on keyboard shortcuts.
Element system
More than twenty element types (containers, text, headings, images, buttons, links, dialogs, dropdowns, carousels, forms) nest into complex layouts, with desktop, tablet, and mobile breakpoints built in.
Design variables
A token system for colours, sizes, and font families, with device-specific overrides. When tokens are not enough, raw CSS opens in a Monaco editor.
Plugin architecture
Sidebar and toolbar are plugins, with more than fifteen built-in tabs: elements, layers, styles, actions, assets, CMS, history, and more. Custom React components and actions extend the editor without forking it.
AI generation
Elements generated from a prompt and streamed onto the canvas, across multiple providers: OpenAI, Anthropic, Azure, Google, and OpenRouter.
Data and publishing
Collection lists bound to APIs, JSON, and locale data; forms with validation and conditional fields; page metadata and JSON-LD; locale switching for every page.
My role
What I was responsible for.
Responsibilities
- Led client development of cms.synolink.ai.
- Built content-builder, the editor framework underneath it.
Not included
- Traffic, revenue, and performance figures are not published.