Getting started

Web IDE and demos

The browser IDE on userland.run is one web component, <nano-terminal>: a shell, file tree, code editor, app catalog, command palette and server preview, all running against a NanoVM in the same tab.

There is no separate IDE application to install. The IDE is the <nano-terminal> element from @userland-run/nano-sdk/terminal, and the demos on this site are built from it and from the SDK's headless API.

What is in the terminal

Panel

What it does

Turn off with

Terminal

an interactive sh -i session on the RISC-V runner

(always on)

Files

browse, create, rename and delete files in the VM's filesystem

no-files

Editor

CodeMirror editor for files in the VM

no-editor

Catalog

search and install signed apps from the catalog

no-catalog

Command palette

keyboard command launcher (⌘K / Ctrl+Shift+K)

no-palette

Preview

an iframe on an HTTP server running in the VM

no-preview

terminal

Open the terminal

Press Run to mount a terminal in this page. It boots its own VM from console.wasm; type into it after the sample command finishes.

html

<nano-terminal
  wasm-url="/nano/console.wasm"
  service-worker-url="/nano-sw.js"
  ram-mb="256"
  style="display:block; height:420px"
></nano-terminal>

Typed after the prompt: echo $((6 * 7)) | tr 0-9 a-j

loading…

Expected output

ec

Demos on this site

Examples gallery: complete apps such as hello-node, json-api, react-studio, photon and boa-sandbox.
Node.js in the browser: Node programs, npm tools and dev servers, client-side.
Feature tours: embeddable terminal, WASI apps, JS sandbox, RISC-V emulator, dev servers.

How the preview works

A server inside the VM listens on a virtual port. The service worker intercepts the preview iframe's requests under /sw/<port>/, the page injects each request into the VM's socket layer and the response travels back to the iframe. The full path is on Virtual server; the API is Serve mode.

Build your own

Embed the same element with one import (see Embedded terminal), or use the same features without UI through createHeadless().

← Previous

Requirements

Overview