> For the complete documentation index, see [llms.txt](https://int-art.gitbook.io/scripty.sol/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://int-art.gitbook.io/scripty.sol/building-html/building-html-on-chain.md).

# 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
<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](/scripty.sol/building-html/requesting-html-with-wrapped-scripts.md) for more details.

#### HTML file structure:

```html
<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.&#x20;

This method is tuned for embedding HTML into metadata JSON for NFT `tokenURI()` method. Please check out [here](/scripty.sol/building-html/requesting-html-with-wrapped-url-safe-scripts.md) for more details.

#### HTML file structure:

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://int-art.gitbook.io/scripty.sol/building-html/building-html-on-chain.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
