🥳
scripty.sol
  • Overview
  • Storing Scripts
    • Storing Scripts with ScriptyStorage
    • Using Existing Storage Solutions
  • Building HTML
    • Building HTML on-chain
    • Requesting HTML with Inline Scripts
    • Requesting HTML with Wrapped Scripts
    • Requesting HTML with Wrapped URL Safe Scripts
    • Calculating Buffer Size
    • Requesting base64 Encoded HTML Data URI
    • Requesting Dynamic HTML
  • Base Scripts
    • Base Scripts
    • scriptyBase.js
    • injectPNGScripts-0.0.1.js
    • gunzipScripts-0.0.1.js
  • Examples
    • Running Examples
Powered by GitBook
On this page
  • Inline
  • Wrapped
  • Wrapped URL Safe
  • Choosing Correct Method
  1. Building HTML

Building HTML on-chain

PreviousUsing Existing Storage SolutionsNextRequesting HTML with Inline Scripts

Last updated 2 years ago

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

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.

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

here
here