Building a Live UI Schema Playground for OpenEverest (LFX Mentorship 2026)

说明与用途

为 OpenEverest 构建了一个实时 UI 模式 playground，允许插件开发者即时编辑 YAML 模式并预览表单，同时遵守严格的 CSP。

问题

Plugin developers needed a fast feedback loop to test UI schemas for database providers without deploying to a cluster, but strict CSP prevented using editors like Monaco.

结果

The playground reduced the feedback loop from a cluster deploy to a few keystrokes, enabling instant validation and preview while respecting OpenEverest’s strict CSP.

工作流

• 1. Open /plugin‑developer page.
• 2. Edit YAML in CodeMirror 6 editor with syntax highlighting and lint gutter.
• 3. Editor validates YAML syntax and schema structure, showing errors inline.
• 4. When schema is valid, UIGenerator renders a live preview with stepper and topology picker.
• 5. API data for fields (e.g., storage classes) loads once a namespace is selected.
• 6. Editor and preview are displayed in a resizable split pane.

证据

The only way to see what a schema rendered was to put it in a Provider object and deploy it to a running cluster, and every typo meant another deploy.

来源

Monaco loads its scripts from a CDN and needs unsafe‑eval, so the browser blocks it.

来源

The playground lives at /plugin-developer. It has a YAML editor, real‑time validation, live preview, live API data, and a resizable split pane.

来源