Custom HTML

The Custom HTML block enables you to seamlessly incorporate any web content directly into your documentation pages. This flexibility allows you to enhance your documentation with diverse elements, making it more engaging and informative for your audience.

To create a Custom HTML block:-

  • Type /

Injection Warning

Never inject code that you did not inspect yourself.

What's Included?

We already have Bootstrap 4.1 and FontAwesome 5 Free loaded which you can use.

How to use Custom HTML?

With Custom HTML, there are two modes available:

  • When the HTML content is straightforward, it is rendered directly within the page's body, eliminating the need for an iFrame. Below is an example of simple HTML code:

<span>This is simple HTML</span> <select style="background: red"> <option value="0">0</option> <option value="0">1</option> </select>

For this mode, you can utilize inline styling effectively. Please refrain from adding any <body> or <html> tags, as the content is already rendered within a <body> tag. If you would like to style the elements, you can use Custom CSS to create new classes that can be applied to the elements in this section.

iFrame in Custom HTML

For enhanced security, any HTML that contains scripts, styles, head tags, or additional iFrames will be rendered within an iFrame embedded in the page. This ensures that potentially harmful content is isolated and does not interfere with the main page. For instance, the following code would be rendered within an iFrame:

<style type="text/css"> .example-css { color: blue; } </style> <div class="example-css"> This is HTML that will get encapsulated in an iFrame <button onclick="submit()"></button> </div> <script> function submit() { console.log("Script tags cause HTML to get encapsulated in an iFrame"); } </script>

When using an iFrame, it is important to note that no pre-existing CSS will load. This includes styles from Custom CSS or any third-party libraries. Therefore, you'll need to apply your own CSS rules to ensure your iFrame content appears as desired.

Resizing Dynamic iFrames

If your Custom HTML is being embedded within an iFrame, and the iFrame dynamically adds elements to the body, this can lead to limitations in height and the appearance of scrollbars. To resolve this issue, you can instruct the iFrame to resize by using:

window.postMessage('resize', '*');

Use this function whenever you add elements to body dynamically.

Custom HTML Examples

Here are our top examples:

Fancy Button

See Wide Layout

Generate this button by:

<a href="https://docs.developerhub.io/?goto=wide" target="_blank" style="background-color: #333; color: white; padding: 12px; border-radius: 3px; text-decoration: none !important"> See Wide Layout </a>

Postman Collection Button

Run in Postman

Generate a postman collection button by:

<a href="https://www.postman.com/run-collection/:collection_id"> <img src="https://run.pstmn.io/button.svg" alt="Run in Postman"> </a>

Column Layout

Welcome to our Supercharged documentation which has been written using DeveloperHub.io. This is a column layout.

Generate this column layout by:

<div class="container-fluid"> <div class="row"> <div class="col pl-0 text-left"> Welcome to our Supercharged documentation which has been written using DeveloperHub.io. This is a column layout. </div> <div class="col pr-0"> <img style ="max-width: 300px" src="https://res.cloudinary.com/developerhub/image/upload/v1534308910/1/bqimpvojsumftqf8hl7p.png"/> </div> </div> </div>

Grid Layout

Generated this grid layout by:

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-rows: auto; gap: 14px;"> <a href="https://docs.developerhub.io/support-center/code-blocks"> <div style="max-width: 100%; height: 200px; background: #248FB2"></div> </a> <a href="https://docs.developerhub.io/support-center/images"> <div style="max-width: 100%; height: 200px; background: #27AE44"></div> </a> <a href="https://docs.developerhub.io/support-center/tables"> <div style="max-width: 100%; height: 200px; background: #EFAC4E"></div> </a> <a href="https://docs.developerhub.io/support-center/callouts"> <div style="max-width: 100%; height: 200px; background: #d9524f"></div> </a> </div>

GitHub Gist

Generated this Gist by:

<script src="https://gist.github.com/pkuczynski/7821992.js"></script>

PDF Reader

Generate this PDF Reader by:

<div style="text-align: center"><iframe src="https://drive.google.com/viewerng/viewer?url=https://s3-eu-west-1.amazonaws.com/dh-misc-z/test-pdf.pdf&embedded=true" width="80%" height="390" style="border: none; left: calc(100%-150px);"></iframe></div>

Flowcharts and Diagrams

Generate this Flowchart by exporting from draw.io in HTML format.

Google Maps

Generated this map by using embedgooglemap.net.

  Last updated on May 5, 2025
Next to read:
Tabs
null
Edit on GitHub
On This Page
Custom HTMLWhat's Included?How to use Custom HTML?iFrame in Custom HTMLResizing Dynamic iFramesCustom HTML ExamplesFancy ButtonPostman Collection ButtonColumn LayoutGrid LayoutGitHub GistPDF ReaderFlowcharts and DiagramsGoogle Maps