Multi-Framework Playground

This is a playground project built with Astro, supporting Vue, React, Solid, and Svelte.

Features

• Multi-Framework Support: Switch between Vue, React, Solid, and Svelte.
• CDN-based: All framework dependencies are loaded via CDN in the preview iframe, ensuring isolation and lightweight initial load.
• Monaco Editor: Integrated code editor with syntax highlighting.
• Live Preview: Code is compiled (if necessary) and executed in the browser.

How it works

1. Shell: The main application is built with Astro and React (for the Playground component).
2. Editor: Monaco Editor is used for code input.
3. Preview: An iframe is used to render the user's code.
4. Compilation:
   • React: Uses @babel/standalone in the iframe to compile JSX.
   • Vue: Uses vue.global.js (Runtime + Compiler) to compile templates on the fly.
   • Solid: Uses solid-js/html (Tagged Template Literals) to avoid complex in-browser JSX compilation for this demo.
   • Svelte: Uses svelte/compiler from CDN to compile Svelte components in the browser.

Running the project

pnpm install
pnpm dev

Deployment

Vercel is connected to this repository and deploys the next branch to production. It builds the site with pnpm build and serves the generated dist/ directory.

Notes

• SolidJS: Uses html tagged templates for simplicity in the CDN environment.
• Svelte: Uses the Svelte 4 compiler from CDN.