Default Embed configuration

Transform your premium embeds with JDoodle components. From language lists to input/output files, tailor each element to perfection.

JDoodle components are HTML components we created to allow you to customize your premium embeds better. These include language lists, external library lists, input files, output files, etc. You can add only one JDoodle component to the IDE but customize it extensively with the styling settings. You can remove or keep a component, place it anywhere in the IDE, or place it within tabs, flex, or sections. Read this documentation to learn how to add tabs, flex, sections, and other HTML components.

How to add a JDoodle component?

To add a JDoodle component, locate it in the Embed IDE under the HTML components section, select it, and drag it to where you want to place it.

Selecting, moving, and deleting JDoodle components

When you click on the JDoodle element, you’ll see a blue toolbox on its right side. The toolbox has these options:

Select

The first option, marked with an upward arrow icon, is ‘select.’ It selects the JDoodle component you’ve clicked on.

Move

This is the second option in your toolbox. You can drag the JDoodle component to any location when you select to move. You can also place an element inside another component, like a tab, flex, or section, or move it around to place it in another location in the Embed IDE.

Delete

This third option in the blue toolbox lets you delete the JDoodle component. If you want to add the component back to the IDE, you can find it under the JDoodle components and use it again.

Settings

The last option opens JDoodle component styling options, allowing you to customize them.

JDoodle components in Premium Embeds

Language lists, external library lists, input files, and output files are exclusive components only available in premium embeds. All other JDoodle components are available in the basic embeds, but customization options, moving, and deleting are only available in premium embeds. You can also return to default settings while styling by clicking on the cross icon after selecting custom values. Here’s the list of JDoodle components you can customize in premium Embeds:

Language list adds the lists of languages you’ve added while setting up your premium Embed. Since you can add multiple languages in premium Embeds, this list allows your user to select a language.

Version list

You can select the language version you want for each language you select from the list of versions available for each language. You can find all the languages and versions supported by our Embeds here.

Input Files

Input Files supply data to your program for processing during execution. It has two elements: upload file area, where you and the user (if you allow it) can upload files, and a file manager that shows the list of files uploaded. In addition to general styling options, you can allow or disallow users to upload files through the styling settings of input files.

Output Files

Output Files are where your program stores its results after processing input data.

Editor font size

Editor font size lets your users select the font size they want while writing code in the code editor. The default font size is 12 px, but your users can set any font size between 11 and 25 px. You can change the default editor size in the editor font size settings.

Input Arguments

Input arguments specify parameters that are passed to your program when it runs. In the input argument style settings, you can set a default value for input arguments. Besides the general styling settings, you can set the number of lines in the input argument component. By default, the number of lines is 2, and you can set it to any number starting from 1.

Interactive toggle

The interactive toggle allows you to switch between interactive and non-interactive execution modes. By default, it is off, but you can change the default settings by going to the styling settings of the interactive toggle.

STDIN input

STDIN input lets you feed input directly into your program during execution. You can set default values in the STDIN input styling settings.

Execution matrices

Execution matrices display detailed performance metrics such as execution time and memory usage for your code.

External library

You can add external libraries to your premium Embed IDE and let your users add and modify them. By default, you will have a bar to add the external library, which will show the added external libraries. If you disallow your users to add libraries, the list of libraries you add will show for each language. Note: Currently, we support adding external libraries for 23 languages. You’ll get a message saying that other languages don’t support external libraries. Here’s the list of languages we support.

Java
C++
C++ 14
C++ 17
C#
C
Bash shell
VB.net
Typescript
Swift
Scala
Ruby
R language
Python 3
Python 2
Perl
PHP
Lua
Node JS
Kotlin
Groovy
Dart
C-99

Besides general styling options, you can allow users to modify external libraries. If you allow your users to modify, they can also add external libraries. By default, your users can modify, but you can disallow them from modifying and let them use external libraries from the list you add.

Code editor

This is where you and your users type code snippets. Besides general styling options, here are some styling options for the code editor:

Themes

You can set the code editor theme for every language you add. Here’s the list of themes we support:

X Code
Chrome
Crimson Editor
Text Mate
Chaos
Dracula
Gruvbox
Tomorrow Night

