Artkit

Studio 721 Artkit is a tool for creating assets and metadata for NFT collections.

Features

• 🤯Create NFT collections of any size
• ⚡️Batch edit your NFT metadata, lightning fast
• ⏩An integrated live coding playground to generate metadata and assets
• 🌆Automated image preview capture
• 💻Everything is local... till you publish to IPFS
• 🗂It's just a zip file editor, so no lock-in
• 🔓Free and open source!

Walkthrough Video

This is part 2 of a 4-part video series:

Artkit is designed for creating large NFT collections, perfect for custom smart contracts.

There are already a variety of tools for creating small NFT collections, where you can upload a single image one-at-a-time. You can even do this directly through most marketplaces.

There are also tools for creating "pfp" (profile picture) collections, where you can automatically combine different image layers.

However, there wasn't a general purpose NFT tool for formatting metadata and uploading assets to IPFS. I'm personally most interested in generative art NFTs, so the other tools didn't meet my needs.

How to use Artkit

Creating a Collection

At its core, Artkit is a .zip file editor. When you create a collection, you're really creating a new zip file. You can save or load a collection file into the tool at any point.

Artkit doesn't save any files to 721.so servers, so you'll have to save your collection to your computer if you want to resume work on it later.

There are currently 2 options for creating a new collection:

• Create Collection
• Create Generative Art Collection - Use this if you want your NFT to be an interactive webpage and/or if you want to generate your image previews or metadata attributes with JavaScript.

.token.json files

After you create your collection, you should see 3 example NFTs with titles and descriptions.

Each token is stored in a .token.json file in the /metadata folder. This is a regular JSON file, but Artkit handles the .token.json extension somewhat specially - it knows this is a token metadata file, and will automatically populate the {tokenId} variable in the metadata when you upload to IPFS.

One of the first things you'll want to do is set the collection size. You can do this from the menu button in the top left: "Tokens > Set Collection Size". This tool duplicates a token file of your choosing (or an empty file, if you uncheck the box) until your collection has the quantity of token files you entered.

The 3 example token files created with a new project are just to illustrate how the tool works; you can delete them or customize them with your own metadata.

Editing Token Files

You can edit token files by selecting them in the file tree in the left sidebar. You can select multiple by holding Shift or Cmd/Ctrl.

There's a quick way to select all of your token files: right click any of the .token.json files and choose "Select Sibling Files". You can then edit all of your tokens at once.

Generating Attributes and Metadata

The "generative art collection" template includes a sample html/css/js setup for generating metadata attributes and/or image previews.

The default template uses p5.js, but you can use any javascript you like. The javascript is not bundled with webpack or another bundler, so you if you want to do that, you'll need to do it separately and load in the bundled js file.

When you have the index.html file selected, you should see a "Generate Images & Attributes..." button at the top of the page. This tool automatically generates images and attributes for each .token.json file in your collection zip.

The way it works: Artkit bundles your code files into a single html string and loads it into an <iframe>. Artkit then waits for your code to call artkit.saveMetadata({ ... }), and stores the result into your collection zip file.

There are some limitations with this approach, e.g. you won't be able to create images that contain cross-origin assets.

Again, this tool is optional - you can also generate your image previews using other techniques. E.g. downloading the zip and adding the files yourself, or set the image url to a server that runs headless Chrome.

Uploading to IPFS

You can upload to IPFS through the "Publish > Publish to IPFS..." option.

Artkit has an integration with https://nft.storage. To upload files, you'll first need to create an API key on their website.

When you click publish, 2 things happen:

1. First, if you have any files in /assets, these are bundled into a "Car" file and uploaded to IPFS
2. Next, all of your /metadata files are bundled into a "Car" file and uploaded to IPFS. If you use any {tokenId} variables in your .token.json files, those will be populated with the correct id. If you have any local asset file references, e.g. if the image of a .token.json refers to /assets/some_file.png, then this will be swapped with the IPFS version of the file ipfs://abc...def/some_file.png uploaded in the previous step.

This 2-step process is necessary so that your metadata files can refer to the IPFS hash of your asset files. Of course, if you don't have any files in /assets, Artkit skips the first step.

Artkit uses "Car" files to hash the entire metadata directory when uploading, which can serve as a "provenance" hash.