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

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

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.