Most of the supported languages and formats that build on top of javascript will require a
default export so that the renderer knows what to call. But for non-javascript formats where
there are no exports, this detail doesn't matter (such as when authoring
mermaid
documents).
When using the keyboard, the
TAB
key will indent code, or dedent (via
SHIFT+TAB), as you may be used to in normal out-of-browser editors. In
order to tab-out of the editor, you'll need to press the
ESCAPE
key first. When tabbing out of the editor, focus will hit the resize handle to change the size
of the editor and output pane.
In javascript-like languages and formats (or that have a javascript-like section of their
format), may import from anywhere. This includes NPM, CDNs, etc. Bare specifiers, such as in
import { ... } from 'package-name';
will reach out to NPM to download the tarball using the
latest
tag and extract its contents. This behavior can be changed by adding more to the import path.
import { ... } from 'package-name@beta'
to request the beta version
import { ... } from '[email protected]'
to request a specific version
import { ... } from 'package-name/sub-path'
to request a particular sub-path of the package. This is resolved via first downloading the
package, and then referencing the
sub-path exports
import { ... } from '[email protected]/sub-path'
to request a particular sub-path of the package at a specific version
import { ... } from 'https://domain.com/any-path'
to request a module from another server. Any URL is supported. If you find something that
doesn't work, please
open an issue
import { ... } from 'https://esm.sh/[email protected]/client'
to request a module from
esm.sh
. Any of esm.sh's URLs and query
parameters are supported. If you find something that doesn't work, please
open an issue
import { ... } from 'https://unpkg.com/[email protected]/build/three.module.min.js'
to request a module from
unpkg
. Any of unpkg's URLs and query
parameters are supported. If you find something that doesn't work, please
open an issue
try it now
The markdown support here uses the
unified
ecosystem's
remark
and
rehype
. By default, it
uses
GitHub-flavored Markdown
as well as header-auto-linking. Docs for GitHub-flavored Markdown
can be found here
. Code fences can be extracted and rendered as live-demo
regions via using the
live
metadata on a codefence (if required by the language -- which is currently all of them except
mermaid). Example:
for gjs
```gjs live
<template>
code
</template>
```
for mermaid
```mermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
```
try it now
Mermaid
is a diagramming and charting tool. It supports a vast variety of different chart types is a
very useful tool for aiding in bringing visualizations to markdown-based documentation.
try it now
.svelte
is the standard component file format for
svelte
. It should function exactly as
you'd be used to in your local svelte projects. As far as REPLs go though, the
.svelte
syntax is limited to only one component per file. So more complex usage of Svelte will be
limited until multi-file support is added to this REPL.
try it now
.vue
is the standard component file format for
vue
. It should function exactly as
you'd be used to in your local vue projects. As far as REPLs go though, the
.vue
syntax is limited to only one component per file. So more complex usage of Vue will be limited
until multi-file support is added to this REPL.
try it now
.jsx
is the stand component file format for
react
. It should function exactly as
you'd be used to in your local react projects. In particular,
try it now
.hbs
is a legacy format of Ember, and is not used in new projects. This version of
.hbs
is not exactly that legacy version, but is more a the "template region" of modern ember
components -- in that all referenced invokables are strictly defined (hard-coded as far as the
REPL is concerned). This mode somewhat acts like
HTML, but with extra dynamic capabilities. The invokables that are in scope for
.hbs
in this REPL are:
try it now
glimdown or
gmd
is the glimmer-flavored-markdown language format for aiding in creating documentation with
highlighted and interactive code blocks.
It differs from markdown in that it supports some light
{{ }}
regions within the markdown space, without needing to create a code fence.
When in glimdown mode, code fences can be used to live-render components via metadata tags as
well as render the code snippet the live code comes from.
```{language} {...metadata}
code
```
live
-
renders in place
live preview
-
renders in place, placing the source after the live render
live preview below
-
renders in place, placing the live render below the source
All supported languages and formats can be used in the codefence blocks. Example for live gjs
```gjs live
<template>
code
</template>
```
Example for live mermaid
```mermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
```
Mermaid has an implicit "live" metadata.
For any issues / questions, please file an
issue here
.