Learn Astro - 10 Code Examples & CST Typing Practice Test

Astro is a modern, content-focused web framework designed for building fast, optimized websites using a 'bring your own framework' philosophy and a server-first, zero-JS-by-default approach.

View all 10 Astro code examples →

Astro Counter Component Astro Counter with Max Limit Astro Counter with Double Step Astro Counter with History Astro Counter with Auto-Increment Astro Counter with Conditional Theme Astro Counter with Lambda Handlers Astro Counter with Custom Step Astro Counter with Dark Mode Toggle Only Astro Counter with Combined Features

Learn ASTRO with Real Code Examples

Updated Nov 21, 2025

Explain

Astro helps developers build highly performant websites with minimal JavaScript shipped to the client.

It supports mixing multiple UI frameworks (React, Vue, Svelte, etc.) in one project.

Astro emphasizes server rendering, static generation, and island architecture for partial hydration.

Core Features

File-based routing

Static Site Generation (SSG)

SSR optional mode

Components as server-rendered templates

Built-in content collections

Basic Concepts Overview

Astro components (.astro files)

Islands & partial hydration

Routing via filesystem

Layouts & content collections

Markdown & MDX integration

Project Structure

src/pages - routes

src/components - components

src/layouts - page layouts

src/content - content collections

astro.config.mjs - framework config

Building Workflow

Create .astro or framework components

Use server-only code by default

Hydrate specific UI islands using directives

Use Astro’s content collection for structured content

Build and deploy to static hosting or SSR platform

Difficulty Use Cases

Beginner: blogs, static pages

Intermediate: docs sites with MDX

Advanced: SSR-enabled hybrid sites

Expert: multi-framework islands

Community: theme & template creation

Comparisons

More performance-focused than Next.js

Simpler than Nuxt or SvelteKit

Better for static sites than React-based tools

More flexible in framework usage

Less suited for complex apps than full-stack frameworks

Versioning Timeline

2021 - Astro 1.0 early release

2022 - Astro 1.0 stable

2023 - Astro 2.0 with content collections

2024 - Significant SSR improvements

2025 - Multi-runtime stabilization & new integrations

Glossary

Islands: isolated interactive components

Hydration: turning HTML into an interactive component

Frontmatter: server-side code block in Astro

Adapters: enable SSR on different platforms

Content Collections: schema-validated content system

Code Sample Descriptions

Astro Counter Component

---
import Counter from '../components/Counter.jsx';
---
<html>
    <body>
        <h1>Astro Counter Page</h1>
        <Counter />
    </body>
</html>

// components/Counter.jsx
import { useState } from 'react';
export default function Counter() {
    const [count, setCount] = useState(0);
    const [isDark, setIsDark] = useState(false);
    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
        </div>
    );
}

A basic counter component in Astro using React with theme toggling.

Let’s Try →

Astro Counter with Max Limit

---
import MaxCounter from '../components/MaxCounter.jsx';
---
<html>
    <body>
        <h1>Astro Max Counter</h1>
        <MaxCounter max={5} />
    </body>
</html>

