Stay in the iBallexus Discord Server to get notified of the latest updates to the Kyvorn API

​
Setting up your UI

For this tutorial, I will create a basic UI card layout that will show information about the fetched items with a search. On click, it will open a popup menu that will show the raw script with a copy button.

You’ll need to open a new popup menu and make an API call to the Posts by ID endpoint in order to obtain script content, unless you get it from the raw script.

​
Modifying the pre-made Kyvorn API Template

Vulnerability Alert: Do not use this code example in a product environment! There are issues where RCE/XSS is possible by attackers via embedding script tags/iframe tags into their script upload, which can be used to perform malicious activity. You can get around this by manually embedding each form with textContent instead of putting the entire thing in innerHTML, which is insecure and can cause these vulnerabilities.

Out of date: This example is missing important new updates to the Kyvorn library that should be included in your website. Do not use it for production.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kyvorn Script Library</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .fade-in { animation: fadeIn 0.3s ease-in-out; }
        .fade-out { animation: fadeOut 0.3s ease-in-out forwards; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
    </style>
</head>
<body class="bg-gray-900 text-white p-6">

    <h1 class="text-3xl font-bold text-center mb-6">Kyvorn Script Library</h1>
    <div class="max-w-6xl mx-auto">
        <input id="search" type="text" placeholder="Search scripts..." class="w-full p-3 rounded-lg bg-gray-800 text-white mb-4 border border-gray-700">
        <div id="scriptContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>
    </div>

    <div id="modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
        <div class="bg-gray-800 p-6 rounded-lg w-[500px] fade-in">
            <h2 id="modalTitle" class="text-lg font-bold mb-2"></h2>
            <p id="modalDescription" class="text-sm mb-2"></p>
            <p id="modalAuthor" class="text-xs text-gray-400 mb-2"></p>
            <pre id="scriptContent" class="bg-gray-700 p-2 rounded text-sm overflow-auto max-h-48"></pre>
            <button id="copyBtn" class="mt-2 w-full bg-blue-600 hover:bg-blue-700 p-2 rounded">Copy</button>
            <button id="modalCloseBtn" class="mt-2 w-full bg-red-600 hover:bg-red-700 p-2 rounded">Close</button>
        </div>
    </div>

    <script src="script.js"></script>

</body>
</html>

Using this implementation, we can easily embed the script library into an HTML page. You will need to edit this to work for you but it should mostly work. Get creative! Design awesome UIs and take advantage of the full possibilities of the Kyvorn Script Library!

​
Tip: Setting fallback images

In a great world, every script on Kyvorn would include images. In reality, however, not all scripts will include banner images. You’ll be left with an ugly banner image, usually transparent and not looking well. You can set an on error to image classes, or in our use case, the || block in our JS.

Need an image failed placeholder? Use Kyvorn’s: https://cdn.peretas.tech/imgfailed.png

As you can see in this example, the use of placeholder images make the Script Library look much more cleaner.

In this example, you can see that it looks goofy with the image unloaded thingy in the top. In our card.innerHTML you can see our line of code:

<img src="${script.scriptInfo.bannerUrl || 'https://cdn.peretas.tech/imgfailed.png'}" class="w-full h-32 object-cover rounded-lg mb-2">

You can replace this URL with anything, this will simply load https://cdn.peretas.tech/imgfailed.png when script.scriptInfo.bannerUrl is equal to null. In HTML, you can also use the onerror element to change the URL when it errors out:

<img src="${script.scriptInfo.bannerUrl}" class="w-full h-32 object-cover rounded-lg mb-2" onerror="this.src='https://cdn.peretas.tech/imgfailed.png'">

This will instead load https://cdn.peretas.tech/imgfailed.png when any error occurs, which is more optimal to use if the image the user has provided has CORS enabled or is deleted.

​
Branding

Congratulations! You just included Kyvorn inside of your application! Now, you are able to include the special Uses Kyvorn API badge onto your executor’s website or Credits/Settings page. You can download it on our main page here.

HomeKyvorn Embedded