Root.js · The web platform
Build. Edit. Ship.
Root.js pairs a fast web framework with a CMS your whole team will actually enjoy:
live preview, AI, localization, and publishing workflows, all built in.
npm create @blinkk/root
One platform
From first commit to final publish.
Most teams stitch together a framework, a headless CMS, a translation tool, and a deploy pipeline. Root.js is all of it, designed to work as one.
Build
A framework that gets out of your way.
Server-rendered TSX, file-based routes, and web-component islands, powered by Vite.
- Zero client JavaScript by default
- i18n routing and sitemaps built in
- Deploy to Firebase or App Engine
Manage
A CMS your editors will love.
Visual editing with live preview, drafts, releases, translations, and comments, on top of your own Firestore.
- Content models defined in code
- Schedule launches with releases
- Roles, publishing locks, and version history
Automate
AI that knows your content.
Root AI and agent tooling can read, edit, translate, and publish with your team, and your team stays in charge.
- Chat with your content in the CMS
- Bring your own model provider
- Agent changes reviewed like PRs
Root AI
An AI teammate that knows your content model.
Ask Root AI to find, draft, translate, or restructure content. It works through the same tools your editors use, so every change lands as a reviewable draft.
- Reads and edits docs, schemas, and releases
- Read-only, approve-each-step, or auto modes
- Anthropic, OpenAI, Google, or any compatible model provider
Content as code
Your content model lives in your repo.
Define schemas in TypeScript, get generated types for free, and render content with the same components you already write.
Describe the fields editors can fill in.
import {schema} from '@blinkk/root-cms';
export default schema.define({
name: 'TemplateHero',
fields: [
schema.string({id: 'title', translate: true}),
schema.richtext({id: 'body'}),
schema.image({id: 'image'}),
],
});Render them with fully typed props.
import {RichText} from '@blinkk/root-cms/richtext';
import {TemplateHeroFields} from '@/root-cms.js';
// Props are typed from your schema.
export function TemplateHero(
props: TemplateHeroFields
) {
return (
<section>
<h1>{props.title}</h1>
<RichText data={props.body} />
<Image {...props.image} />
</section>
);
}Map a collection to a route.
import {cmsRoute} from '@/utils/cms-route.js';
import {Page} from '@/components/Page.js';
export default Page;
// Drafts for editors, published for everyone.
export const {handle} = cmsRoute({
collection: 'Pages',
slugParam: 'page',
});Publishing
Ship content like you ship code.
Work in drafts, then publish now, on a schedule, or as part of a release that goes live all at once. Publishing checks catch problems before your visitors do.
- Drafts, diffs, and AI-written publish messages
- Releases bundle docs and data for launch day
- Custom checks for translations, links, and more
Localization
Every locale, one workflow.
Root.js tracks every translatable string from schema to page. Translate in the CMS, with AI, or through your vendor, and localized URLs, fallbacks, and hreflang tags come for free.
- Per-page translation editor with missing-string alerts
- Import and export CSV, Google Sheets and ARB
- Plug in custom third-party translations providers like Crowdin
Collaboration
Real-time editing and feedback right where the words live.
See who else is editing, receive their updates in real-time, and get notified when it matters. Comment on any field, @mention a teammate and resolve threads when you’re done.
- Real-time updates from other editors
- Field-level comment threads with @mentions
- Email and custom notification settings
The framework
Fast by default. Flexible when you need it.
The same framework runs your marketing site, app, and blog. And it’s based on just TypeScript, TSX, and Vite.
-
Server-rendered TSX
Render on the server or build static HTML. Zero JavaScript unless you ask for it. -
Web component islands
Ship interactivity, not bundles. Only the elements on a page load their JS. -
File-based routing
Routes are files, with dynamic params, catch-alls, and custom handlers. -
Built-in i18n
Localized URLs, locale fallbacks, and sitemaps with hreflang, out of the box. -
Plugins & pods
Extend the server, build, and CMS, or package routes and schemas to share. -
Deploy anywhere
One command to Firebase or App Engine, with secrets synced from Secret Manager.
And so much more
Everything your content team needs.
-
Version history
Every change, recoverable. Compare, restore, or copy any past version. -
Publishing checks
Catch problems before your users do, with required or advisory checks. -
Agent-ready CLI
Content changes, reviewed like pull requests. Built for AI agents and CI. -
Asset library
Assets that stay in sync with Figma and Google Drive, served at any size. -
Data sources
Pull in Google Sheets and APIs, then publish them alongside your content. -
Roles & locks
The right hands on the right content, from viewer to admin. -
Make it yours
Custom sidebar tools, themes, hooks and an embeddable editor. -
Global search
Find any doc, field or string with ⌘K.
Get started
Start building on Root.js.
Create a project in minutes, then invite your team into the CMS.
npm create @blinkk/root