Live editor is a web app that renders webpages in real-time(sort of). It's basically CodePen with less features.
- HTML
- CSS
- Sass
- JavaScript
- Typescript
CodeMirror is doing the heavy lifting, code editing, syntax highlighting, etc.
- Clone this repo
- If you have docker insalled run the command
docker compose up -d
in your terminal
- Make a duplicate copy of the
.env.example
file in theweb
folder, save the duplicate as.env
- Provide a value for the environment variable
VITE_API
. This is the url of the backend, assuming you didn't change the port it should be running onlocalhost:8000
. - The api requires the environment variable
API
to be set, you can do this by runningexport API="localhost:8000"
. This should be the url where the backend is running on. - Run
npm run dev
from theweb
folder to get the frontend running - Run
go run main.go
from theapi
folder to get the backend running
- Refreshing the page after writing Sass will return the compiled sass
- Refreshing the page after writing Ts will return the compiled typescript
- Resizing on the y axis downwards is janky, I've narrowed this down to the iframe used to render web pages.
Curiosity, Boredom.