Elysia Playground – Frontend Demos

React SPA · Mantine UI

Classic React single‑page app using Mantine, Clerk, and client‑side routing.

SPA

Stack React · Vite · Mantine UX Dashboard‑style, rich components

SvelteKit app · file‑based routing

SvelteKit front‑end with server‑side rendering and island hydration.

SSR

Stack Svelte · SvelteKit Routing File‑based, server + client

HTMX pages · progressive enhancement

Server‑rendered HTML with HTMX for interactive, hypermedia‑driven UX.

HTML‑first

Stack HTMX · Tailwind (or utility CSS) Model server‑rendered, small sprinkle of JS

jQuery showcase · code expander

Five interactive UI demos — each with an expandable code panel showing the exact jQuery running on the page.

Showcase

Stack jQuery · Prism.js · Tailwind Pattern code expander, slideToggle

Vanilla JS · zero frameworks

Pure HTML, CSS & JavaScript – no build step, no dependencies beyond Clerk.

No‑framework

Stack HTML · CSS · ES modules Model client‑side fetch, zero build

HTML5 · native browser power

Nine interactive demos of native HTML5 features that replace common JS libraries and patterns.

Showcase

Stack Pure HTML5 · zero dependencies Features dialog, validation, drag & drop

Angular · standalone components

Angular SPA with signals, standalone components, and Clerk auth.

SPA

Stack Angular · Signals · Router UX Component‑driven, typed

Vue 3 · composition API

Vue 3 SPA with Composition API, Vue Router, and Clerk auth.

SPA

Stack Vue 3 · Vue Router · Tailwind UX Composition API, <script setup>

All Frameworks · side-by-side

View every framework in one page and compare code approaches side by side.

Compare

View All 8 frameworks in iframes Feature Code comparison mode