Criteria Playground is a free online editor for OpenAPI files that works with the user's file system.

Features:

- File manager: Create and store files directly in the browser, or open and save files from the user's filesystem.

- Editor: syntax highlighting depending on the file type, e.g. JSON, YAML or Markdown.

- Preview: editor displays a live preview that automatically updates as the user edits source code.

- Share: generate a shareable permalink.

- Documentation: automatically generate tri-pane documentation for your API.

- API Explorer: easily make API calls to any endpoint directly from the browser.

- Issues Panel: Detect and resolve issues based on Spectral ruleset.

- Theme: Toggle between light and dark mode.

https://criteria.sh/play

This project involved:

Integrating with browser's Web APIs to open and save files.

Automated testing across multiple browser environments using Playwright.

Integration and customization of Monaco Editor

Integration with Google Cloud Platform for long-term storage of shared projects.

Tech stack:

Next.js

TailwindCSS

Playwright

Monaco

Google Cloud Platform

GitHub Actions

The app contains a split-view editor experience that uses the open-source Monaco editor. The right pane displays a live preview of the document being edited.

Preview documentation for the API directly in the IDE.

Projects that contain a Spectral ruleset are automatically scanned for any issues.