🥛 A web based code editor built atop of Monaco powered by Mithril.js and Æsthetic
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:
In addition to Liquid, Moloko also supports several other languages:
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.
npm i pnpm -g
pnpm env
if you need to align node versionsgit clone https://github.com/panoply/moloko.git
pnpm i
in the root directorypnpm dev
and start codingYou can run pnpm build
to generate a distributed bundle.