Skip to content
Wuppy

Theme elements

With a GitHub theme active, the theme’s own markup is editable on its live page, not only the blocks of the entry. This runs on the dev server (pnpm dev); in production, save theme changes and use Rebuild.

Selecting

Section titled “Selecting”
  • Click any element outside the blocks to select it. Properties shows its tag and its file (src/components/Hero.astro).
  • Layers lists the theme’s elements too (tag and text or first class). The page’s blocks (body) sit where the theme renders them. Clicking a row selects the element as on the canvas, and search finds theme elements by tag, text or class.

Editing

Section titled “Editing”
  • Edit its text, classes, inline style and attributes, change its tag, move it up/down, duplicate or delete it, or open the file in Code view. Double-click an element with only text in it to edit it in place.
  • Text, classes, styles and attributes change on the canvas as you type and are written to the theme’s .astro file after a short pause, without reloading the page. Changing the tag or position (move, duplicate, delete) reloads it.
  • Drag a theme row in Layers to move the element within its own file (same edges as blocks). Its right-click menu has Insert module after, Duplicate, Move up/down, Select parent, Open in Code and Delete.
  • With a theme element selected, a module added from Add or Layers is written into the theme file right after it (as plain HTML with inline styles) and selected. With nothing selected it goes into the page’s blocks. Markdown blocks always go into the page’s blocks.
  • Text or attributes produced by code ({...}, items of .map()) are edited in Code view. An element in a shared component such as Footer.astro changes on every page that uses it.

The inspector

Section titled “The inspector”

It is the full inspector: text, tag (p, h2, section…), every style group (Layout, Position, Size, Spacing, Typography, Background, Border, Effects, Interaction) and HTML attributes, with the same icon controls as a page block (see Properties). Styles / Attributes tabs, class pills, section cards, the right style rail and Search styles are shared too. Empty fields show the browser’s computed value.

Tailwind themes

Section titled “Tailwind themes”

When the theme uses Tailwind 4, styles are saved as classes:

You set Saved as
align-self: center self-center
width 320px w-[320px]
a property without a utility an arbitrary property, [filter:blur(4px)]
a style at a breakpoint or state max-[768px]:…, hover:…

Type a Tailwind value (4, full, red-500) or CSS (320px, #fff). Classes under other variants are kept. The context and state controls open from the rail’s Context & state button. On a theme without Tailwind, styles become inline style.

Requirements

Section titled “Requirements”
  • Astro 7.4 or later. Older Astro does not mark elements with their source file and line, so they cannot be listed or selected. Installing a theme raises its Astro to ^7.4.0; a theme installed earlier needs Rebuild once.
  • Astro’s dev toolbar must be on, since the marks come with it. Wuppy turns it back on while a theme runs for a site, even when the theme’s own config turns it off.
  • Changing theme files needs an admin (the site:settings permission). Nothing is pushed to GitHub: edits stay in the theme’s folder on the server.