Astro syntax rules

Starjay sites are pure Astro. Write .astro components, not React components, and use Astro's syntax rather than JSX habits.

Use	Not	Why
class="…"	className="…"	Astro uses the HTML attribute.
<slot />	{children}	Astro passes child content through slots.
set:html={…} on an element	dangerouslySetInnerHTML	Astro's directive. Reserved for trusted HTML; see below.
Plain <a href="/about">	next/link or other router links	Links are ordinary links.
<script> in the component	'use client', hooks	Astro components render on the server; behavior goes in scripts.
Props from Astro.props in the frontmatter	export function Component(props)	An .astro file is a single template, not a function.
&#123; and &#125; in template text	A bare { or }	A literal { starts an Astro expression.

Props

Declare a Props interface in the frontmatter and destructure Astro.props with defaults:

---
interface Props {
  label?: string
  href?: string
}

const { label = '', href = '#' } = Astro.props as Props
---

<a data-component="TextLink" href={href} class="underline underline-offset-4">{label}</a>

Prop names must not be JavaScript reserved words (default, export, new, class and so on). Choose descriptive names such as exportLabel. The one common exception is passing class through to an element, which Astro supports by renaming it locally:

const { class: className } = Astro.props

If a component destructures a reserved word as a local name, Starjay renames the local variable automatically and keeps the prop name.

Classes

Write classes as plain string literals: class="flex gap-4". Avoid cn(), clsx() and template literals for classes; the editor's style tools read and rewrite literal class strings.

Literal braces

Inside template text, { and } start and end an expression. To show a literal brace, write { and }. Starjay writes them this way when you type braces on the canvas.

Related

• Component rules
• Styling rules
• Interactivity