scripty.sol is a gas-efficient HTML builder tuned for stitching large JS based together.
scripty.sol allows you to build HTML files that embed JS that are 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.
- Supports creating dynamically created JS based
<script>
tags that is super helpful for on-chain generative art.
Contracts and verified scripts(JS) are published through npm:
npm install scripty.sol --save-dev
The example below generates a simple HTML with fullsize canvas element and a script element that draws a rectangle on the canvas:
// Create head tags
HTMLTag[] memory headTags = new HTMLTag[](1);
headTags[0].tagOpen = "<style>";
headTags[0].tagContent = "html{height:100%}body{min-height:100%;margin:0;padding:0}canvas{padding:0;margin:auto;display:block;position:absolute;top:0;bottom:0;left:0;right:0}";
headTags[0].tagClose = "</style>";
// Create body tags
HTMLTag[] memory bodyTags = new HTMLTag[](2);
bodyTags[0].tagOpen = '<canvas id="myCanvas">';
bodyTags[0].tagClose = "</canvas>";
bodyTags[1].tagContent = 'const canvas=document.getElementById("myCanvas"),ctx=canvas.getContext("2d");ctx.beginPath(),ctx.rect(20,20,150,100),ctx.stroke();';
bodyTags[1].tagType = HTMLTagType.script;
// Create HTML request with head and body tags
HTMLRequest memory headTags;
htmlRequest.headTags = headTags;
htmlRequest.bodyTags = bodyTags;
// Get full HTML string
string memory htmlString = IScriptyBuilderV2(
scriptyBuilderAddress
).getHTMLString(htmlRequest);
<html>
<head>
<style>
html {
height: 100%
}
body {
min-height: 100%;
margin: 0;
padding: 0
}
canvas {
padding: 0;
margin: auto;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.stroke();
</script>
</body>
</html>
- ScriptyStorageV2 - 0x3349705FF99e44d1A42c8ea600DE7cF5bE36E034
- ScriptyBuilderV2 - 0x5CEB91D612a735EC5f50Ad68c7AD22a945c602FC
- ETHFSFileStorage - 0xFc7453dA7bF4d0c739C1c53da57b3636dAb0e11e
- ScriptyStorageV2 - 0x4e2f40eef8DFBF200f3f744a9733Afe2E9F83D28
- ScriptyBuilderV2 - 0xccd7E419f1EEc86fa748c9079584e3a89312f11C
- ETHFSFileStorage - 0x70a78d91A434C1073D47b2deBe31C184aA8CA9Fa
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.
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.
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.
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.
Assembles GZIP compressed Base64 encoded three.js
with a demo scene. Metadata and animation URL are both base64 encoded.
Assembles GZIP compressed base64 encoded three.js
with a demo scene. Metadata and animation URL are both URL encoded.
Assembles PNG compressed base64 encoded three.js
with a demo scene. Metadata and animation URL are both URL encoded.
Assembles PNG compressed base64 encoded three.js
with a demo scene. Metadata and animation URL are both URL encoded. It uses custom script wraps.
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