scripty.sol is a gas efficient, storage agnostic, on-chain HTML builder optimised for stitching together large JavaScript based tags.
scripty.sol allows you to build HTML files directly on-chain with minimal gas cost. Some benefits of using scripty.sol:
- Gas efficient. It utilises
DynamicBufferto save huge amount of gas while assembling scripts together. - scripty.sol is storage agnostic. You can use any on-chain storage solutions available.
- You can build modular JS based HTML files directly on-chain.
- You can dynamically inject data into your HTML.
Contracts and verified scripts(JS) are published through npm:
npm install scripty.sol --save-devThe 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 htmlRequest;
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 - 0xbD11994aABB55Da86DC246EBB17C1Be0af5b7699
- ScriptyBuilderV2 - 0xD7587F110E08F4D120A231bA97d3B577A81Df022
- ETHFSV2FileStorage - 0x8FAA1AAb9DA8c75917C43Fb24fDdb513edDC3245
- ScriptyStorageV2 - 0xbD11994aABB55Da86DC246EBB17C1Be0af5b7699
- ScriptyBuilderV2 - 0xD7587F110E08F4D120A231bA97d3B577A81Df022
- ETHFSV2FileStorage - 0x8FAA1AAb9DA8c75917C43Fb24fDdb513edDC3245
- ScriptyStorageV2 - 0xbD11994aABB55Da86DC246EBB17C1Be0af5b7699
- ScriptyBuilderV2 - 0xD7587F110E08F4D120A231bA97d3B577A81Df022
- ETHFSV2FileStorage - 0x8FAA1AAb9DA8c75917C43Fb24fDdb513edDC3245
- ScriptyStorageV2 - 0xbD11994aABB55Da86DC246EBB17C1Be0af5b7699
- ScriptyBuilderV2 - 0xD7587F110E08F4D120A231bA97d3B577A81Df022
- ETHFSV2FileStorage - 0x8FAA1AAb9DA8c75917C43Fb24fDdb513edDC3245
- ScriptyStorageV2 - 0xbD11994aABB55Da86DC246EBB17C1Be0af5b7699
- ScriptyBuilderV2 - 0xD7587F110E08F4D120A231bA97d3B577A81Df022
- ETHFSV2FileStorage - 0x8FAA1AAb9DA8c75917C43Fb24fDdb513edDC3245
- ScriptyStorageV2 - 0xbD11994aABB55Da86DC246EBB17C1Be0af5b7699
- ScriptyBuilderV2 - 0xD7587F110E08F4D120A231bA97d3B577A81Df022
- ETHFSV2FileStorage - 0x8FAA1AAb9DA8c75917C43Fb24fDdb513edDC3245
- ScriptyStorageV2 - 0xbD11994aABB55Da86DC246EBB17C1Be0af5b7699
- ScriptyBuilderV2 - 0xD7587F110E08F4D120A231bA97d3B577A81Df022
- ETHFSV2FileStorage - 0x8FAA1AAb9DA8c75917C43Fb24fDdb513edDC3245
- ScriptyStorageV2 - 0xbD11994aABB55Da86DC246EBB17C1Be0af5b7699
- ScriptyBuilderV2 - 0xD7587F110E08F4D120A231bA97d3B577A81Df022
- ETHFSV2FileStorage - 0x8FAA1AAb9DA8c75917C43Fb24fDdb513edDC3245
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