# Serving Dynamic HTML Content in Vuer
## Overview
Vuer allows you to serve dynamic content by adding custom route handlers to your application server.
## Implementation Method
You can register a dynamic HTML handler using the `add_route()` method.
## Basic Example
```python
from vuer import Vuer
app = Vuer()
counter = 0
def dynamic_html_handler():
global counter
counter += 1
template = f"""
Dynamic HTML
Counter Value: {counter}
"""
return template
app.add_route("/dynamic", dynamic_html_handler, method="GET")
app.run()
```
## Usage
After starting the server, visit `http://localhost:8012/dynamic` to see the dynamically generated content. The counter value will update on each page reload.
## Key Parameters
- **Route path**: Specify the URL endpoint (e.g., "/dynamic")
- **Handler function**: Returns HTML content as a string
- **HTTP method**: Specify the request method (e.g., "GET")
## Advanced Example with JSON Response
```python
from vuer import Vuer
import json
app = Vuer()
def json_api_handler():
data = {
"status": "success",
"data": {
"message": "Hello from Vuer!",
"timestamp": time.time()
}
}
return json.dumps(data)
app.add_route("/api/data", json_api_handler, method="GET")
app.run()
```
## Multiple Routes
You can add multiple routes to your application:
```python
from vuer import Vuer
app = Vuer()
def home_handler():
return "Home Page
"
def about_handler():
return "About Page
"
def api_handler():
return '{"status": "ok"}'
app.add_route("/", home_handler, method="GET")
app.add_route("/about", about_handler, method="GET")
app.add_route("/api/status", api_handler, method="GET")
app.run()
```
## Best Practices
1. **Return strings**: Handler functions should return HTML or text as strings
2. **Use templates**: Consider using template engines for complex HTML
3. **Handle errors**: Add error handling in your route handlers
4. **Set content types**: For JSON responses, consider setting appropriate headers
## Combining with 3D Scenes
You can serve both dynamic HTML content and 3D scenes from the same Vuer application:
```python
from vuer import Vuer
from vuer.schemas import Scene, Box
import asyncio
app = Vuer()
# Add dynamic HTML route
def stats_handler():
return f"""
Vuer Statistics
Server running on port 8012
"""
app.add_route("/stats", stats_handler, method="GET")
# Add 3D scene
@app.spawn
async def main(session):
session.set @ Scene(
Box(
args=[0.1, 0.1, 0.1],
position=[0, 0, 0],
key="box",
),
)
while True:
await asyncio.sleep(1.0)
app.run()
```
## Source
Documentation: https://docs.vuer.ai/en/latest/tutorials/basics/adding_html_handler.html