Logo

Customizing with HTML components

Explore our comprehensive guide to customizing premium embeds with HTML drag-and-drop components

This documentation will cover customizing premium embeds with our HTML drag-and-drop components, shifting the components, resizing them, and deleting them so you can design your embed IDE. Our drag-and-drop components and other customization features include:

  • HTML components like tabs, flex, headers, image, and text,
  • JDoodle components like input and output files, language lists, external libraries, and
  • General configuration settings like adding default programs, libraries, input, font size, and execution mode.

Read this documentation to learn more about adding default libraries, programs, input, font size, etc. Note: The customization options below apply to both premium and ultra embeds. With a free JDoodle account, you can customize one premium embed. You can choose a subscription that suits you best to get more premium embeds. HTML components are basic elements that structure and style your embeds, ensuring they function well and match your platform’s design. You can add, style, move, and delete unlimited components. There’s no limitation to adding and styling HTML components.

How to add an HTML component?

To add any HTML 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 other HTML components

When you click on the HTML element, you’ll see a blue toolbox on the component’s right-hand side when you click on it. The blue toolbox has these options:

Select

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

Move

This is the second option in your toolbox. You can drag the HTML component to any location when you select to move. You can 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 HTML component.

Settings

The last option opens HTML component styling options.

What are the HTML components you can use?

Here’s an in-depth look at HTML components:

Tabs

Tabs allow your users to switch between different areas in your IDE embeds. You can have multiple tabs in one area, rename the tabs, add multiple components like the code editor and the output box, and add multiple components under one tab, such as images and headers, and change the size and color of the tabs. By default, when you drag and drop the tab element, three tabs and sample text get added. You can rename the tabs, delete or add more tabs, delete the text, add other elements, etc. It has two elements: Tab banner This area with the tab name lets you switch between other tabs when clicking. It can also have other HTML components like headers, flex, images, and so on, and you can add other components like language lists and a code editor. You can also change the size, margins, color, padding, and border. However, we advise keeping this area simple and adding components within the tab content. Tab content This area allows you to add multiple components and customize the size and color.

Renaming text in tab banner

To rename the tab banner, click on the text and start typing the new name you need. You can also move or delete the text element by clicking on the options in the blue toolbox that appears when you select it.

Duplicating tabs from tab banner

This is the third option in the toolbox that pops up only when you select the tab banner and lets you add duplicate tabs within the tab component. All the tab banner components, including the text, images, etc., are duplicated. However, the tab content isn’t duplicated.

Tab settings

This is the last option in the blue toolbox. When you click on this option, a list of style settings appears on the left-hand side. You can customize the component with these style options and return to the default settings by clicking the cross button beside the options. Here are the style customization options in both tab banner and tab content:

Width and height

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

Margin and padding

You can adjust the space around tabs 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.

Background color

You can select any color from the color palette for your tab banner and tab content.

Border radius

Border radius adjusts the roundness of an element’s 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.

Border

Border defines the outline of your tab banner and content, 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.

Box shadow

Box shadow adds a shadow around your tab banner and content to create depth or highlight it. Customizing these elements allows you to add multiple shadow designs to your tab banners: For x,y, blur, and spread, you can enter the measurements in px, %, em, rem, vh, and vw and use the arrows to adjust the values.

  • X and Y: X is the horizontal offset, whereas Y is the vertical offset.
  • Blur: Blur determines how fuzzy your shadow is.
  • Spread: Spread determines how far the shadow extends beyond the tab banner.
  • Color: You can choose any color from the color palette.
  • Type: You can choose whether the design is inside or outside the tab banner.

Text customization in the tab banner

You can also customize the text inside the tab banners with these elements:

Font family

You can change the font type of the text inside the tab banner. 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

Font size, letter spacing, and line height

You can set any font size, letter spacing, and line height measurement 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 weight

By default, the font weight is normal. You can change the font weight to any of the following options:

  • Thin
  • Extra-light
  • Light
  • Normal
  • Medium
  • Semi-bold
  • Bold
  • Extra-bold
  • Ultra-bold

Text align

You can align the text to left, center, right, and justify.

Font color

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

Flex

Flex containers create flexible and responsive layouts, ensuring your embeds look great on any device. You can add multiple components to a Flex, including the output box and the code editor, or place the Flex inside a tab.

Flex styling settings

To view flex styling settings, select the flex you want to add customization and click the settings icon when the blue toolbox appears. This will open a list of styling options on the left-hand side of your Embed. Here’s the list of options you can use to style your flex.

Width and height

Width specifies the horizontal dimension of the flex container, whereas height sets its vertical dimension. You can set height and width values in px, %, em, rem, vh, and vw and use the arrows to adjust them. By default, the width is 100%, and the height is 100 px.

Direction

Direction determines the primary axis along which flex items are laid out (horizontally or vertically). By default, the direction is set to row. You can set the direction to

  • Row: Lays out flex items horizontally from left to right,
  • Row reverse: Lays out flex items horizontally from right to left,
  • Column: Lays out flex items vertically from top to bottom, and
  • Column reverse: Lays out flex items vertically from bottom to top.

