Public
Back
Version 9
6/13/2024
import { Hono } from "npm:hono";
const app = new Hono();
// Endpoint to catch and log the submitted name
app.post("/submit-name", async (c) => {
const data = await c.req.parseBody();
console.log("Received name:", data.name);
return c.json({ message: `Received name: ${data.name}` });
});
// Serve the HTML page with Alpine.js
app.get("/", (c) => {
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reactive Form with Alpine.js</title>
<script src="https://cdn.jsdelivr.net/npm/alpinejs" defer></script>
<script src="https://unpkg.com/htmx.org@1.9.9" defer></script>
</head>
<body>
<div x-data="{
name: ''
}">
<p x-text="name"></p>
<input type="text" x-model="name" placeholder="Enter your name">
<form @submit.prevent>
<label for="name">Name:</label>
<span x-text="name"></span>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
yawnxyz-honoalpineexample.web.val.run
Updated: June 13, 2024