Rollinn Studio

A standalone JavaScript editor + execution UI. Engine-agnostic by design: you can connect any JS engine/library or even the browser's native eval with a small adapter.

Install

npm i rollinn-studio

Run Locally

npx http-server node_modules/rollinn-studio/dist -p 3000 -o

Use In Your App Copy node_modules/rollinn-studio/dist into your static assets folder and serve index.html.

Connect Any Engine (Adapter API)

Provide a global adapter before loading app.js:

<script>
  window.RollinnEditorAdapter = {
    name: 'MyEngine',
    createEngine() {
      return new MyEngine({ /* options */ });
    },
    async run(source, engine) {
      const output = await engine.execute(source);
      return {
        success: true,
        result: undefined,
        output: [{ type: 'log', text: output }],
        error: null,
        pipeline: null
      };
    },
    tokenize(source, engine) { return engine.tokenize?.(source) || []; },
    parse(source, engine) { return engine.parse?.(source) || null; },
    disassemble(source, engine) { return engine.disassemble?.(source) || ''; },
    reset(engine) { engine.reset?.(); },
    capabilities: { tokens: true, ast: true, bytecode: false, pipeline: false }
  };
</script>
<script type="module" src="app.js"></script>

You can also connect later:

window.RollinnEditorAPI.connect(myAdapter);

Public API (Directly Accessible)

All methods are on window.RollinnEditorAPI.

Methods

• connect(adapter) — Attach an engine adapter (see adapter API below).
• getEngine() — Return the current engine instance (if any).
• getAdapter() — Return the current adapter (if any).
• getCode() — Get the current editor text.
• setCode(code) — Replace the editor text and refresh UI.

Examples

Get / set editor code:

const code = window.RollinnStudioAPI.getCode();
window.RollinnStudioAPI.setCode(code + '\nconsole.log("Appended")');

Attach an adapter later:

import { MyEngine } from './my-engine.js';

const adapter = {
  name: 'MyEngine',
  createEngine() {
    return new MyEngine();
  },
  async run(source, engine) {
    const output = await engine.execute(source);
    return {
      success: true,
      result: undefined,
      output: [{ type: 'log', text: output }],
      error: null,
      pipeline: null
    };
  },
  reset(engine) { engine.reset?.(); }
};

window.RollinnStudioAPI.connect(adapter);

Read the current engine instance:

const engine = window.RollinnStudioAPI.getEngine();
console.log(engine);

Required result shape

{
  success: boolean,
  result: any,
  output: Array<{ type: string, text: string }>,
  error: string | null,
  pipeline: object | null
}

Adapter Interface (Full)

All fields are optional. Only run() is required for execution.

{
  name: 'MyEngine',
  createEngine(options) { return new MyEngine(options); },
  async run(source, engine) { /* must return result shape */ },
  tokenize(source, engine) { /* optional */ },
  parse(source, engine) { /* optional */ },
  disassemble(source, engine) { /* optional */ },
  reset(engine) { /* optional */ },
  capabilities: {
    tokens: true,
    ast: true,
    bytecode: false,
    pipeline: false
  }
}

Optional: Rollinn Engine Bundle

If rollinn.js exists during build, the package also outputs:

• dist/rollinn.js
• dist/index.rollinn.html (pre-wired to Rollinn)

Open index.rollinn.html to run the editor with Rollinn automatically.

Repo Build

1. Optional: Build engine bundle: npm run build (repo root)
2. cd rollinn-editor (folder name in repo)
3. npm run build