AI-FIRST CMS

Edit with AI.
Preview in real time.

Quant Studio is a visual content editor powered by AI. Click to edit, talk to AI, see changes live — all backed by Git.

Try the demo
No credit card required Git-backed Powered by Quant AI

AI Assistant

Tell it what to build.
Watch it happen.

Studio's AI assistant reads your code, understands your content structure, and makes changes with 19 specialised tools. Create pages, edit content, modify components, update styles — all through conversation.

  • Creates and edits content across collections
  • Reads and writes components, layouts, and config
  • Understands your schema and project structure
  • Chains multiple actions in a single conversation

Powered by Quant AI · specialist agent-driven

AI Assistant post / edge-computing
Write a blog post about edge computing and add a hero image
create_entry upload_media
Done — I've created the post with frontmatter, body content, and uploaded a hero image. The preview has updated.
Ask the AI...

Visual Editor

Click. Edit. Live.

Point and click on any element to edit it. Changes render instantly in the browser — no build step, no waiting. The Astro runtime compiles in real time.

studio.quantcdn.io/demo/main/post/building-with-astro/visual
Demo mode Editing a sample project. Changes are temporary.
← Post › building-with-astro Unsaved Live preview Code
AI Assistant post / building-with-astro

I've updated the Hero component to support a compact mode and a slot-based layout so custom content can be passed in.

The blog post template now wraps the post header inside the Hero — the title, description, date, category badge, reading time, and tags all render inside the animated blue hero banner.

update_component
patch_entry_body

Styled the metadata for the blue background — date and reading time use soft blue-200 tones, the category badge uses a frosted bg-white/15 pill, and tags use subtle bg-white/10 with a light border.

can you add it to blog posts

Let me update the blog post template to include the Hero component in the header area.

Ask the AI...
Blog Games Team About
20 January 2026 guide 4 min read

Why we chose Astro

Astro's content-first architecture makes it the ideal foundation for managed content sites.

astro architecture

Astro is a web framework designed for content-driven websites. It ships zero JavaScript by default, generates static HTML at build time, and has first-class support for content collections with type-safe schemas.

Content collections

Astro's content collections let you define schemas using Zod. Every piece of content is validated at build time — no surprises in production.

const post = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.coerce.date(),
    tags: z.array(z.string()).default([]),
  }),
});
Fields ×
Why we chose Astro
Astro's content-first architecture m...
20/01/2026, 12:00 am
/images/example.jpg Browse
Team
astro × architecture ×
Draft
Guide ↓
Featured
main Ready

Schema-driven forms

Field types generated automatically from your content schema

In-browser Astro compiler

Full Astro runtime compiles .astro, .mdx, .tsx in the browser

Inline click-to-edit

Click any text in the preview to edit it directly

Branch
Create a branch from main to work in isolation
Edit
Visual editor, AI assistant, or code — your choice
Review
Full review cycle with comments, diffs, and AI-powered fixes
Deploy
Merge and auto-deploy via GitHub Actions

Git workflow

Branch. Review. Ship.

Every change is a Git commit. Work on branches, submit pull requests for review, and deploy with confidence. Content teams get editorial workflow; developers get version control.

  • Branch from main to work in isolation
  • In-browser review with comments and diffs
  • Fix review feedback with one click via AI
  • Merge and auto-deploy via GitHub Actions

Features

Everything you need

A complete development environment in the browser.

Schema editor

Model content visually. Define fields, types, and validation without writing TypeScript.

Code editor

Full IDE with Monaco. Syntax highlighting for Astro, TypeScript, MDX, CSS, and more.

Media library

Upload, browse, and insert images. Drag and drop with visual previews.

Demo mode

Try Studio instantly. No credit card, no repository required. AI included.

Multi-collection

Manage blog posts, pages, team members — any content collection in your Astro project.

Deployment tracking

Watch builds complete after merge. GitHub Actions status right in Studio.

Try Studio now

No credit card. No repository required. Start editing in seconds.

Open the demo View documentation