https://github.com/solidjs/solid-playground

Quickly discover what the solid compiler will generate from your JSX template
https://github.com/solidjs/solid-playground

compiler repl solid-js

Last synced: about 2 months ago
JSON representation

Quickly discover what the solid compiler will generate from your JSX template

• Host: GitHub
• URL: https://github.com/solidjs/solid-playground
• Owner: solidjs
• License: mit
• Created: 2020-09-01T21:50:04.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-11T18:54:56.000Z (5 months ago)
• Last Synced: 2024-04-14T01:30:14.381Z (5 months ago)
• Topics: compiler, repl, solid-js
• Language: TypeScript
• Homepage: https://playground.solidjs.com
• Size: 10.8 MB
• Stars: 168
• Watchers: 8
• Forks: 59
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-solid-js - Playground

README

        


  



# Solid Template Explorer

This is the source code of the [solid playground](https://playground.solidjs.com) 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

- UNIVERSAL: The client side generation for universal (custom renderer)

## Getting up and running

This project is built using the [pnpm](https://pnpm.js.org/) package manager.

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

```bash

# 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

```

## Credits / Technologies used

- [solid-js](https://github.com/solidjs/solid/): The view library

- [@babel/standalone](https://babeljs.io/docs/en/babel-standalone): The in-browser compiler. Solid compiler relies on babel

- [monaco](https://microsoft.github.io/monaco-editor/): The in-browser code editor. This is the code editor that powers VS Code

- [Windi CSS](https://windicss.org/): The CSS framework

- [vite](https://vitejs.dev/): The module bundler

- [workbox](https://developers.google.com/web/tools/workbox): The service worker generator

- [pnpm](https://pnpm.js.org/): The package manager

- [lz-string](https://github.com/pieroxy/lz-string): The string compression algorithm used to share REPL