https://github.com/ikeohachidi/live-editor

Edit html, css, sass, javascript, typescript and see changes in realtime, like codepen, jsbin, etc.
https://github.com/ikeohachidi/live-editor

Last synced: 24 days ago
JSON representation

Edit html, css, sass, javascript, typescript and see changes in realtime, like codepen, jsbin, etc.

• Host: GitHub
• URL: https://github.com/ikeohachidi/live-editor
• Owner: ikeohachidi
• Created: 2024-03-23T19:47:35.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-05-17T22:47:44.000Z (7 months ago)
• Last Synced: 2024-05-17T23:21:33.399Z (7 months ago)
• Language: Vue
• Homepage: https://live-editor.ikeoha.xyz
• Size: 288 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### Live Editor

Live editor is a web app that renders webpages in real-time(sort of). It's basically CodePen with less features.

### Supported Languages

- HTML

- CSS

- Sass

- JavaScript

- Typescript

[CodeMirror](https://codemirror.net/docs/guide/) is doing the heavy lifting, code editing, syntax highlighting, etc.

### How to run

- Clone this repo

#### With docker

- If you have docker insalled run the command `docker compose up -d` in your terminal

#### Without docker

- Make a duplicate copy of the `.env.example` file in the `web` 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 on `localhost:8000`.

- The api requires the environment variable `API` to be set, you can do this by running `export API="localhost:8000"`. This

should be the url where the backend is running on.

- Run `npm run dev` from the `web` folder to get the frontend running

- Run `go run main.go` from the `api` folder to get the backend running

### Known issues

- 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.

#### Why

Curiosity, Boredom.