` in the existing `html!` macro.
Replace only its `` and `
` with these two elements:
```rust
"Fast SSR, typed in Rust"
"This page renders from a compiled template macro."
```
Keep the surrounding template, including `DatabaseBadge` and `DatabaseCard`.
Those children load the database status, so this page uses async `WebRender`
and `html!`. A static component can use `WebRenderSync` and `html_sync!`, as
shown by the About page below.
In **the same file**, find `impl MdRender for HomePage`.
Inside `render_md`'s existing `md! { r###"…"### }` template, replace the old
heading and the paragraph immediately after it with these Markdown lines:
```markdown
Fast SSR, typed in Rust
This page renders from a compiled template macro.
```
Keep the other Markdown content and child expressions. Proa's content-coverage
lint compares rendered content across the two implementations; changing both
keeps the HTML and Markdown representations consistent with the same page edit.
Refresh the browser and open [/index.md](http://localhost:3000/index.md) to see
both representations. Edit `styles/starter.css` to change the starter's design;
`public/styles.css` is the generated output and is rebuilt by Tailwind.
## 5. Add A Route
Create `src/pages/about.rs`:
```rust
use axum::response::IntoResponse;
use proa::{to_async, DataLoader, WebContext, WebRenderSync, WriteError};
use proa::axum::RouteResponse;
use proa::html_sync;
use crate::layouts::RootDocument;
pub async fn handler() -> impl IntoResponse {
RouteResponse::ssr_async(RootDocument {
title: "About",
content: to_async(AboutPage {
heading: "About",
body: "This route renders from src/pages/about.rs.",
}),
})
}
struct AboutPage {
heading: &'static str,
body: &'static str,
}
impl WebRenderSync for AboutPage {
fn render(self, cx: &mut WebContext) -> Result<(), WriteError> {
html_sync! {
{self.heading}
{self.body}
}
.render(cx)
}
}
```
Export it from `src/pages/mod.rs`, keeping the generated `home` module:
```rust
pub mod about;
pub mod home;
```
Register it in `src/routes.rs`, between the markers the generator maintains:
```rust
let (router, metadata) = router_from_spec(vec![
// proa:route-specs:start
Route::endpoint("/", get(pages::home::handler)),
Route::endpoint("/about", get(pages::about::handler)),
// proa:route-specs:end
]);
```
That is the whole route flow. `RouteResponse` renders the page and finalizes
the HTTP response, `RootDocument` supplies the shared page shell (it is
async-capable, so a synchronous page goes in through `to_async`), and the
fields passed to `AboutPage` are compile-time-checked props. Add
[page caching](/docs/framework/page-caching) to the route spec when the
response should carry CDN cache headers. Add Axum extractors such as `Path`,
`Query`, or `State` to `handler` when the route needs request data.
Open [http://localhost:3000/about](http://localhost:3000/about). Check the route table:
```bash
proa site routes
```
Checkpoint: `/about` appears in the route report and renders in the browser.
## 6. Validate Before Moving On
Run Proa's source-aware checks before the full build:
```bash
proa fmt --check --verify src
proa lint src --deny warnings
proa test
proa build
```
`proa fmt --check --verify` checks the canonical template layout and verifies
that formatting would preserve the rendered output. `proa lint` understands
Proa render paths, so `--deny warnings` catches performance problems such as
intermediate rendered strings, avoidable allocations, and async renderers that
never await. Once those focused checks are clean, `proa build` validates the
complete linked application. `proa test` also checks both page representations
and that the two database components share one origin query.
## Next steps
- [Tutorial](/docs/guides/tutorial)
- Add typed data, components, routes, and a form action.
- [proa new site](/docs/cli/new-site)
- Scaffold a project and see where pages, layouts, components, and assets live.
- [HTML rendering](/docs/core/html-rendering)
- Render typed Rust values to HTML with render traits and the html! macros.
- [Troubleshooting](/docs/guides/troubleshooting)
- Fix the most common Proa setup, registry, template, component, island, routing, and CI failures.
- [Deploy](/docs/framework/deployment)
- Pick a deployment target, then follow the guide for it.