Solid Template Explorer

This is the source code of the solid playground website. Through it you can quickly discover what the solid compiler will generate from your JSX templates.

There are 3 modes available:

DOM: The classic SPA generation mechanism
SSR: The server side generation mechanism
HYDRATION: The client side generation for hydration

Getting up and running

This project is built using the pnpm package manager.

Once you got it up and running you can follow these steps the have a fully working environement:

# Clone the project
$ git clone https://github.com/solidjs/solid-playground

# cd into the project and install the dependencies
$ cd solid-playground && pnpm i

# Start the dev server, the address is available at http://localhost:5173
$ pnpm run dev

# Build the project
$ pnpm run build

⚠️ Firefox doesn't work by default in development (pnpm dev) due to to vite's limitation with web worker. However it still works after build (pnpm build)

To develop on Firefox, ensure that dom.workers.modules.enabled is enabled in about:config

Credits / Technologies used

solid-js: The view library
@babel/standalone: The in-browser compiler. Solid compiler relies on babel
monaco: The in-browser code editor. This is the code editor that powers VS Code
Windi CSS: The CSS framework
vite: The module bundler
workbox: The service worker generator
pnpm: The package manager
lz-string: The string compression algorithm used to share REPL

K-Sato1995/solid-playground

Solid Template Explorer

Getting up and running

Credits / Technologies used