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

Description and use

A live playground was built for OpenEverest that lets plugin developers edit YAML UI schemas, see instant validation and preview, all while respecting the platform’s strict CSP.

Problem

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.

Outcome

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.

Workflow

• 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.

Evidence

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.

Source

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

Source

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

Source