Code editor

We're using Monaco editor which is the code editor that powers the popular IDE VS Code. This means we get a lot of amazing features for free.

Screenshot of the code editor

To further enhance the developer experience (DX), LOOOP is handling all the bundling on the client. This avoids the need for a server which means it should be pretty snappy, depending on the size of your project and the size of your CPU 😬

As all the magic is happening locally within the browser and to promote simplicity where possible, we've decided to keep things as native as possible. By this we mean we're not transpiling any code, so the code that gets written must be supported by the browser that you're using. These days this shouldn't be an issue, but depending on your browser some EcmaScript features may not be supported, so we recommend using a modern browser. Anything except Safari should do 😉

External modules

Again to keep things simple you will need to import external modules from a CDN, and we highly recommend Skypack.

import { TimelineLoop } from 'https://cdn.skypack.dev/looop.js';

Linting

We currently have basic linting configured behind the scenes, but we plan at some point to expose this so each project can configure this themselves.

Errors

As well as the built in intellisense that Monaco editor provides, we're also catching runtime errors and passing those to the editor so you instantly know when somethings wrong. These will display on the current file that you're editing, but we're working to highlight these across all files so you can see when a change you've made to the current file breaks something in another file.