Astro language preview

1. Frontmatter and template

TypeScript frontmatter fence followed by markup

horizon-dark

---
import Counter from "../components/Counter.astro";

export const title = "Hello, Astro";
const items = await fetch("/api/items").then((res) => res.json());
---

<div class="card">
  <h1>{title}</h1>
  <Counter client:load count={items.length} />
</div>

atom-one-dark

---
import Counter from "../components/Counter.astro";

export const title = "Hello, Astro";
const items = await fetch("/api/items").then((res) => res.json());
---

<div class="card">
  <h1>{title}</h1>
  <Counter client:load count={items.length} />
</div>

github-dark

---
import Counter from "../components/Counter.astro";

export const title = "Hello, Astro";
const items = await fetch("/api/items").then((res) => res.json());
---

<div class="card">
  <h1>{title}</h1>
  <Counter client:load count={items.length} />
</div>

dracula

---
import Counter from "../components/Counter.astro";

export const title = "Hello, Astro";
const items = await fetch("/api/items").then((res) => res.json());
---

<div class="card">
  <h1>{title}</h1>
  <Counter client:load count={items.length} />
</div>

nord

---
import Counter from "../components/Counter.astro";

export const title = "Hello, Astro";
const items = await fetch("/api/items").then((res) => res.json());
---

<div class="card">
  <h1>{title}</h1>
  <Counter client:load count={items.length} />
</div>

github

---
import Counter from "../components/Counter.astro";

export const title = "Hello, Astro";
const items = await fetch("/api/items").then((res) => res.json());
---

<div class="card">
  <h1>{title}</h1>
  <Counter client:load count={items.length} />
</div>

2. Scoped styles

a component-scoped <style> block highlighted as CSS

horizon-dark

---
const color = "tomato";
---

<style>
  .badge {
    color: var(--badge-color, tomato);
    border-radius: 4px;
  }
</style>

<span class="badge">New</span>

atom-one-dark

---
const color = "tomato";
---

<style>
  .badge {
    color: var(--badge-color, tomato);
    border-radius: 4px;
  }
</style>

<span class="badge">New</span>

github-dark

---
const color = "tomato";
---

<style>
  .badge {
    color: var(--badge-color, tomato);
    border-radius: 4px;
  }
</style>

<span class="badge">New</span>

dracula

---
const color = "tomato";
---

<style>
  .badge {
    color: var(--badge-color, tomato);
    border-radius: 4px;
  }
</style>

<span class="badge">New</span>

nord

---
const color = "tomato";
---

<style>
  .badge {
    color: var(--badge-color, tomato);
    border-radius: 4px;
  }
</style>

<span class="badge">New</span>

github

---
const color = "tomato";
---

<style>
  .badge {
    color: var(--badge-color, tomato);
    border-radius: 4px;
  }
</style>

<span class="badge">New</span>

3. Client directives

colon-namespaced attributes like client:load and set:html

horizon-dark

<div set:html={rawHtml} />
<span class:list={["badge", { active }]}>Status</span>
<Widget client:visible />

atom-one-dark

<div set:html={rawHtml} />
<span class:list={["badge", { active }]}>Status</span>
<Widget client:visible />

github-dark

<div set:html={rawHtml} />
<span class:list={["badge", { active }]}>Status</span>
<Widget client:visible />

dracula

<div set:html={rawHtml} />
<span class:list={["badge", { active }]}>Status</span>
<Widget client:visible />

nord

<div set:html={rawHtml} />
<span class:list={["badge", { active }]}>Status</span>
<Widget client:visible />

github

<div set:html={rawHtml} />
<span class:list={["badge", { active }]}>Status</span>
<Widget client:visible />