Moloko is an embedded web based code editor built atop of Monaco.
Moloko has peer dependencies on mithril.js and Æsthetic. Both these modules need to be installed in order for moloko to be used.
pnpm add moloko
pnpm add mithril esthetic
Moloko is developed for playground usage within Æsthetic and Liquify.
Moloko is running atop of Monaco and thus it requires workers be integrated into a distribution bundle of your project.
Currently Moloko provides support for a single (dark) theme:
- Potion
In addition to Liquid, Moloko also supports several other languages:
- HTML
- Liquid
- XML
- JavaScript
- TypeScript
- CSS
- SCSS
- JSON
- YAML
Moloko leverages the powerful mithril.js SPA framework together with the Æsthetic beautification tool and Monaco text editor.
import moloko from 'moloko';
// Render the editor to a document element
moloko.mount(document.body, options?: Options);
Despite running atop of Monaco, Moloko will spin up its own build and expose it. In order to support the grammars and embedded languages of the Shopify Liquid variation the module employs its own Liquid grammar.
- Ensure pnpm is installed globally
npm i pnpm -g
- Leverage
pnpm env
if you need to align node versions - Clone this repository
git clone https://github.com/panoply/moloko.git
- Run
pnpm i
in the root directory - Run
pnpm dev
and start coding
You can run pnpm build
to generate a distributed bundle.