Justify

Justify aligns the flex items along the container’s main axis. By default, flex items align at the start. Here are some options for setting justify:

  • Start: Align items to the start of the container’s main axis.
  • End: Aligns items to the end of the container’s main axis.
  • Center: Centers items along the container’s main axis.
  • Space Between: Distributes items evenly, with the first item at the start and the last item at the end.
  • Space Around: Distribute items evenly with equal space around each item.
  • Space Evenly: Distributes items evenly with equal space between them.

Align items

Align Items positions flex items along the cross axis perpendicular to the main axis. The default setting of aligning items in flex is stretch. Here are the options for setting align-items:

  • Start: Align items to the start of the cross-axis.
  • End: Align items to the end of the cross-axis.
  • Center: Centers items along the cross-axis.
  • Baseline: Aligns items along their baseline, the line upon which most letters sit.
  • Stretch: Stretches items to fill the container along the cross-axis.

Align content

Align Content positions flex lines within the flex container when extra space is on the cross-axis. The default setting for aligning content is stretch. Here are the options for setting align content:

  • Start: Positions lines at the start of the cross-axis.
  • End: Positions lines at the end of the cross-axis.
  • Center: Centers lines along the cross-axis.
  • Space Around: Distributes lines with equal space around each line.
  • Space Between: Distributes lines evenly, with the first line at the start and the last line at the end.
  • Stretch: Stretches lines to fill the container along the cross-axis.

Wrap

Wrap controls whether flex items are laid out on a single line or can be wrapped onto multiple lines to avoid squeezing. The default setting for wrap is no wrap. Here are the wrap options you can set:

  • No Wrap: Keeps all items on a single line regardless of space availability.
  • Wrap: Allows items to wrap onto multiple lines if additional space is needed.
  • Wrap Reverse: Allows items to wrap onto multiple lines in reverse order, affecting the direction of the cross-axis stacking.

Flow

Flow is a shorthand property that combines ‘flex-direction’ and ‘flex-wrap’ to define the container’s layout direction and wrapping behavior. The default setting is row no wrap. Here are the options for setting flow:

  • Row No Wrap: Lays out items in a horizontal row without wrapping.
  • Row Wrap: Lays out items in a horizontal row and allows them to wrap onto multiple lines.
  • Row Wrap Reverse: Lays out items in a horizontal row, allows wrapping, and reverses the order of the lines.
  • Column No Wrap: Lays out items in a vertical column without wrapping.
  • Column Wrap: Lays out items in a vertical column and allows them to wrap onto multiple lines.
  • Column Wrap Reverse: Lays out items in a vertical column, allows wrapping, and reverses the order of the lines.

Section

Sections divide content into distinct areas, making it easier for users to digest information. You can add multiple elements to your sections, including tabs, flex, code editor, etc. You can also place the section component inside a tab or flex.

Section styling settings

To view section styling settings, select the section you want to add customization and click the settings icon when the blue toolbox appears. This will open a list of styling options on the left-hand side of your Embed. Here’s the list of options you can use to style your section.

Width and height

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

Margin and padding

You can adjust the space around the section 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.

Background color

You can select any color from the color palette for your section

Background

You can customize the section area with a background by adding an image and styling it for position, repetitions, size, and attachment.

  • Repeat controls how the background image repeats within an element.
    • Repeat: The image repeats both horizontally and vertically.
    • Repeat-x: The image repeats horizontally only.
    • Repeat-y: The image repeats vertically only.
    • No-repeat: The image does not repeat.
  • Position specifies the starting position of the background image.
    • Left top: The image aligns to the top left of the element.
    • Left center: The image aligns to the vertical center on the left.
    • Left bottom: The image aligns to the bottom left of the element.
    • Right top: The image aligns to the top right of the element.
    • Right center: The image aligns to the vertical center on the right.
    • Right bottom: The image aligns to the bottom right of the element.
    • Center top: The image aligns to the top center of the element.
    • Center center: The image is centered both vertically and horizontally.
    • Center bottom: The image aligns to the bottom center of the element.
  • Attachment determines whether the background image is fixed with regard to the viewport or scrolls with the content.
    • Scroll: The background scrolls with the element’s content.
    • Fixed: The background stays fixed during scrolling.
    • Local: The background scrolls along with the element’s contents.
  • Size defines the size of the background image relative to the element it’s applied to.
    • Auto: The image retains its original size.
    • Cover: Scales the image as large as possible to cover the entire element without stretching. The image may be cropped.
    • Contain: Scales the image to the largest size so that its width and height can fit inside the content area without cropping.

Border radius