// components/MaxCounter.jsx
import { useState } from 'react';
export default function MaxCounter({ max }) {
    const [count, setCount] = useState(0);
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => count < max && setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

Counter stops incrementing after reaching a maximum value in Astro using React.

Let’s Try →

Astro Counter with Double Step

---
import StepCounter from '../components/StepCounter.jsx';
---
<html>
    <body>
        <h1>Astro Step Counter</h1>
        <StepCounter step={2} />
    </body>
</html>

// components/StepCounter.jsx
import { useState } from 'react';
export default function StepCounter({ step }) {
    const [count, setCount] = useState(0);
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + step)}>+</button>
        <button onClick={() => setCount(count - step)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

A counter component in Astro that increments/decrements by 2 each time.

Let’s Try →

Astro Counter with History

---
import HistoryCounter from '../components/HistoryCounter.jsx';
---
<html>
    <body>
        <h1>Astro Counter History</h1>
        <HistoryCounter />
    </body>
</html>

// components/HistoryCounter.jsx
import { useState } from 'react';
export default function HistoryCounter() {
    const [count, setCount] = useState(0);
    const [history, setHistory] = useState([]);
    const update = (action) => { setHistory([...history, action]); };
    return (
        <div>
        <h2>Counter: {count}</h2>
        <div>History: {history.join(', ')}</div>
        <button onClick={() => { setCount(count + 1); update('Increment'); }}>+</button>
        <button onClick={() => { setCount(count - 1); update('Decrement'); }}>-</button>
        <button onClick={() => { setCount(0); update('Reset'); }}>Reset</button>
        </div>
    );
}

A counter component in Astro that logs each action to a history array.

Let’s Try →

Astro Counter with Auto-Increment

---
import AutoCounter from '../components/AutoCounter.jsx';
---
<html>
    <body>
        <h1>Astro Auto Counter</h1>
        <AutoCounter />
    </body>
</html>

// components/AutoCounter.jsx
import { useState, useEffect } from 'react';
export default function AutoCounter() {
    const [count, setCount] = useState(0);
    useEffect(() => { const interval = setInterval(() => setCount(c => c + 1), 1000); return () => clearInterval(interval); }, []);
    return <h2>Counter: {count}</h2>;
}

A counter in Astro that increments automatically every second using React useEffect.

Let’s Try →

Astro Counter with Conditional Theme

---
import ThemeCounter from '../components/ThemeCounter.jsx';
---
<html>
    <body>
        <h1>Astro Conditional Theme Counter</h1>
        <ThemeCounter />
    </body>
</html>

// components/ThemeCounter.jsx
import { useState } from 'react';
export default function ThemeCounter() {
    const [count, setCount] = useState(0);
    const isDark = count % 2 === 0;
    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

A counter that automatically switches theme based on even/odd count in Astro.

Let’s Try →

Astro Counter with Lambda Handlers

---
import LambdaCounter from '../components/LambdaCounter.jsx';
---
<html>
    <body>
        <h1>Astro Lambda Counter</h1>
        <LambdaCounter />
    </body>
</html>

// components/LambdaCounter.jsx
import { useState } from 'react';
export default function LambdaCounter() {
    const [count, setCount] = useState(0);
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

Uses inline arrow functions for counter operations in Astro React component.

Let’s Try →

Astro Counter with Custom Step

---
import StepCounter from '../components/StepCounter.jsx';
---
<html>
    <body>
        <h1>Astro Custom Step Counter</h1>
        <StepCounter step={3} />
    </body>
</html>

// components/StepCounter.jsx
import { useState } from 'react';
export default function StepCounter({ step }) {
    const [count, setCount] = useState(0);
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + step)}>+</button>
        <button onClick={() => setCount(count - step)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

Counter increments or decrements by a custom step value passed as prop.

Let’s Try →

Astro Counter with Dark Mode Toggle Only

---
import DarkOnlyCounter from '../components/DarkOnlyCounter.jsx';
---
<html>
    <body>
        <h1>Astro Dark Mode Counter</h1>
        <DarkOnlyCounter />
    </body>
</html>

// components/DarkOnlyCounter.jsx
import { useState } from 'react';
export default function DarkOnlyCounter() {
    const [isDark, setIsDark] = useState(false);
    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: 0</h2>
        <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
        </div>
    );
}

A counter where only the theme can be toggled, count is static.

Let’s Try →

Astro Counter with Combined Features

---
import FullCounter from '../components/FullCounter.jsx';
---
<html>
    <body>
        <h1>Astro Full Counter</h1>
        <FullCounter step={2} autoIncrement={true} />
    </body>
</html>

// components/FullCounter.jsx
import { useState, useEffect } from 'react';
export default function FullCounter({ step, autoIncrement }) {
    const [count, setCount] = useState(0);
    const [history, setHistory] = useState([]);
    const [isDark, setIsDark] = useState(false);
    const updateHistory = (action) => setHistory([...history, action]);
    useEffect(() => { if(autoIncrement) { const i = setInterval(() => { setCount(c => { updateHistory('Auto increment'); return c + step; }); }, 1000); return () => clearInterval(i); } }, []);
    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count}</h2>
        <div>History: {history.join(', ')}</div>
        <button onClick={() => { setCount(count + step); updateHistory('Increment'); }}>+</button>
        <button onClick={() => { setCount(count - step); updateHistory('Decrement'); }}>-</button>
        <button onClick={() => { setCount(0); updateHistory('Reset'); }}>Reset</button>
        <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
        </div>
    );
}

A full-featured Astro counter: history, step, auto-increment, and theme toggle.

Let’s Try →

Frequently Asked Questions about Astro

What is Astro?

Astro is a modern, content-focused web framework designed for building fast, optimized websites using a 'bring your own framework' philosophy and a server-first, zero-JS-by-default approach.

What are the primary use cases for Astro?

Marketing and landing pages. Blogs and documentation sites. Static content-heavy websites. Hybrid static + server-rendered content. Sites using multiple UI frameworks together

What are the strengths of Astro?

Extremely fast performance. Little to no JavaScript shipped by default. Supports multiple frameworks together. Great for SEO-heavy sites. Best-in-class markdown ecosystem

What are the limitations of Astro?

