Make an Astro site editable without rebuilding the layout

Goal

Keep the Astro-derived HTML in Twig. Let an editor change headline and sub from Grav admin. Do not recreate the hero as a page-builder block.

Prerequisite: a Solo-compatible Astro project. If you need Twig files first, generate them with Solo’s Twig adapter — that step is released.

1. Freeze the component contract — manual, or Core + Solo

In Astro the editable surface should already be literal props:

---
export interface Props {
  headline: string;
  sub?: string;
}
const { headline, sub } = Astro.props;
---
<section class="hero">
  <h1>{headline}</h1>
  {sub && <p>{sub}</p>}
</section>

Manual: list every prop you will expose. Core (released): extracts that list into JSON IR. Studio (planned): would read the same list to seed Grav blueprints.

2. Put the markup in a Grav theme partial — manual, or Solo Twig

Copy the HTML into a Twig partial. Solo can emit this if you already run --adapter twig:

{# themes/mytheme/templates/partials/hero.html.twig #}
<section class="hero">
  <h1>{{ header.headline }}</h1>
  {% if header.sub %}
    <p>{{ header.sub }}</p>
  {% endif %}
</section>

Note the namespace: Grav pages typically expose header.* from frontmatter. Solo’s default fm.props is a different contract. Manual today: rename variables when you drop Solo Twig into Grav, or pass an fm array from the Grav template. Studio (planned): would choose a Grav-native mapping instead of leaving that rename to you.

3. Declare fields in a blueprint — manual only for now

Studio does not generate blueprints yet. You write YAML:

# user/blueprints/pages/home.yaml
title: Home
form:
  fields:
    header.headline:
      type: text
      label: Headline
      validate:
        required: true
    header.sub:
      type: text
      label: Subtitle

If you add a field that does not exist on the Astro component, you have already created drift. Stay inside the prop list.

4. Store content on the Grav page — editor-owned after wiring

# user/pages/01.home/home.md
---
title: Home
headline: Build in Astro.
sub: Edit the words in Grav. Keep the layout in the theme.
---

The Markdown body can hold long copy. The hero fields stay in frontmatter so they cannot reshuffle the layout.

5. Include the partial from the page template — manual

{# themes/mytheme/templates/home.html.twig #}
{% extends 'partials/base.html.twig' %}
{% block content %}
  {% include 'partials/hero.html.twig' %}
  {{ page.content|raw }}
{% endblock %}

6. Deploy like a traditional PHP site

Grav is PHP on a server or a static export depending on your setup. FTP, rsync, or any host with PHP still work. Frontmatter does not host Grav for you. Studio will not become a managed CMS.

Labelled summary

Read the Astro to Grav pillar for why Grav is the target. Join the Studio waitlist if you want blueprint generation automated — there is no checkout.