Quick Start
This guide will walk you through creating and deploying your first onchain NFT.
Project Structure
After running bun run setup, your project will have the following structure:
your-project/
├── contracts/ # Solidity contracts
│ ├── YourProject.sol # Main NFT contract
│ ├── YourProjectRenderer.sol # Metadata renderer
│ └── YourProjectStorage.sol # Asset storage
├── html/ # HTML/CSS/JS assets
├── assets/ # Image assets
├── script/ # Foundry deployment scripts
├── scripts/ # TypeScript utility scripts
└── config/ # Configuration filesCustomize Your NFT
1. Edit the HTML Template
Modify the files in the html/ directory to create your NFT's visual representation:
{{projectName}}.html- Main HTML structure{{projectName}}.css- Styles{{projectName}}.js- Interactive behavior
2. Add Assets
Place your images in the assets/ directory. Convert them to AVIF for optimal size:
bun run convert-to-avif3. Configure Uploads
Edit config/filesToUpload.json to specify which files should be uploaded onchain.
Deploy Your NFT
Local Development
Start a local Anvil node:
anvilDeploy to local network:
forge script script/DeployFullYourProject.s.sol --rpc-url http://localhost:8545 --broadcastTestnet Deployment
Deploy to a testnet (e.g., Sepolia):
forge script script/DeployFullYourProject.s.sol --rpc-url $SEPOLIA_RPC_URL --broadcast --verifyUpload Assets
After deploying, upload your assets to the storage contract:
bun run upload-all-filesVerify Your NFT
After uploading, verify the data was stored correctly and test the output.
Verify Uploads
Download files from the storage contract to tmp/ and verify their integrity:
source .env && forge script script/VerifyUploads.s.sol --rpc-url $RPC_URLExtract & Preview HTML
Fetch the tokenURI, decode the metadata and HTML, and save it to tmp/final_check.html:
bun run extract-htmlOpen tmp/final_check.html in your browser to verify the NFT renders correctly.
Extract Metadata
Extract just the JSON metadata from the tokenURI:
bun run extract-metadataNext Steps
- Read the Architecture Overview to understand how the contracts work
- Learn about Deploying to production networks
- Explore Uploading Assets for advanced asset management