The Subname Developer Guide helps you build and customize your own ENS subname minting website using our white label starter kit. This template provides a fully functional subname-minting website that you can deploy in minutes and customize to match your brand.

​
Prerequisites

  • ENS Name Activation: Your ENS name must be activated and listed on the Namespace platform
  • Node.js: Version 16 or higher
  • Git: For cloning the repository

​
Getting Started

1

Activate ENS Name

To enable subname registrations through your custom website, you first need to activate your ENS name(s). Once activated, others will be able to mint subnames from them.

How-to Activate ENS Name

See the step-by-step guide on how to activate an ENS Name.
2

Clone the Repository

Clone the white label starter kit repository:
git clone https://github.com/thenamespace/subpages.git
cd packages/subname-minting-website-template/
3

Install Dependencies

Install the required dependencies:
yarn install
4

Configure Environment

Create a .env file in the project root with your configuration:
VITE_APP_LISTED_NAME=yourname.eth
VITE_APP_LISTING_CHAIN=base
VITE_APP_ALCHEMY_TOKEN=your_alchemy_token_here
VITE_APP_DEFAULT_AVATAR=https://your-avatar-url.com
VITE_APP_IS_TESTNET=false
VITE_APP_MINT_SOURCE=your-website
5

Start Development

Start the development server:
yarn run dev
Your website will be available at http://localhost:5173

​
Customization

​
Theme Customization

The easiest way to customize your website’s appearance is through the theme.json file. This file contains design variables that control colors, backgrounds, and visual elements. 
{
  "main": "#0a2943",
  "accent": "#309ae0", 
  "light": "#ffffff",
  "dark": "#000000",
  "error": "#d80000",
  "backgroundImage": "https://your-background-image.com/image.jpg"
}

​
Default ENS Avatar

You can configure a default avatar for newly minted subnames. This can be your company logo or any image that represents your brand. Users can change this after minting.

​
Custom Records

Configure custom text records and address records for your subnames:
  • Text Records: Add custom metadata like website URLs, social media handles, or descriptions
  • Address Records: Set default wallet addresses for different chains
Customization for text records and address records can be made in the MintForm.tsx component located at /packages/subname-minting-website-template/src/components/MintForm.tsx. The records are configured in the mintParameters function call:
MintForm.tsx
const params = await mintParameters({
  minterAddress: address,
  expiryInYears: expiryYears,
  records: {
    addresses: addresses,
    texts: texts,
  },
  label: label,
  parentName: listedName,
  owner: address!,
});
Modify the addresses and texts objects to set your desired default records for newly minted subnames.

​
Deployment

Once you’re satisfied with your customizations, build and deploy your website: 
yarn run build
This creates a dist folder containing your production-ready website that you can deploy to any static hosting service like Vercel, Netlify, or GitHub Pages.

​
Examples

See these live examples of customized Subpages:

​
Get Started

Subpages GitHub

Launch your subname minting website in 5 minutes