Border radius allows you to customize the curvature of each corner of an element to fit your design preferences. You can adjust the top left, top right, bottom left, and bottom right corners in units like px, %, em, rem, vh, and vw and adjust the size using arrows. The default setting for all corners is 0. Here are the setting options for border radius:

  • Top Left: Customize the radius of the top left corner to create a rounded effect.
  • Top Right: Adjust the top right corner’s radius to smooth out the edge.
  • Bottom Left: Modify the bottom left corner’s radius for a softer corner.
  • Bottom Right: Shape the bottom right corner by setting its radius to your liking.

Border

You can fine-tune the border:

  • 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.

Box shadow

Box shadow adds a shadow around your sections to create depth or highlight it. Customizing these elements allows you to add multiple shadow designs to your section: For x,y, blur, and spread, you can enter the measurements in px, %, em, rem, vh, and vw and use the arrows to adjust the values.

  • X and Y: X is the horizontal offset, whereas Y is the vertical offset.
  • Blur: Blur determines how fuzzy your shadow is.
  • Spread: Spread determines how far the shadow extends beyond the section.
  • Color: You can choose any color from the color palette.
  • Type: You can choose whether the design is inside or outside the section.

Header and Text

Headers are text headings that organize content and guide readers through your embed. You can add multiple headers in your Embed by loosely placing them in any area or inside tabs, flex, or sections. You can also add normal text to your embed, inside sections, or anywhere in the Embed IDE you need.

Header and Text styling settings

To view header styling settings, select the section you want to add customization and click the settings icon when the blue toolbox appears. This will open a list of styling options on the left-hand side of your Embed. Here’s the list of options you can use to style your header.

Font family

You can change the font type of the header and the text. By default, the font family selected is Arial for header and text. 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

Font size, letter spacing, and line height

Font size determines the size of your text, letter spacing sets the vertical distance between lines of text, and line height adjusts the space between characters in the text. You can set any font size, letter spacing, and line height measurement 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 weight

Font weight determines the text thickness. By default, the font weight is normal. You can change the font weight to any of the following options:

  • Thin
  • Extra-light
  • Light
  • Normal
  • Medium
  • Semi-bold
  • Bold
  • Extra-bold
  • Ultra-bold

Text align

Text align aligns the text horizontally. You can align the text to left, center, right, or justify.

Font color

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

Decoration

Decoration lets you format the text by adding underline, over-line, and line-through. By default, no decoration is selected.

  • Underline: Adds a horizontal line below the text.
  • Over-line: Adds a horizontal line above the text.
  • Line-through: Strikes a horizontal line through the center of the text.

Text Shadow

Text shadow only applies for text blocks and not the heading elements. Text Shadow adds a shadow effect to text, enhancing its visibility or creating a stylistic appearance. By default, no shadow is applied. You can set the X, Y, and blur to any value in px, %, em, rem, vh, and vw and use the arrows to adjust values.

  • X: Adjusts the shadow’s horizontal position relative to the text.
  • Y: Sets the shadow’s vertical position above or below the text.
  • Blur: Modifies the shadow’s sharpness by increasing or decreasing its blur radius.
  • Color: Specifies the color of the shadow. You can choose any color from the color palette.

Image

The image element lets you add an image to the IDE. You can add multiple images inside or outside sections, flex, or tabs. We support all image format types: PNG, JPG/JPEG, SVG, BMP, GIF, WEBP, etc.

How to add an image to the Embed IDE?

You can add any image to your Embed IDE from your local computer.

  • When you drop the image element into the IDE, you’ll be prompted to upload an image. You can also specify the image path to add the image.
  • You can upload multiple images at once and use them in different areas.
  • After uploading the images, click on the image you want to add to the IDE.
  • You can then edit and customize the image by going to image settings.

Image styling settings

To view image styling settings, select the section you want to add customization and click the settings icon when the blue toolbox appears. This will open a list of styling options on the left-hand side of your Embed. Here’s the list of options you can use to style your image.

Width and height

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

Border radius

Border radius adjusts the roundness of an element’s corners. You can customize the border radius size for your image in px, %, em, rem, vh, and vw for the top left, top right, bottom left, and bottom right positions. You can also increase or decrease the size using the up and down arrows.

Border

Border defines the outline of your image, 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.

Box shadow

Box shadow adds a shadow around your image to create depth or highlight it. Customizing these elements allows you to add multiple shadow designs to your images: For x,y, blur, and spread, you can enter the measurements in px, %, em, rem, vh, and vw and use the arrows to adjust the values.

  • X and Y: X is the horizontal offset, whereas Y is the vertical offset.
  • Blur: Blur determines how fuzzy your shadow is.
  • Spread: Spread determines how far the shadow extends beyond the tab banner.
  • Color: You can choose any color from the color palette.
  • Type: You can choose whether the design is inside or outside the tab banner.

Need support?

Didn’t find the answer to your query? Spotted a bug? Looking for something else? If you have any of the above questions, please feel free to contact us by filling out this form. You can also join our Discord community and post your questions there.

Previous Topic ← Post to JDoodle
Next Topic Default Embed configuration →