Line number

You can choose to show or hide the line number in the chode editor. By default, the line numbers are shown.

Auto completion

This feature automatically suggests code as you type, like curly braces. You can set the auto-completion to on or off. By default, auto-completion is off.

Auto-grow

Auto-grow means the code editor expands automatically to accommodate more content as it’s entered. By default, it is fixed, but you can change it to grow.

Default font size

You can set the default font size for the code in the code editor. You can choose any size between 11 px to 25 px.

Execute button

Margin and padding

You can adjust the space around the button with margin and padding. Margins and tabs have four options: top, right, bottom, and left. You can enter a size in px, %, em, rem, vh, and vw. Using the up and down arrows, you can also increase or decrease the size.

Border radius

Border radius adjusts the roundness of the execute button corners. You can customize each top left, top right, bottom left, and bottom right in px, %, em, rem, vh, and vw to match your design preferences. Using the up and down arrows, you can also increase or decrease the size.

Background Color

You can set any background color to the button from the color palette.

Border

Border defines the outline of the execute button, setting its style, width, and color.

Width by entering a number in px, %, em, rem, vh, and vw and using the arrows to increase or decrease the size.
Style by selecting one of these options: solid, dotted, ridge, dash, double, groove, inset, and outset.
Color by picking any color of your choice from the palette.

Output

The output box displays the results or responses generated by the program after execution.

Auto grow

Auto-grow means the output box expands automatically to accommodate more content as it’s entered. By default, it is fixed, but you can change it to grow.

General styling options for JDoodle components

Here’s the list of styling options for the language list, version list, editor font size, input arguments, interactive toggle, STDIN input, execution matrices, and output files:

Hide title

Hide title lets you hide the title and only display the component function. By default, the option to show the title is selected.

Title Name

You can change the default title to anything you want. For example, in the language list, instead of ‘Select Language,’ you can put a different text such as’ Let’s pick a language, ’ ’ Set a language, ’ ’ Code in a language you choose, ’ or anything else you want.

Display

You can choose to display the component in the same row as the text or the same column as the text.

Width and Height

You can set a custom width and height for the JDoodle component by entering a size in px, %, em, rem, vh, and vw. You can increase or decrease the size using the up and down arrows.

Font size and letter spacing

You can set any font size and letter spacing in px, %, em, rem, vh, and vw and use the arrows to adjust the values. By default, the font size is medium, and the letter spacing and line height are normal.

Font family

You can change the font type of the text in the JDoodle components. By default, the font family selected is Arial. Here’s the list of supported font types:

Arial
Arial Black
Brush Script MT
Comic Sans MS
Courier New
Georgia
Helvetica
Impact
Lucida Sans Unicode
Tahoma
Times New Roman
Trebuchet MS
Verdana

Color

You can choose any color for the text from the color palette.

General Embed configurations

Here are some general configurations you can set for your premium Embed:

Manage Default Programs

You can add a default program in every language you’ve added for your premium Embed. The code you add here will be displayed in the code editor. If you wish to have more languages, return to the setup and add the languages you need. Then, come back to manage default programs and add the code for the languages you’ve added by selecting them.

Manage Default Libraries

You can add default external libraries for the languages you’ve added, and for the languages we support for adding external libraries. We currently don’t check the external libraries you add, so ensure that the link you’ve added is correct. Note: Currently, we support adding external libraries for 23 languages. You’ll get a message saying that other languages don’t support external libraries.

Manage Input Files

You can add default input files that will automatically load into the IDE environment when your users use the premium Embed IDE.

Default STDIN Inputs

You can set standard input defaults that the program in the code editor will use during execution.

Default Input Arguments

You can predefine arguments that will be automatically passed to the program in the code editor when they run.

Default Execution Mode

Configure the default execution mode in which your code executes to interactive or non-interactive.

Default Font Size

You can set the default font size for the text in the code editor. You can choose any size between 11 px and 25 px.

Need support?

Didn’t find the answer to your query?
Spotted a bug?
Looking for something else?

If you have any questions, please contact us by filling out this form. You can also join our Discord community and post your questions there.

Previous Topic ← Customizing with HTML components

Next Topic Host-Embed communication →