First things first. We'll start by creating a new 11ty project, which means adding some packages and files.

In a mostly-empty package.json, we'll add the 11ty dependency and -- crucially -- indicate that this is an ESM project. As Zach explains, "type": "module" flips the switch:

  "scripts": {
    "build": "npx @11ty/eleventy",
    "start": "npx @11ty/eleventy --serve --incremental"
  },
  "type": "module",
  "dependencies": {
    "@11ty/eleventy": "^3.0.0-alpha.6"
  },

We add a minimal eleventy.config.js file in the root directory. See: this is already ESM, no more module.exports!

export default function () {
	return {
		dir: {
			input: "site",
			output: "_site",
		},
	};
}

Finally, we'll start the content for our site in site/index.11ty.js. This is a JavaScript template which exports a specially-named render function. This render function is what 11ty "JavaScript Templates" looks for:

export function render() {
	return "<h1>Hello ESM</h1>";
}

Running 11ty dev server

When we do npm run start, 11ty does an incremental build using the dev server:

We can click the link in the output to open in a browser:

The build also generated an _site directory at the root with the build output. You can tell the IDE not to index this directory by right-clicking, choosing Mark directory as... and choosing Excluded.

There's our start: a very simple 11ty setup and site. In the next step, we'll look at introducing TypeScript to our project.

Full Listings

package.json

{
	"name": "eleventy-tsx",
	"version": "1.0.0",
	"description": "Demo of Eleventy 3, ESM, and TS/TSX",
	"scripts": {
		"build": "npx @11ty/eleventy",
		"start": "npx @11ty/eleventy --serve --incremental"
	},
	"keywords": [],
	"author": "Paul Everitt <pauleveritt@me.com>",
	"license": "ISC",
	"type": "module",
	"dependencies": {
		"@11ty/eleventy": "^3.0.0-alpha.6"
	},
	"devDependencies": {
		"prettier": "^3.2.5"
	}
}

site/index.11ty.js

export function render() {
	return "<h1>Hello ESM</h1>";
}