Logo

Host-Embed communication

JDoodle Premium Embeds use JavaScript to communicate between a host page and an embedded IDE.

JDoodle Premium Embeds use JavaScript to enable communication between a host page and a JDoodle embedded IDE. Use this to write your own custom testing logic, save your users’ code, or manipulate the embedded IDE to fit your needs. Some of the most-used features are: Get code - get the code the user wrote in JDoodle Set code - set boilerplate or starting code for the user to see Get output - get the output of the user’s code to store or compare against expected values Set STDIN / Input arguments - set the inputs to test the user’s code Below are the main features and how to implement them using vanilla JavaScript. To use these, you will need to set up a Premium Embed and replace [your-embed-code] with the unique identifier for your Embed. Premium Embeds are a paid feature: you will need a Pro plan or greater.

Host to Embed settings

Get code

The “Get code” feature allows the host application to retrieve the current script from the JDoodle code editor.

  1. Send a getCode message from the host application to the plugin.
  2. In this example, the plugin retrieves the code and outputs to the browser console.

Example code Get Code ---

Set code

The “Set Code” feature allows the host application to update the script in the JDoodle code editor.

  1. In this example a simple input form is added to the page
  2. You can use the setCode function to set code from the host application to the plugin.
  3. The plugin updates the code editor with the provided script.

Example code Set Code ---

Adding multiline code to embed

To add multiline code to a JDoodle embed, you can use the setCode() function and JSON.stringify to ensure the code is properly formatted. Below is an example of how to implement this: Set Code ---

Clear Code Editor The “Clear Code Editor” feature allows the host application to clear the code from the JDoodle plugin’s code editor.

  1. Send a clearCodeEditor message from the host application to the plugin.
  2. The plugin listens for the event and clears the code editor.

Example code Clear Code Editor ---

Execute

The “Execute” feature allows the host application to trigger code execution within the JDoodle plugin.

  1. Send an execute message from the host application to the plugin.
  2. The plugin executes the code in the editor.

Example code Execute Code ---

Stop Execution

The “Stop Execution” feature allows the host application to stop the current code execution in the JDoodle plugin. This may be useful for custom timeouts or to allow your user to stop executing code.

  1. Send a stopExecute message to the plugin from the host application.
  2. The plugin listens for the event, stops the code execution, and resets execution details if the code runs.

Example code Stop Execute Code ---

Get language list

The “Get Language List” feature enables the host application to retrieve a list of all available programming languages supported by the JDoodle plugin.

  1. Send a getLanguageList message from the host application to the plugin.
  2. The plugin returns the list of available languages, in this example to the browser console.

Example code Get language List ---

Set language

The “Set Language” feature allows the host application to change the programming language of the JDoodle plugin.

  1. Send a setLanguage message and the language code from the host application to the plugin.
  2. The plugin updates the code editor to the specified language.

Example code Set Language ---

Get Version List

The “Get Version List” feature enables the host application to fetch a list of all available versions for the selected programming language.

  1. Send a getVersionList message to the embed IDE from the host application.
  2. The plugin returns the list of available language versions.

Example code Get version List ---

Set version

The “Set Version” feature allows the host application to change the language version of the JDoodle plugin.

  1. Send a setVersion message and the version index from the host application to the plugin.
  2. The plugin updates the code editor to the specified language version.

Example code Set Version ---

Get Interactive Mode

The “Get Interactive Mode” feature allows the host application to check if the JDoodle plugin is currently in interactive mode.

  1. Send a getInteractiveMode message from the host application to the plugin.
  2. The plugin responds with the current interactive mode status.

Example code Get Interactive Mode ---

Set interactive mode

The “Set Interactive Mode” feature allows the host application to toggle the interactive mode of the JDoodle plugin.

  1. Send a setInteractiveMode message and the status (True or False) from the host application to the plugin.
  2. The plugin updates its interactive mode accordingly.

Example code Interactive Mode

Get STDIN

The “Get STDIN” feature enables the host application to retrieve the standard input (stdin) data currently set in the JDoodle plugin.

  1. Send a getStdin message from the host application to the plugin.
  2. The plugin responds with the current stdin data.

Example code Get Stdin Inputs ---

Set STDIN inputs

The “Set STDINInputs” feature allows the host application to set standard input (stdin) data for the JDoodle plugin.

  1. Send a setStdinInput message and the stdin data from the host application to the plugin.
  2. The plugin updates the stdin inputs accordingly.

Example code Set Stdin Inputs ---

Get Input Arguments

The “Get Input Arguments” feature allows the host application to retrieve the input arguments currently set in the JDoodle plugin.

  1. Send a getInputArgs message from the host application to the plugin.
  2. The plugin responds with the current input arguments, in this example to the browser console.

Example code Get Input Args ---

Set input arguments

The “Set Input Arguments” feature enables the host application to set input arguments for the JDoodle plugin.

  1. Send a setInputArgs message and the arguments from the host application to the plugin.
  2. The plugin updates the input arguments accordingly.

Example code Set Input Arguments ---

Get Output

The “Get Output” feature enables the host application to retrieve the output generated by the JDoodle plugin after executing the code.

  1. Send a getOutput message from the host application to the plugin.
  2. The plugin responds with the output data, in this example to the browser console.

Example code Get Output ---

Clear output editor

The “Clear Output Editor” feature allows the host application to clear the output from the JDoodle plugin’s output editor.

  1. Send a clearOutputEditor message from the host application to the plugin.
  2. The plugin listens for the event and clears the output editor.

Example code Clear Output Editor ---

Post to JDoodle

The “Post to JDoodle” feature allows the host application to redirect the user to the JDoodle website’s online IDE, with the user’s current program, language, and version loaded. This could be useful if users are working on a code snippet, and you want to allow them the option to save their work in JDoodle or work in a more fully-featured IDE.

  1. Send a postToJDoodle message from the host application to the plugin.
  2. The browser opens a new tab with the JDoodle online IDE, loading the current work.

Example code Post To JDoodle ---

Embed to host settings

Receive code updates when program is changed by user

This feature allows the host application to receive the updated code from the JDoodle IDE whenever the user changes the code editor.

  • Use the button to call the enableOnCodeEditorUpdate function.
  • Add an event listener for the message event to capture updates from the JDoodle embed.
  • Check if the event.origin matches JDoodle’s URL and logs the updated script when received.
  • In this example it logs changes to the browser console.

Example code Enable OnCodeEditorUpdate ---

Receive Output When Program is Executed

This feature allows the host application to receive the output result from the JDoodle IDE after the code execution is completed.

  • Use the button to call the enableOnExecuteComplete function.
  • Add an event listener for the message event to capture results from the JDoodle embed.
  • Check if the event.origin matches JDoodle’s URL and log the execution result when received.
  • In this example it logs the outputs to the browser console.

Example code Enable OnExecuteComplete ---

Previous Topic ← Default Embed configuration
Next Topic Premium Embeds →