How was the Astro CLI wizard made?

Question

So I started playing around with Astro and noticed the interactive CLI wizard that guides you through the setup steps after using npm create astro@latest is really nice, works well and actually looks good!

Does anyone know how it was made? Was there some kind of (npm?) package used and if so which one? I'd like to try to make something like this for my own project.

For clarity, I mean this wizard like thingy guiding you through the setup: Astro Setup Wizard

Bryce Russell · Accepted Answer · 2023-05-06T23:14:19.850

Update:

Astro now uses an internal toolkit for their CLIs, if you want to create a similar CLI you can use clack created by @natemoo-re

Old CLI:

It mainly uses these packages for the visuals:

Prompts: https://www.npmjs.com/package/prompts
Colors/Typography: https://www.npmjs.com/package/chalk
Colors/Typography: https://www.npmjs.com/package/kleur
Loading Icon: https://www.npmjs.com/package/ora

This is the full list of dependencies: https://github.com/withastro/astro/blob/main/packages/create-astro/package.json

"dependencies": {
    "@astrojs/cli-kit": "^0.1.4",
    "chalk": "^5.0.1",
    "comment-json": "^4.2.3",
    "execa": "^6.1.0",
    "giget": "^1.0.0",
    "kleur": "^4.1.4",
    "ora": "^6.1.0",
    "prompts": "^2.4.2",
    "strip-ansi": "^7.0.1",
    "which-pm-runs": "^1.1.0",
    "yargs-parser": "^21.0.1"
},

How was the Astro CLI wizard made?

1 Answers1