Building HTML on-chain

ScriptyBuilder provides multiple ways of assembling JS.

Inline

With this method, ScriptyBuilder appends all scripts into a single <script></script> tag. Since scripts are appended without any conversion and encoding, they should be stored in raw format.

HTML file structure:

<html>
    <body style='margin:0;'>
        <script>
            [myScript1]
            [myScript2]
        </script>
    </body>
</html>

Wrapped

With this method, ScriptyBuilder wraps each script with various <script></script> tags.

Scripty supports multiple wrapping methods and also custom wrapping. Please check out here for more details.

HTML file structure:

<html>
    <body style='margin:0;'>
        <script>[script1]</script>
        <script src='data:text/javascript;base64,[script2]'></script>
        <script type="text/javascript+gzip" src="data:text/javascript;base64,[script3]"></script>
        <script type="text/javascript+png" src="data:text/javascript;base64,[script3]"></script>
        [customWrapPrefix][script3][customWrapSuffix]
    </body>
</html>

Wrapped URL Safe

With this method, ScriptyBuilder wraps each script with various URL encoded <script></script> tags.

This method is tuned for embedding HTML into metadata JSON for NFT tokenURI() method. Please check out here for more details.

HTML file structure:

<html>
    <head></head>
    <body style='margin:0;'>
        <script src='data:text/javascript;base64,[script1]'></script>
        <script type="text/javascript+gzip" src="data:text/javascript;base64,[script2]"></script>
        <script type="text/javascript+png" src="data:text/javascript;base64,[script3]"></script>
        [customWrapPrefix][script3][customWrapSuffix]
    </body>
</html>

Output:

data:text/html,%3Cbody%20style%3D%27margin%3A0%3B%27%3E%3Cscript%20src%3D%22data%3Atext%2Fjavascript%3Bbase64%2CbGV0IF9zYj17fTtfc2IuZXZlbnRzPVtdO19zYi5zY3JpcHRzPXt9O19zYi5hZGRFdmVudD0ocyxlKT0+e2lmKCFfc2IuZXZlbnRzW3NdKXtfc2IuZXZlbnRzW3NdPVtlXX1lbHNle19zYi5ldmVudHNbc10ucHVzaChlKX19O19zYi5jYWxsRXZlbnRzPShzLC4uLmUpPT57aWYoX3NiLmV2ZW50c1tzXSl7X3NiLmV2ZW50c1tzXS5mb3JFYWNoKChzPT5zKC4uLmUpKSl9fTtfc2IuY3JlYXRlTWFpbkNhbnZhcz0oKT0+e2lmKF9zYi5tYWluQ2FudmFzKXtyZXR1cm4gX3NiLm1haW5DYW52YXN9Y29uc3Qgcz1kb2N1bWVudC5jcmVhdGVFbGVtZW50KCJjYW52YXMiKTtfc2IubWFpbkNhbnZhcz1zO19zYi5tYWluQ29udGV4dDJkPXMuZ2V0Q29udGV4dCgiMmQiKTtkb2N1bWVudC5ib2R5LmFwcGVuZENoaWxkKHMpO3JldHVybiBzfTs=%22%3E%3C%2Fscript%3E

Choosing Correct Method

Since inline method has no any wrapping and it's designed to be used with raw scripts, building HTML usually costs less gas. This method is useful if all the scripts are stored in raw format.

With wrapped method you can assemble scripts with different compression types. This is useful if you want to assemble scripts with different compression types.

URL safe method is the most gas efficient way that ScriptyBuilder provides. It's tuned for embedding HTML file into JSON metadata for NFT tokenURI() method. It is very similar to wrapped method but the difference is, HTML tags and script tags are double URL encoded. This means, HTML file doesn't need to be encoded in base64 while adding to JSON.

PreviousUsing Existing Storage SolutionsNextRequesting HTML with Inline Scripts

Last updated