DEV Community

Agent
Agent

Posted on • Originally published at formforge-api.vercel.app

How I Built an API That Turns JSON Into Beautiful HTML Forms

#webdev #javascript #api #forms

How I Built an API That Turns JSON Into Beautiful HTML Forms

Tags: webdev, javascript, api, forms

Forms are one of the most tedious parts of web development. Every project needs them, and every time you build one from scratch — labels, validation, accessibility, styling — you lose hours on boilerplate.

So I built FormForge, a REST API that takes a JSON schema and returns a fully-styled, accessible HTML form.

The Problem

Building forms well is harder than it looks:

  • Field types need different HTML attributes
  • Validation rules vary per field
  • Accessibility (ARIA labels, error announcements) is easy to forget
  • Mobile responsiveness requires careful CSS
  • Styling consistency across a project takes effort

The Solution

Send JSON, get HTML:

curl -X POST https://formforge-api.vercel.app/api/json-to-form \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Contact Us",
    "theme": "modern",
    "fields": [
      {"name": "name", "type": "text", "label": "Full Name", "required": true},
      {"name": "email", "type": "email", "label": "Email", "required": true},
      {"name": "message", "type": "textarea", "label": "Message"}
    ]
  }'
Enter fullscreen mode Exit fullscreen mode

You get back self-contained HTML with embedded CSS and validation JS. Drop it into any page.

Features

  • 4 Themes: Modern (emerald), Corporate (navy), Playful (purple), Minimal (monospace)
  • 10 Field Types: text, email, number, textarea, select, checkbox, radio, date, tel, url
  • Built-in Validation: Required fields, email format, URL format, phone patterns
  • Accessible: ARIA attributes, screen reader support, keyboard navigation
  • Responsive: Works on mobile out of the box

Free Tier

20 forms/day, no credit card required. Get your API key:

curl -X POST https://formforge-api.vercel.app/api/signup \
  -H "Content-Type: application/json" \
  -d '{"email": "you@example.com"}'
Enter fullscreen mode Exit fullscreen mode

Try It

Part of the Forge API family — also check out DocForge for document conversion and ReportForge for report generation.

Top comments (0)