# Overview

**scripty.sol** is a gas-efficient HTML builder tuned for stitching large JS based scripts together. 

<figure><img src="https://3626638642-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWFvVKNokLt8gzQjJ4L1T%2Fuploads%2F2LPkwe7se43qEkobMtAu%2Fheader.png?alt=media&#x26;token=a6d0c4e3-2ddc-4d5b-bdfa-2f88883d137d" alt=""><figcaption><p>scripty.sol</p></figcaption></figure>

With scripty.sol you can build HTML files that embed JS stored on-chain. Some benefits of using scripty.sol:

* Gas efficient. It utilises `DynamicBuffer` and EthFS to save huge amount of gas while storing and assembling scripts together.
* You can use already deployed storage solutions.
* You can build modular JS based HTML files directly on-chain.

#### Platforms that use scripty.sol

* [Art Blocks](https://www.artblocks.io)
* [Alba](https://www.alba.art)

#### Projects that use scripty.sol

* [CryptoCoaster](https://www.cryptocoaster.fun/)
* [the metro](https://drops.int.art/the-metro)
* [GOLD](https://www.making.gold/)
* [Terraform Navigator](https://etherscan.io/address/0xad41bf1c7f22f0ec988dac4c0ae79119cab9bb7e#code)

### Deployed Contracts

#### Ethereum Mainnet contracts:

* **ScriptyStorageV2** - [0x3349705FF99e44d1A42c8ea600DE7cF5bE36E034](https://etherscan.io/address/0x3349705FF99e44d1A42c8ea600DE7cF5bE36E034)
* **ScriptyBuilderV2** - [0x5CEB91D612a735EC5f50Ad68c7AD22a945c602FC](https://etherscan.io/address/0x5CEB91D612a735EC5f50Ad68c7AD22a945c602FC)
* **ETHFSFileStorage** - [0xFc7453dA7bF4d0c739C1c53da57b3636dAb0e11e](https://etherscan.io/address/0xFc7453dA7bF4d0c739C1c53da57b3636dAb0e11e)

#### Ethereum Goerli contracts:

* **ScriptyStorageV2** - [0x4e2f40eef8DFBF200f3f744a9733Afe2E9F83D28](https://goerli.etherscan.io/address/0x4e2f40eef8DFBF200f3f744a9733Afe2E9F83D28)
* **ScriptyBuilderV2** - [0xccd7E419f1EEc86fa748c9079584e3a89312f11C](https://goerli.etherscan.io/address/0xccd7E419f1EEc86fa748c9079584e3a89312f11C)
* **ETHFSFileStorage** - [0x70a78d91A434C1073D47b2deBe31C184aA8CA9Fa](https://goerli.etherscan.io/address/0x70a78d91A434C1073D47b2deBe31C184aA8CA9Fa)

### Live Examples

**Stacked 3D Objects Shapes -** [**NFT1**](https://testnets.opensea.io/assets/goerli/0x66530853C069734fD0B0A2c28aEd3D60bb76e960/0) [**NFT2**](https://testnets.opensea.io/assets/goerli/0xCF925C72d69Bf7F1B6123c3036Cb62A79d73d6ea/0)

Both NFTs assemble PNG compressed base 64 encoded `three.js` with an uncompressed demo scene. First NFT creates some 3D cubes. Second NFT gets the first NFT scene on-chain and adds spheres.

[**p5js from EthFS FileStore**](https://testnets.opensea.io/assets/goerli/0x1901C748eE74E6256d58A927f90557C34Dc16181/0)

Assembles base64 encoded `p5.js` that's stored in ethfs's FileStore contract with a demo scene. Metadata and animation URL are both base64 encoded.

[**p5js from EthFS FileStore - URL Safe**](https://testnets.opensea.io/assets/goerli/0xEbadb9173dCb30658808f770Cb0e281A5864F5Ed/0)

Assembles base64 encoded `p5.js` that's stored in ethfs's FileStore contract with a demo scene. Metadata and animation URL are both URL encoded.

[**Random Shapes**](https://testnets.opensea.io/assets/goerli/0x6Db1f31b58C1329CC1b59bEe41C8cD72a1C3D61c/0)

Assembles multiple uncompressed scripts that draw shapes on same `<canvas></canvas>` element with a controller script that is created in NFT contract. This controller script passes some chain parameters to canvas scene.

[**Cube3D - GZIP Compressed - BASE64 Encoded**](https://testnets.opensea.io/assets/goerli/0xEDe0420DAd5e0320919f6EB68caF8f26BFE559C8/0)

Assembles GZIP compressed Base64 encoded `three.js` with a demo scene. Metadata and animation URL are both base64 encoded.

[**Cube3D - GZIP Compressed - URL Safe**](https://testnets.opensea.io/assets/goerli/0x3cdaca789458dadcc57c75d8d18902f0869afa4f/0)

Assembles GZIP compressed base64 encoded `three.js` with a demo scene. Metadata and animation URL are both URL encoded.

[**Cube3D - PNG Compressed - URL Safe**](https://testnets.opensea.io/assets/goerli/0x9256548d8D9Fd06eE2100e5fcC9A3c4AAE6D9e37/0)

Assembles PNG compressed base64 encoded `three.js` with a demo scene. Metadata and animation URL are both URL encoded.

[**Cube3D - PNG Compressed - URL Safe with custom wrap**](https://testnets.opensea.io/assets/goerli/0xB00ce86d1b0FeF2A266d1A3c3A541E61c0Ad218E/0)

Assembles PNG compressed base64 encoded `three.js` with a demo scene. Metadata and animation URL are both URL encoded. It uses custom script wraps.

[**ThreeJS Module - GZIP Compressed - URL Safe with custom wrap**](https://testnets.opensea.io/assets/goerli/0x7cA4D7310562cA0b563A28c106bBc842f473F73b/0)

Assembles GZIP compressed base64 encoded `modular three.js` with a demo scene. Metadata and animation URL are both URL encoded. It uses custom script wraps. This is the most complex of all the examples. It demonstrates how to:

* dynamically inject data into your javascript code
* load gzipped javascript modules in the desired order, using gzipped es-module-shim for full browser support
* embed custom javascript
* make it all URL safe

### Authors

* [@0xthedude](https://twitter.com/0xthedude)
* [@xtremetom](https://twitter.com/xtremetom)

### Acknowledgments

* [EthFS](https://github.com/holic/ethfs) - [@frolic](https://twitter.com/frolic)
* DynamicBuffer - [@cxkoda](https://twitter.com/cxkoda)