GSoC 2026 Proposal: JSON Schema Driven Form Component [APISIX-39]

[GSoC2026ProposalDivyanshuSingh.pdf](https://github.com/user-attachments/files/26377784/GSoC2026ProposalDivyanshuSingh.pdf)

## GSoC 2026 Proposal: JSON Schema to Form UI for APISIX Dashboard [APISIX-39]

### 1. Project Information

- **Project Name:** JSON Schema to Form UI for APISIX Dashboard (APISIX-39)
- **Student Name:** Divyanshu Singh
- **GitHub:** @Divyanshu-s13
- **Email:** divyanshu19122008.v18@gmail.com
- **University:** Rishihood University — B.Tech Computer Science (2nd Year)
- **Timezone:** IST (UTC+5:30)
- **Mentor:** Yuan Bao (baoyuan@apache.org)

---

### 2. Why I Am the Right Candidate

I have been actively contributing to Apache open-source projects for the past 6+ months. My contributions directly relevant to this project:

| Organization | PR | Description | Status |
|---|---|---|---|
| Apache Arrow JS | [PR #373](https://github.com/apache/arrow-js/pull/373) | fix: Resolve TS2352 type error in MapBuilder for TypeScript 5.6+ | ✅ Merged |
| Apache Arrow JS | [PR #377](https://github.com/apache/arrow-js/pull/377) | fix: implement Symbol.hasInstance for cross-library instanceof checks (+640 lines, 10 files) | ✅ Merged |
| OWASP | [PR #163](https://github.com/OWASP/www--site-theme/pull/163) | Fix: Replace document.onload with window.addEventListener in 404 page | ✅ Merged |

I am intimately familiar with the technologies this project requires: **TypeScript, React, JSON Schema, AJV, and Ant Design** — APISIX Dashboard's own stack.

---

### 3. Pre-GSoC Prototype

I have already built a working prototype of the SchemaForm system before submitting this proposal:

🔗 **Prototype:** https://github.com/Divyanshu-s13/apisix-schema-form-prototype

The prototype demonstrates:
- ✅ Core SchemaForm rendering all basic JSON Schema types (string, number, boolean, enum, array, object)
- ✅ `oneOf` branch switching with value clearing (tested with key-auth / jwt-auth / basic-auth schemas)
- ✅ AJV draft-07 validation pipeline with inline error display
- ✅ `widgetMap` registry for extensibility
- ✅ Three real APISIX plugin schemas used as demo: `limit-count`, authentication (`oneOf`), `cors` (array)

---

### 4. Technical Approach

The SchemaForm system will be a self-contained React module using the existing APISIX Dashboard stack:

```
SchemaForm ← Entry point, AJV validation
└── SchemaField ← Dispatcher (routes to correct renderer)
├── PrimitiveField ← string / number / boolean / enum
├── ObjectField ← schema.properties (recursive)
├── ArrayField ← schema.type === 'array'
└── OneOfField ← schema.oneOf (branch switching)
```

Integration flow:
1. User selects a plugin
2. Dashboard fetches schema: `GET /apisix/admin/schema/plugins/{name}`
3. SchemaForm renders the form automatically
4. AJV validates on submit → `PUT /apisix/admin/routes/{id}`

---

### 5. Timeline

| Phase | Weeks | Deliverables |
|---|---|---|
| Community Bonding | 1–3 | Codebase deep-dive, finalize API with mentor |
| Phase 1 | 4–6 | Core renderer (primitive types), unit tests, draft PR |
| Phase 2 | 7–9 | oneOf, dependencies, AJV validation pipeline |
| Phase 3 | 10–12 | Dashboard integration, widgetMap, e2e tests |
| Phase 4 | 13–14 | Developer docs, anyOf stretch goal, final polish |

---

Looking forward to your feedback @Baoyuantop ! Happy to answer any questions or make changes to the proposal based on your input.

[GSoC2026ProposalDivyanshuSingh.pdf](https://github.com/user-attachments/files/26377796/GSoC2026ProposalDivyanshuSingh.pdf)

Start with the proposed SchemaForm entry point and the APISIX Dashboard TypeScript/React stack, then compare the design with the linked prototype. Confirm the plugin schema and update endpoints described in the proposal, and review the planned unit and e2e test scope. Done means the renderer supports the listed schema features, validates with AJV, and integrates into the dashboard.

Written by the indexing model from the issue text.