vanilla.md

title
VanillaJS Usage

VanillaJS Usage

This documentation is best viewed on the documentation site rather than GitHub or NPM package site.

Embed Python Editor

Use {@link vanilla.PythonEditorFrameDriver | PythonEditorFrameDriver} class to create a driverRef for an iframe element. The iframe element src URL can be generated using {@link vanilla.createPythonEditorURL | createPythonEditorURL}.

import {
  PythonEditorFrameDriver,
  PythonProject,
  createPythonEditorURL,
} from '@microbit/python-editor-embed/vanilla';

// Create an iframe element.
const iframe = document.createElement('iframe');
iframe.title = 'PythonEditor';
iframe.allow = 'usb; autoplay; camera; microphone;';
const url = createPythonEditorURL(
  '3', // Version.
  undefined, // Language.
  1, // Controller, where 1 means iframe controller mode.
  undefined // Query params.
);
iframe.src = url;
iframe.width = '100%';
iframe.height = '100%';

document.querySelector<HTMLDivElement>("#app")!.appendChild(iframe);

// Create and initialise an instance of PythonEditorFrameDriver.
const driverRef = new PythonEditorFrameDriver(
  {
    controllerId: 'YOUR APP NAME HERE',
    initialProjects: async () => [pythonProject],
    onWorkspaceSave: (e) => {
      // Set project as project changes in the editor.
      setSavedProject(e.project);
    },
  },
  () => iframe
);
driverRef.initialize();

For more examples, take a look at the Python editor frame demo source code.