Getting started
Introduction
What sitereal is, what it writes, and how it differs from a page builder that owns your markup.
sitereal is a desktop app that edits an Astro project visually. You compose pages on a canvas, style them in panels, and everything you do is written to disk as ordinary files: .astro pages, CSS, JavaScript, content entries and assets.
There is no runtime library on your pages, no database behind them and nothing that phones home to the builder. If you delete sitereal tomorrow, astro build still produces exactly the same site — you only lose the ability to edit it visually.
What you get
- A visual builder. A canvas showing every breakpoint side by side, a tree of the page, and panels for style, CSS, settings and effects.
- A design system. Eleven modules of tokens — colours, type, spacing, buttons, borders, shadows, motion — generated into one stylesheet, each switchable.
- A content hub. Content types described once, edited in generated forms, stored as files in git or as rows in a database.
- A media library. Everything under
public/, with alt text, as a picker. - An agent interface. The same operations as the app, exposed as MCP tools, so Claude Code can build alongside you.
The one idea
Most visual builders own your markup. They store a page as their own data structure and render it through their own runtime, so the output is theirs, the classes are theirs, and leaving means rebuilding. sitereal stores the same kind of data — but it emits it, immediately and completely, as the code you would have written by hand.
---
import Base from '../layouts/PlainBase.astro';
import '../styles/generated/framework.css';
import '../styles/generated/pages/about.css';
---
<Base title="About">
<section builder-data-element="section" class="about">
<div builder-data-element="container">
<h1 builder-data-element="heading" class="about__title">About us</h1>
<p builder-data-element="text">Two people and a lot of opinions about CSS.</p>
</div>
</section>
</Base>That file is the page. Open it in an editor, commit it, review it in a pull request, hand it to a developer who has never opened sitereal. The only unusual thing in it is the builder-data-element attribute, and that is not a framework hook — it is how the design system knows a section from a heading without inventing class names you did not choose.
What it is not
sitereal is not a hosting product, a CMS with a login page, or a theme system. It edits a repository on your machine. Where the site is deployed, how it is built and who has access are decisions Astro and your host already answer.
Coming from WordPress or Etch
| WordPress + Etch | sitereal |
|---|---|
| Page / Post | a page in the builder, or an entry in a content collection |
| Custom Post Type | a content type — storage: 'git' (files) or 'db' (rows) |
| ACF field group | one schema, which drives the form, the types and the queries |
| Taxonomy | a select or reference field |
WP_Query loop | a Loop element over a typed query |
| wp-admin | the Content Hub |
| Builder-owned DOM | plain .astro and your own classes |
| Cache plugins | static output, nothing to invalidate |
The mental model carries over. The tax does not: no PHP, no plugin surface, no database unless you ask for one, and no rendering layer between what you build and what ships.
Where to go next
- Install & projects — get the app, make a project, understand the folder.
- Your first page — build and style something real in ten minutes.
- How sitereal works — the project file, the engine, and what is generated.