Public
Like
jsonToHtml
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
index.ts
https://mattspieg--4ff07e5c602e11f0a1c70224a6c84d84.web.val.run
A serverless function that converts structured JSON form data into a well-formatted HTML template with proper categorization and styling.
- Automatic Categorization: Groups form fields by section numbers (1., 2., 3., etc.)
- Subsection Organization: Further organizes fields into logical subsections (2.1, 2.2, etc.)
- Rich Formatting:
- Boolean values displayed as colored Yes/No
- Email addresses become clickable mailto links
- URLs become clickable links
- Dates are formatted for readability
- Long text gets automatic line breaks
- Professional Styling: Clean, responsive design with proper typography
- Flexible Structure: Handles optional sections (only shows sections with data)
Send a POST request to the endpoint with JSON data:
curl -X POST https://your-val-town-url.web.val.run \ -H "Content-Type: application/json" \ -d '{"firstname": "John", "1. lastname": "Doe", "2.1. Assessment Type": "Full Audit"}'
The function expects JSON with keys that follow this pattern:
firstname
- Special case for first name1.
or1.
prefix - General information2.
or2.
prefix - Desktop assessment details3.
or3.
prefix - Browser extension details4.
or4.
prefix - Mobile assessment details5.
or5.
prefix - Additional informationutm_*
,referrer
, etc. - Tracking information
- General Project & Contact Information
- Desktop Wallet Assessment (if applicable)
- 2.1 Scope of Work (Desktop)
- 2.2 Desktop Codebase Details
- 2.3 Security Goals & Concerns (Desktop)
- 2.4 Worst-Case Scenario Assessment (Desktop)
- 2.5 Access & Logistics (Desktop)
- 2.6 Timeline & Schedule (Desktop)
- 2.7 Budget (Desktop)
- Browser Extension Wallet Assessment (if applicable)
- Similar subsection structure
- Mobile Wallet Assessment (if applicable)
- Similar subsection structure
- Additional Information (if applicable)
- Tracking Information (if present)
Returns a complete HTML document with:
- Responsive design optimized for 800px max width
- Professional styling with color-coded sections
- Proper semantic HTML structure
- Inline CSS for portability
- Returns 405 for non-POST requests
- Returns 400 for invalid JSON
- Gracefully handles missing or malformed fields