Not ideal for full dynamic web apps. Requires islands for interactivity. SSR is available but not as feature-rich as full-stack frameworks. Tooling ecosystem smaller than React/Next.js. Complex for highly interactive dashboards or apps

How can I practice Astro typing speed?

CodeSpeedTest offers 10+ real Astro code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Astro Counter Component

---
import Counter from '../components/Counter.jsx';
---
<html>
    <body>
        <h1>Astro Counter Page</h1>
        <Counter />
    </body>
</html>

// components/Counter.jsx
import { useState } from 'react';
export default function Counter() {
    const [count, setCount] = useState(0);
    const [isDark, setIsDark] = useState(false);
    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
        </div>
    );
}

A basic counter component in Astro using React with theme toggling.

Let’s Try →

Astro Counter with Max Limit

---
import MaxCounter from '../components/MaxCounter.jsx';
---
<html>
    <body>
        <h1>Astro Max Counter</h1>
        <MaxCounter max={5} />
    </body>
</html>

// components/MaxCounter.jsx
import { useState } from 'react';
export default function MaxCounter({ max }) {
    const [count, setCount] = useState(0);
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => count < max && setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

Counter stops incrementing after reaching a maximum value in Astro using React.

Let’s Try →

Astro Counter with Double Step

---
import StepCounter from '../components/StepCounter.jsx';
---
<html>
    <body>
        <h1>Astro Step Counter</h1>
        <StepCounter step={2} />
    </body>
</html>

// components/StepCounter.jsx
import { useState } from 'react';
export default function StepCounter({ step }) {
    const [count, setCount] = useState(0);
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + step)}>+</button>
        <button onClick={() => setCount(count - step)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

A counter component in Astro that increments/decrements by 2 each time.

Let’s Try →

Astro Counter with History

---
import HistoryCounter from '../components/HistoryCounter.jsx';
---
<html>
    <body>
        <h1>Astro Counter History</h1>
        <HistoryCounter />
    </body>
</html>

// components/HistoryCounter.jsx
import { useState } from 'react';
export default function HistoryCounter() {
    const [count, setCount] = useState(0);
    const [history, setHistory] = useState([]);
    const update = (action) => { setHistory([...history, action]); };
    return (
        <div>
        <h2>Counter: {count}</h2>
        <div>History: {history.join(', ')}</div>
        <button onClick={() => { setCount(count + 1); update('Increment'); }}>+</button>
        <button onClick={() => { setCount(count - 1); update('Decrement'); }}>-</button>
        <button onClick={() => { setCount(0); update('Reset'); }}>Reset</button>
        </div>
    );
}

A counter component in Astro that logs each action to a history array.

Let’s Try →

Astro Counter with Auto-Increment

---
import AutoCounter from '../components/AutoCounter.jsx';
---
<html>
    <body>
        <h1>Astro Auto Counter</h1>
        <AutoCounter />
    </body>
</html>

// components/AutoCounter.jsx
import { useState, useEffect } from 'react';
export default function AutoCounter() {
    const [count, setCount] = useState(0);
    useEffect(() => { const interval = setInterval(() => setCount(c => c + 1), 1000); return () => clearInterval(interval); }, []);
    return <h2>Counter: {count}</h2>;
}

A counter in Astro that increments automatically every second using React useEffect.

Let’s Try →

Astro Counter with Conditional Theme

---
import ThemeCounter from '../components/ThemeCounter.jsx';
---
<html>
    <body>
        <h1>Astro Conditional Theme Counter</h1>
        <ThemeCounter />
    </body>
</html>

// components/ThemeCounter.jsx
import { useState } from 'react';
export default function ThemeCounter() {
    const [count, setCount] = useState(0);
    const isDark = count % 2 === 0;
    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

A counter that automatically switches theme based on even/odd count in Astro.

Let’s Try →

Astro Counter with Lambda Handlers

---
import LambdaCounter from '../components/LambdaCounter.jsx';
---
<html>
    <body>
        <h1>Astro Lambda Counter</h1>
        <LambdaCounter />
    </body>
</html>

// components/LambdaCounter.jsx
import { useState } from 'react';
export default function LambdaCounter() {
    const [count, setCount] = useState(0);
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

Uses inline arrow functions for counter operations in Astro React component.

Let’s Try →

Astro Counter with Custom Step

---
import StepCounter from '../components/StepCounter.jsx';
---
<html>
    <body>
        <h1>Astro Custom Step Counter</h1>
        <StepCounter step={3} />
    </body>
</html>

// components/StepCounter.jsx
import { useState } from 'react';
export default function StepCounter({ step }) {
    const [count, setCount] = useState(0);
    return (
        <div>
        <h2>Counter: {count}</h2>
        <button onClick={() => setCount(count + step)}>+</button>
        <button onClick={() => setCount(count - step)}>-</button>
        <button onClick={() => setCount(0)}>Reset</button>
        </div>
    );
}

Counter increments or decrements by a custom step value passed as prop.

Let’s Try →

Astro Counter with Dark Mode Toggle Only

---
import DarkOnlyCounter from '../components/DarkOnlyCounter.jsx';
---
<html>
    <body>
        <h1>Astro Dark Mode Counter</h1>
        <DarkOnlyCounter />
    </body>
</html>

// components/DarkOnlyCounter.jsx
import { useState } from 'react';
export default function DarkOnlyCounter() {
    const [isDark, setIsDark] = useState(false);
    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: 0</h2>
        <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
        </div>
    );
}

A counter where only the theme can be toggled, count is static.

Let’s Try →

Astro Counter with Combined Features

---
import FullCounter from '../components/FullCounter.jsx';
---
<html>
    <body>
        <h1>Astro Full Counter</h1>
        <FullCounter step={2} autoIncrement={true} />
    </body>
</html>

// components/FullCounter.jsx
import { useState, useEffect } from 'react';
export default function FullCounter({ step, autoIncrement }) {
    const [count, setCount] = useState(0);
    const [history, setHistory] = useState([]);
    const [isDark, setIsDark] = useState(false);
    const updateHistory = (action) => setHistory([...history, action]);
    useEffect(() => { if(autoIncrement) { const i = setInterval(() => { setCount(c => { updateHistory('Auto increment'); return c + step; }); }, 1000); return () => clearInterval(i); } }, []);
    return (
        <div className={isDark ? 'dark-theme' : 'light-theme'}>
        <h2>Counter: {count}</h2>
        <div>History: {history.join(', ')}</div>
        <button onClick={() => { setCount(count + step); updateHistory('Increment'); }}>+</button>
        <button onClick={() => { setCount(count - step); updateHistory('Decrement'); }}>-</button>
        <button onClick={() => { setCount(0); updateHistory('Reset'); }}>Reset</button>
        <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
        </div>
    );
}

A full-featured Astro counter: history, step, auto-increment, and theme toggle.

Let’s Try →

Frequently Asked Questions about Astro

What is Astro?

Astro is a modern, content-focused web framework designed for building fast, optimized websites using a 'bring your own framework' philosophy and a server-first, zero-JS-by-default approach.

What are the primary use cases for Astro?

Marketing and landing pages. Blogs and documentation sites. Static content-heavy websites. Hybrid static + server-rendered content. Sites using multiple UI frameworks together

What are the strengths of Astro?

Extremely fast performance. Little to no JavaScript shipped by default. Supports multiple frameworks together. Great for SEO-heavy sites. Best-in-class markdown ecosystem

What are the limitations of Astro?

How can I practice Astro typing speed?

CodeSpeedTest offers 10+ real Astro code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Astro - 10 Code Examples & CST Typing Practice Test

Learn ASTRO with Real Code Examples

Explain

Core Features

Basic Concepts Overview

Project Structure

Building Workflow

Difficulty Use Cases

Comparisons

Versioning Timeline

Glossary

Installation Setup

Environment Setup

Config Files

Cli Commands

Internationalization

Accessibility

Ui Styling

State Management

Data Management

Architecture

Rendering Model

Architectural Patterns

Real World Architectures

Design Principles

Scalability Guide

Migration Guide

Performance Notes

Security Notes

Monitoring Analytics

Code Quality

Practical Examples

Troubleshooting

Testing Guide

Deployment Options

Tools Ecosystem

Integrations

Productivity Tips

Challenges

Learning Path

Skill Improvement Plan

Interview Questions

Cheat Sheet

Books

Tutorials

Official Docs

Community Links

Community Support

Monetization

Future Roadmap

When Not To Use

Final Summary

Faq

Code Sample Descriptions

Astro Counter Component

Astro Counter with Max Limit

Astro Counter with Double Step

Astro Counter with History

Astro Counter with Auto-Increment

Astro Counter with Conditional Theme

Astro Counter with Lambda Handlers

Astro Counter with Custom Step

Astro Counter with Dark Mode Toggle Only

Astro Counter with Combined Features

Frequently Asked Questions about Astro

What is Astro?

What are the primary use cases for Astro?

What are the strengths of Astro?

What are the limitations of Astro?

How can I practice Astro typing speed?

Learn Other Programming Languages

Learn Astro - 10 Code Examples & CST Typing Practice Test

Learn ASTRO with Real Code Examples

Explain

Core Features

Basic Concepts Overview

Project Structure

Building Workflow

Difficulty Use Cases

Comparisons