Quickstart

This guide will get you started with creating a LENS username. As of now only web domains are supported, however, LENS will support usernames via a dedicated smart contract, .eth, .sol, and more.

Before you create an article page, it is highly recommended first making a profile page. Breaking changes may occur if the profile page is missing. Create a profile page.

Setup domain username

Before making a profile page, you first need a username. To create a username, you can use an existing web domain (i.e. yourdomain.com). All that's required is adding a _lens TXT record to your domain's DNS with ${} as the name extension.

Example TXT record for _lens should look something like: https://lenspage.cdn.digitalocean.com/${}

_lens.yourdomain.com should now include your gateway to access your content.

An example domain username is lens.page/slarsen.io. You can see the page API at lens.page/api/slarsen.io.

Create profile page

Add the core values for your JSON file to create a profile page.

Name
version
Type
number
Description
The version field specifies the JSON schema version.

{ "version": 1 }

Name
format
Type
string
Description
The format field sets type of page.

{ "format": "profile" }

Name
design
Type
object
Description
The optional design object includes the theme and animation fields.

{
  "design": {
    "theme": "dark",
    "animation": "stars"
  }
}

Name
metadata
Type
object
Description
The metadata object sets the title and meta description tags for the page.

{
  "metadata": {
    "title": "Page Title",
    "description": "Page meta description"
  }
}

Name
components
Type
object
Description
The data object defines the header and blocks injected onto the page. The header object for a profile includes image and bio fields.

{
  "components": {
    "header": {
      "image": {
        "src": "source-url-to-image",
        "alt": "Alternative image text"
      },
      "bio": "Profile page bio"
    },
    "blocks": []
  }
}

Add blocks to a profile

Now you can start adding custom modules to the page inside the block array.

Name
type
Type
string
Description
The type field specifies the type of module block. This value can be set to button, subtitle, paragraph, image, video, or embed.

{ "type": "button" }

Name
attributes
Type
object
Description
The attributes object contains data specific to the type of module block. The fields are unique to the type of module block. For a button type module block, the fields include style, url, text, and target.

{
  "attributes": {
    "style": "primary",
    "url": "button-url",
    "target": "_self"
  }
}

Name
value
Type
string
Description
The value field can be either text or a source url depending on the type of module block. In the case of a button type module block, this value field is the text of the button.

{ "value": "Button Text" }

Name
blocks
Type
array
Description
The completed blocks array should now include one button type block object. You can add more block objects to populate a page.

{
  "blocks": [
    {
      "type": "button",
      "attributes": {
        "style": "primary",
        "url": "button-url",
        "target": "_self"
      },
      "value": "Button Text"
    }
  ]
}

The completed profile

Your JSON file should now look identical to the example.

{
  "version": 1,
  "format": "profile",
  "design": {
    "theme": "dark",
    "animation": "stars"
  },
  "metadata": {
    "title": "Page Title",
    "description": "Page meta description"
  },
  "components": {
    "header": {
      "image": {
        "src": "source-url-to-image",
        "alt": "Alternative image text"
      },
      "bio": "Profile page bio"
    },
    "blocks": [
      {
        "type": "button",
        "attributes": {
          "style": "primary",
          "url": "button-url",
          "target": "_self"
        },
        "value": "Button Text"
      }
    ]
  }
}

Now save the JSON file as lens.json to your CDN storage so that your endpoint works similar to the example: https://lenspage.cdn.digitalocean.com/lens.json

What's next

Now that you've learned the basics of setting up a profile page with links, you can move onto more advanced programming documentation. Docs will continuesly added by the week. Reference other LENS pages by adding /api/ before the page url.

Core Standard Reference

Components Standard Reference

Create Article Page

Accept Crypto Payments

Lock Content Behind Paywall